Cara Mudah Menambahkan Related Post Pada Blog (Update 2014)

Related Post adalah sebuah widget yang biasanya terdapat dibawah postingan dan mempunyai hubungan terkait antara satu postingan dengan postingan yang lainnya berdasarkan label atau kategori. Fungsi dari related post atau dalam bahasa Indonesianya disebut dengan artikel terkait, artikel yang berhubungan dengan postingan yang sedang dibaca atau artikel yang direkomendasikan oleh pemilik blog kepada pembacanya untuk memahami lebih dalam suatu topik dalam kategori tertentu, intinya sederhana, blogger dapat pageviews yang lebih banyak, dan pembaca mendapat informasi yang lengkap. Siapa sih yang gak ingin kalo pengunjung betah buka informasi di blog sobat?

Nah, setelah mengetahui apa itu related post beserta fungsinya, langsung kita praktekkan cara membuat related post diblog sebagai berikut:

1. Login dulu di blogger.com.
2. Buka Template dan kemudian klik Edit HTML
3. Untuk mengantisipasi adanya kegagalan jangan lupa untuk Back up template lama Anda ya
4. Gunakan Ctrl + F untuk mempermudah pencarian untuk memasukkan kode dibawah ini.
6. Masukkan kode css berikut tepat bawah kode </head>

<!--Related Posts Scripts and Styles Start-->
<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;margin-top:20px;}
#related-posts .widget{padding-left:6px;margin-bottom:10px;}
#related-posts .widget h2, #related-posts h2{font-size:20px;font-weight:normal;color:black;font-family:Aquiline;margin-bottom:0.75em;padding-top:0em;}
#related-posts a{font-size:14px; color: #555555; font-variant:small-caps;}
#related-posts a:hover{text-decoration: none; color: #ffffff; font-weight: bold;}
#related-posts ul{list-style-type:none; margin:0 0 0px 0; padding:0px; text-decoration:none; text-color:#000000}
#related-posts ul li{list-style-type: none;border-left: 2px solid #1399CF;border-bottom: 1px dotted #1399CF;margin-bottom: 3px;padding-left: 30px;padding-top:0px;}
#related-posts ul li:hover{background-color: #1399CF;border-left: 2px solid #B3CA3D;border-bottom: 1px dotted #B3CA3D;}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Artikel Terkait&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->

7. Kemudian cari kode <data:post.body/> atau <div class='post-body'>, kalau bisa usahakan yang berdekatan dengan post-entri, Kemudian copy code dibawah ini, letakkan tepat dibawahnya.

<!-- Related Posts Code Start-->
<!--Remove-->
<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> <!--Remove--><!-- Related Posts Code End-->

8. dan klik SAVE silahkan lihat hasilnya.

Note: Biasanya anda akan menemukan ada banyak <data:post.body/>, pilihlah yang kedua!

Itulah sedikit tips dari kami,semoga bermanfaat!

Hidup ini penuh petualangan dan kesempatan. Mengapa terus berkutat dengan tugas? Buka jendela & lihatlah! (Boleh jendela Firefox atau Chrome)

Ikuti @keluarkemana

Sumber: Disini