Cara Membuat Related Post / Artikel Terkait

Cara Membuat Related Post di Bawah Postingan Blog. Related Post atau artikel terkait ala Kang ismet ,memperlihatkan artikel yang terkait dengan kategori yang di eksporsur sesuai kategori yang di pilih, artikel terkait atau related post ini sangat efektif untuk meningkatkan traffic pengunjung blog anda, karena dengan related post, pengunjung akan di tawarkan artikel lainnya dengan kategori yang di pilih, related post ini juga sangat efektif untuk menurunkan tingkat bounce rate pada blog,

Baca : Membuat Related Post / Artikel Terkait Dengan Gambar

Seperti yang kita tahu bahwa google sangat menyukai blog yang tingkat bounce ratenya sangat rendah, related post ini juga sangat ringan untuk loading ,karena related post atau artikel terkait ini akan di buat tanpa tumbhnail atau gambar, nah bagi anda yang ingin menggunakan related post ini, silahkan ikuti tutorial saya di artikel ini.

Cara Membuat Related Post / Artikel Terkait
Sumber Gambar : Blog.kangismet.net

Gambar di atas adalah tampilan related post yang akan kita buat, cukup simple dan ringan untuk loading.
Sebelum anda melakukan tutorial ini, silahkan backup template anda untuk menjaga kesalahan erorr pada template.

Cara Membuat Related Post Di Bawah Posting Blog. 
1. Buka akun blogger anda.
2. Pilih menu template > klik edit Html.
3. Copy code di bawah ini dan letakan tepat di atas kode ]]></b:skin>

#related-post background:none;width:100%;margin-top:35px;margin-bottom:10px;padding:5px 0 10px 0px}
#related-post h4{font-size:150%;text-transform:uppercase;margin:0 0 15px;padding:0;font-weight:normal}
#related-post li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZxua5wej0Ap4bt9ESgf1pCh-8TPQnEzG2wl1xt3YnRNE2xhII5YTCIaGdLVgDYsh7dy26gVIrCdDbr77MXF1YJSjR_MS2I-m2J6dXffFaLD1_kd5SIg-oHTrAU87xogsYeeDRQu8u30EW/s1600/bullet.png) no-repeat 1px 5px;color:#2c3e50;text-indent:0;line-height:1.6em;margin:0;padding:0 0 3px 19px}
#related-post .widget{margin:0;padding:0}
#related-post ul{list-style:none;margin:0;padding:0}

4. Lalu copy code dibawah ini dan letakan tepat dibawah </article>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Related Post Widget Start -->
    <div class='related-post' id='related-post'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;Related Post&lt;/h4&gt;&quot;,
      numPosts: 6,
      titleLength: &quot;auto&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      widgetStyle: 1,
      callBack: function() {}
  };
  </script>
   <!-- Related Post Widget End --> 

</b:if>

</b:if>
</b:includable>

5. Save template.

Selesai, nah untuk melihat hasilnya, silahkan lihat di bawah posting blog anda, namun jika anda mengalami keluhan dalam tutorial ini, silahkan ajukan di kolom komentar, lebih dan kurangnya saya mohon maaf, semoga sukses selalu.

16 Responses to "Cara Membuat Related Post / Artikel Terkait"

  1. terimakasih atas infonya sob
    http://obattradisionalacemaxs.net/

    BalasHapus
  2. makasih banyak buat infoya gan,, snagat bermanfaat sekali nih...

    http://goo.gl/4lKCNU

    BalasHapus
  3. salam .. kenapa relate post tidak muncul?
    http://tetamu89.blogspot.com/

    BalasHapus
  4. min di blog saya ko gak muncul ya,padahal udah sesuai dengan step2nya.

    BalasHapus
    Balasan
    1. Sudah saya rubah langkah no.4 ya..tolong dicoba kembali..

      Hapus
  5. Salam, saya sudah mencoba point no3 berhasil , namun point no4 saya gk bisa temukan link pada edit template HTML di blog saya, mohon petunjuknya. Terima kasih

    BalasHapus
  6. kayaknya ada yang salah nih madam, sama kayak teman2 diatas ternyata ga muncul related postnya, udah dicoba di http://kokloo.blogspot.com no work

    BalasHapus
  7. kayaknya ada yang salah nih madam, sama kayak teman2 diatas ternyata ga muncul related postnya, udah dicoba di http://kokloo.blogspot.com no work

    BalasHapus
  8. gagal gan
    http://apkseluler.blogspot.com/

    BalasHapus
  9. very good posting, I have tried but have not succeeded, roughly where the blame lies. please refer bloggermendalo.blogspot.com

    BalasHapus
  10. ijin simpan ya..artikelnya, nanti mau saya gunakan untuk blog http://beautyhealthy10.blogspot.com

    BalasHapus
  11. Sudah saya rubah langkah no.4 ya..tolong dicoba kembali..

    BalasHapus
  12. Iya silahkan Mbak..jgn lupa sertakan sumbernya..:)

    BalasHapus
  13. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  14. gk bisa gan... tolong liat htmlnya lagi ...

    BalasHapus