Cara Menambahkan Related Post di Blogspot

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
Selain masalah postingan, percaya atau tidak tampilan blog yang user friendly terbukti ampuh dalam meningkatkan page view blog yang kita miliki. menurut pengalaman pribadi saya, blog yang memiliki widget seperti related post, recent post sangat berpeluang meningkatkan page view blog yang mereka miliki.

Sederhana saja, Setelah pengunjung selesai membaca artikel pasti mereka akan mencari-cari lagi artikel yang menarik di blog yang mereka kunjungi. dengan adanya related post atau recent post tentu hal ini akan lebih memudahkan pengujung untuk bernavigasi pada halaman blog atau website kita. lihat saja contohnya pada website seperti detik, tribunnews dan kompas. Berikut saya sharing cara membuat related post dimana hasil akhir yang kita harapkan seperti gambar berikut

Cara Menambahkan Related Post di Blogspot
Langkah Membuat Related Post di Blogspot

1.  Masuk ke Dashboard Blog | Template | Edit HTML

2.   Cari code </head> dan letakan code berikut tepat diatasnya
<style> #related-posts { float : left; width : 540px; 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("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") 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='https://a97b243d7ace76a3ed01701c4416c3bc265c5577.googledrive.com/host/0B-DXQ7rA-Fb7a3RQX1c5U25sVFU/' type='text/javascript'/>

3. Langkah terakhir, cari code <data:post.body/> kemudian letakan code berikut tepat dibawahnya. hal ini akan menjadikan widget related post berada dibagian akhir tulisan pada postingan 
<!-- Related Post -->
<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 != "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>
Simpan Template anda dan lihat hasilnya. Happy Blogging. :D
source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.