Catatan: Artikel ini sudah tidak relevan lagi pada template Fletro Pro versi terbaru

Salah satu kelebihan dari template ini adalah terdapat widget Related Posts dengan 5 Style berbeda yang bisa Anda ubah kapanpun Anda Mau. Widget ini juga sudah dilengkapi dengan lazy image yang artinya gambar pada related post ini tdak akan mempengaruhi loading blog Anda.

Sebagian besar style related post ini kurang terlihat perbedaanya pada tampilan desktop, tapi akan sangat terlihat perbedaannya dika dibuka pada tampilan mobile. Berikut adalah 5 style Related Posts pada template ini:

Tutorial Mengbah Layout Related Posts

Secara default template ini memakai related post style 4, untuk mengubahnya pada menu Edit HTML silahkan cari kode dibawah ini dan ubah bagian yang sudah ditandai dengan nomor 1 sampai 5. Langkah cepatnya carilah <b:includable id='post-related', susunan kode-nya akan terlihat seperti dibawah ini:

<b:includable id='post-related' var='post'>
  <div class='related-posts'>
    <div id='related-posts'/>
    <script>
      var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];
      var relatedPostConfig = {
        homePage: "<data:blog.homepageUrl/>",
        widgetTitle: "<h3 class='heading'>data:messages.youMayLikeThesePosts/></h3>",
        numPosts: 6,
        summaryLength: 20,
        titleLength:"auto",
        thumbnailSize: 275,
        noImage: "data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",
        containerId: "related-posts",
        newTabLink: false,
        moreText: "Read more",
        widgetStyle: 3,
        callBack:function(){}
      }
    </script>

Keterangan:

• Tulisan related Post yang di blok warna diatas merupakan judul dari widget ini, Anda bisa mengubah kalimatnya menjadi 'Artikel Terkait', 'You Might Also Like' dan sebagainya.
• numPosts:6 - Merupakan jumlah postingan yang muncul dalam related post
• thumbnailSize:275 - Ukuran gambar pada related post
• noImage: - Url default thumbnail ketika tidak Ada gambar dalam postingan
• newTabLink:false - Nonaktifkan buka link di tab baru ketika diklik, ubah menjadi 'true' untun mengaktifkan
• widgetStyle:3 - Nomor style related post yang digunakan dapat diganti menjadi angka 1 sampai 5

Silahkan coba satu persatu style related post template ini dan lihat perbedaannya.