Membuat Widget Related Posts Sederhana (Tanpa Thumbnail)

Membuat Widget Related Posts Sederhana (Tanpa Thumbnail) - Dengan adanya widget related posts di setiap bagian akhir artikel blog anda, maka akan memungkinkan para pengunjung untuk membacanya juga. Apalagi jika judul artikel yang ada sangatlah unik dan menarik, tidak jarang pengunjung akan melihat dan membacanya karena adanya rasa penasaran dengan judul yang unik dan menarik tersebut.

Widget related posts ini bisa di bilang sangat berguna dan bermanfaat, terlebih jika blog anda memiliki baanyak konten artikel yang berbobot dan berkualitas. Untuk membuat widget related posts ini, caranya cukup mudah saja. Silahkan bisa anda ikuti tutorial tentang cara membuat widget related posts sederhana (tanpa thumbnail) berikut ini!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Cari kode ]]></b:skin> dan letakkan script CSS berikut ini tepat di atasnya!

#related-posts {
background: #eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjel6fgn_ygTKwA4gpORHeRx3b3Oi-hcGNt6mQ8U9FV_pXn-QhXhCDkmmTdO2xrTVQ8OwHopiEkC8dILnMvV8Pa0beJRt3rVVNAdmiM1rdCok1CYLb8H5Gvb1pvnod3Qbuiv4RHl2B0kJq_/s1600/sidebar_shadow.gif) repeat-x scroll center top;
border: 1px solid #ccc; width: auto; margin-left : 5px; font-size: 14px; padding: 10px; line-height: 1.8em;-moz-border-radius: 7px;-webkit-border-radius: 7px;-o-border-radius: 7px;border-radius: 7px;
}
#related-posts a{color:#000; }
#related-posts a:hover{text-decoration: underline; color:#444;}
#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 5px 0 0; padding: 0 0 5px 0;}
#related-posts a {text-decoration: none;}
#related-posts a:hover {text-decoration : none;}
#related-posts ul {margin: 10px 5px 5px 20px; padding: 0;}

5. Selanjutnya cari kode </head> dan letakkan kode JavaScript berikut ini di atasnya!

<script src='http://hbhost.googlecode.com/files/Related-posts.js'
type='text/javascript'/>

6. Kemudian cari kode <data:post.body/> (jika ada 2 kode yang sama, pilih yang pertama) dan letakkan script kode berikut ini di bawahnya!

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<div style='font-size:18px'><b>Related Posts :</b></div>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
<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>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

7. Setelah itu klik save/simpan template dan selesai...

Note :
Widget related posts sederhana (tanpa thumbnail) ini tampilannya kurang lebih seperti pada gambar yang ada di atas (di awal postingan) ini.

Selamat mencoba dan semoga berhasil, cukup sekian postingan tentang cara membuat widget related posts sederhana (tanpa thumbnail) ini. Selebihnya saya mohon ma'af atas segala kesalahan yang ada dan salam sejahtera by ngeposta...