Yuk, buat Related Posts

info-gamepc.blogspot.com - Selamat malam sobat blogger, bagaimana kabarnya malam ini? baik-baik saja bukan, kali ini saya akan memposting tentang cara membuat berita terkait atau dalam bahasa inggrisnya Related Posts

Related posts adalah link berita yang saling berhubungan untuk membuat pengunjung tertarik dengan artikel yang ada di blog, biasanya related posts dibuat berdasarkan kategori sehingga isi related posts merupakan kategori yang saling berhubungan. Saya akan memberikan cara membuat Related posts dalam bentuk yang sangat sederhana sehingga sobat-sobat blogger semua bisa mengembangkan sendiri menjadi tampilan yang menarik.

Sebelum kita melangkah ke bab berikutnya, tidak ada salahnya sobat bisa melihat related posts yang ada diblog ini.

1. Pertama - tama login dahulu di blog sobat
2. Klik Template lalu Edit HTML
3. Lalu masukkan kode dibawah ini tepat sebelum atau diatas kode </head>

<style type='text/css'> #related-posts { float : left; width : 100%; margin-top:20px; margin-left : 5px; margin-
bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0;
padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0;
padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; }
#related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background :
url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilSX3EAsHtfIvDSU4N822aGljEgeVAs3C0CBLnD2ahyphenhyphenx1kpmwHkaKUczcFMfSahnXac-X7opGmHy68XbaYlYclySizY1fqZP6fV5nLgVQjCftAB7FkpRGyHy2rnIwHDi35Z3fe6YVvyzs/&quot;) no-repeat 0 0; margin :
0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em;
border-bottom:1px dotted #cccccc; } </style> <script src='http://belajarblogging.googlecode.com/files
/relpost.js' type='text/javascript'/>

5. Kemudian cari kode <data:post.body/>, lebih cepatnya gunakan tombol CTRL + F lalu letakkan kode dibawah ini dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'><div id="related-posts"><font face='
Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><
b:loop values='data:post.labels' var='label'><data:label.name/><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=5&quot;' type='
text/javascript'/></b:if></b:loop> </font><script type='text/javascript'>
removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if>

6. Yang terakhir jangan lupa simpan template Sobat dan lihat hasilnya..Tuing..tuing..