Cara Membuat Widget Related Post / Posting Terkait Dibawah Posting

Hai sob, udah lama gak posting gara-gara sibuk nih (sibuk main) haha..., untuk kesempatan kali ini saya mau coba berbagi cara membuat widget related post / posting terkait dibawah posting pada blogspot menurut kategori. Mungkin agak sedikit ribet dalam membuatnya sob, ditambah dengan banyaknya template gratis yang mempunyai karakter berbeda. Dicoba-coba dulu aja kali ya sob...hehe. Sebenernya udah banyak sekali para senior yang berkecimpung di dunia blog membagi tutorial tentang cara membuat widget related post rapih ini. Tapi gak ada salahnya kali ya saya share lagi di blog saya ini :)

Ok sob, langsung & singkat aja ya...

1. Udah login ke blognya sob? kalo udah langsung aja klik layout / rancangan lalu pilih edit HTML.
2. Jangan lupa back up dulu template sobat untuk menghindari kesalahan dalam pengeditan sob.
3. Kalo udah, centang kotak "Expand Widget Templates". Jangan lupa di backup dulu template nya sob.
4. Langsung cari tag </head>, seperti biasa dengan menggunakan ctrl+f biar lebih mudah sob.
5. Paste kode dibawah ini sebelum kode </head> tadi

<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://fie-linktuts.googlecode.com/files/iconartikelterkait.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='http://fie-linktuts.googlecode.com/files/widgetartikelterkait.txt' type='text/javascript'/>

6. Kemudian cari kode <data:post.body/>, atau untuk beberapa template lain bisa sobat cari kode <div class='post-body'> atau <data:post.body/>
7. Tambahkan kode berikut setelah kode tersebut

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

8.Kemudian save template, selesai dan lihat hasilnya sob...

Ket:
- Untuk mengatur banyaknya artikel terkait yang tampil, sobat bisa cari kode "max-results=5" dan ganti angka 5 sesuai dengan kebutuhan.
- Untuk tutorial nomor 7, tipe template yang sudah pakai  fasilitas readmore biasanya kode <data:post.body/> lebih dari satu. Untuk itu sobat cari kode yang sama tersebut setelah kode yang pertama.

Semoga bermanfaat...