Membuat Related Post (Posting Terkait)

Didalam konten suatu posting di suatu blog, kadangkala nya kita ingin menampilan postingan terkait dengan posting yang saat itu dibaca oleh pengunjung. Ide nya adalah dengan menampilkan seluruh posting yang terkategori menjadi satu oleh satu label di dalam kumpulan posting.

Jadi kalau seandainya kita memiliki label kategori posting komputer maka dengan membuat widget Related Post atau posting terkait, seluruh kategori tersebut akan dikelompokkan dan ditampilkan pada bagian bawah posting nanti nya. Seperi gambar diatas.


Ok berikut langkah-langkah nya;

• Silahkan login ke blogger Anda
• Masuk kebagian Rancangan dan pilih Edit HTML, jangan lupa klik centang Expand Template Widget
• Cari tag </head> dan copy paste script dibawah ini di bagian bawah nya

• <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;http://lh4.googleusercontent.com/-lyBYD_IExZ4/TqqXqutnUsI/AAAAAAAAAV8/AdHDGUrh5KU/s128/images.jpg&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://sman3-kag.sch.id/download/relpost.js' type='text/javascript'/>

• Cari kode <data:post.body/> dan copy paste script dibawah ini pada bagian bawah nya

• <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='related-posts'>
  <font face='Arial' size='3'><b>Lihat Posting Lainnya : </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>

• Simpan dan lihat perubahan nya

Sumber lain bisa dilihat disini : http://bloggerbiasa.blogspot.com/2011/08/pasang-widget-related-post-dengan-icon.html

Suka? Klik Like Ya...