Cara Membuat Related Posts di Sisi Kiri dan Kanan Pada Blog.

Tweet

Cara Membuat Related Posts di Sisi Kiri dan Kanan Pada Blog. Pasti sobat sudah tahu kan website kompas.com, jika anda melihat pada sisi kanan pada salah satu postingan yang anda baca, maka anda bisa melihat related posts yang berada disana.

Related posts ini bisa menunjang SEO blog kita lho, karena search engine menyukai sebuah website/ blog yang memberikan navigasi untuk memudahkan pengunjungnya untuk menelusuri satu-persatu halaman web/blognya.




Untuk cara membuatnya ikuti langkah-langkah berikut:
1.Log in ke blogger.
2.Klik template  » Edit HTML » centang Expand Template Widget.
3.Cari kode </head> dan letakkan kde dibawah ini tepat di atasnya:

<style> #related-posts { float : left; width : 300px; margin-top:2px; margin-left : 5px; margin-bottom:20px; font : 11px Arial; color:#FF0080;margin-bottom:5px; } #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 { color:#116f9e;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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg87IiuCle1cnr5ITX1E5NkMyxngUMn4fG5EKRkYTpJd5GDlKEbKwSG-qnkiNgdCn2aSXkj6cddm1NhUN4Em_MWlhXrt6AvCrKgCZ4DsCaYXRsFuZq_1APcR-iqjZTtkk6ogn55-lryJhg/s320/titik.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 10px; margin-bottom : 5px; line-height : 1.5em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yudatfort.googlecode.com/files/related%20posts%20b-digg.js' type='text/javascript'/>

4.Kemudian cari lagi kode  <div class='post-body entry-content'> atau  <div class='post-header-line-1'/> dan tempatkan kode dibawah ini tepat dibawahnya kode ijo di atas:

<div style='float:left; margin : 0px 10px 0px 0px'> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <font face='Arial' size='2'><b> TERKAIT : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> </b:if> </div>

• Kode Left yang saya beri warna hijau menunjukkan posisi related postsnya disebelah kiri, jika anda ingin meletakkannya disebelah kanan maka ubah menjadi Right.
• Untuk ukuran lebar recent posts-nya bisa anda sesuaikan dengan merubah kode yang berwarna biru.

5.Save template anda dan lihat hasilnya.