Rabu, 10 April 2013

Cara Membuat Related Posts di Sisi Kiri dan Kanan Pada Blog

 Pada kesempatan kali ini B-digg akan membagikan sedikit ilmu/tutorial 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.

Cara Membuat Related Posts di Sisi Kiri dan Kanan Pada Blog
Diambil dari kompas.com

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.

Cara ini saya dapatkan dari sobat Jusman Online beliau berhasil memodifikasi kode recent posts yang ada pada blog saya dengan kreasinya sendiri dan berhasil menciptakan Related Posts di Sisi Kiri dan Kanan Pada Blog.


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("http://4.bp.blogspot.com/-W-cSsHwgVRw/UMJ8xiVxYBI/AAAAAAAACFE/Z7-313ShTRw/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:

<div style='float:left; margin : 0px 10px 0px 0px'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 != &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>
</div>
Source code from: Cara Membuat Related Post di Sisi Kiri/Kanan Blog seperti Kompas.com 
Keterangan :
  • 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 kuning.
5.Save template anda dan lihat hasilnya.

“Baca Juga Artikel Terkait Yang Lebih Keren Di Muh abdillah Blog”

0 komentar:

Blogger Template by Clairvo