Cara Membuat Related Post keren

 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/AVvXsEiL0b4FBGYEMIIsewfRoCzASJFvjjmE20e3BSyGp9SKiR0pDZ3Fgl3tzisBM8dnV0E5GtDNiSVysh-D-XPP5mvR708Ztn8eUSXAuE_KI8b3yBbgVIDjACHHgEG-2Gl1qikrRP-xJDOSrARU/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 <div class='post-footer-line post-footer-line-1'>

 <!-- Related Post Widget Start --> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div id='related-post' class='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;Artikel Terkait:&lt;/h4&gt;&quot;, numPosts: 5, titleLength: &quot;auto&quot;, containerId: &quot;related-post&quot;, newTabLink: false, widgetStyle: 1, callBack: function() {} }; </script> <script type='text/javascript' src='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js'/> </b:if> 
<!-- Related Post Widget End -->

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.

Tweet