Blogger tutorial Membuat Widget Related Post / Artikel Terkait

Mungkin anda pernah melihat related post blog lain yang sangat bagus dengan icon atau gambar disamping judul related post, jika anda ingin membuatnya Related Post Widget for Blogger dengan Javascript ini menggunakan sebuah javascript dari

http://theblogtemplates.com/scripts/Related_posts_hack.js, silahkan anda melihat sumbernya. Dan untuk lebih baiknya anda download dan upload di hosting anda supaya sewaktu-waktu tidak hilang jika JS dari sumbernya ini sudah dihapus. Tampilan dari related post ini sangat unik dan menarik serta juga dapat membuat pembaca blog anda melihat beberapa posting yang mungkin tertarik untuk melihatnya juga.

Untuk contohnya bisa anda lihat dibawah posting ini. atau ini pada gambar dibawah:

Lihat Gambar Besar
Untuk cara membuatnya ikuti langkah-langkah berikut ini:

1. Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.


Gb.1

2. Selanjutnya pilih tab Edit Html (Gb.2).


Gb.2

3. Setelah itu centang tulisan / checkbox 'Expand Widget Templates' (Gb.3).


Gb.3


Nah,setelah itu cari kode </head> (Gunakan Ctrl+F),setelah ketemu,persis diatasnya letakkan kode javascript ini di atas kode </head> tersebut:

<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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjonViMVyLvAMqECXvCuXelfnVAplm1BcuRkW-YbFIUM1cpKXFLroyMpm5Laf7WJ9cykx4lKZgDQA21y0u8FBQbZHjX2zMuEZaATUvfrSEa-7zEJJ8RZJQBX8BuUbuZj493gF4HhKFHtGE/") 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://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>

Setelah itu,cari lagi kode berikut <data:post.body/>,setelah ketemu,tepat dibawahnya letakkan kode berikut:

<br/><br/><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>

Setelah itu anda save dan selesai. realted post anda kini lebih bagus, jika anda mau merubah iconya dengan icon yang lain/icon anda sendiri anda tinggal edit Javascriptnya tadi dan usahakan ukuran gambarnya sama jadi tidak akan merubah tampilan seperti halnya nanti terlalu besar ataupun terlalu kecil. selamat mencoba ^^

Blog tutorial blogger tutorial