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.

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.

Share to:

Google+ Facebook Twitter