Cara Membuat Related Post di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

 
Ok deh pada kesempatan kali ini admin sedang ingin berbagi tips seputar blogging kepada sobat blogger semua yang masih kebingungan dalam membuat related post di blog. Semua udah paham kan apa itu related post?
Sekedar info 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 buka2 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 diatas 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.

Mudah bukan? Apabila ada yang bingung jangan sungkan untuk bertanya. semoga bermanfaat

Description: Cara Membuat Related Post di Blog Rating: 4.5 Reviewer: petanimilenial ItemReviewed: Cara Membuat Related Post di Blog