Membuat Widget Posting Terkait disertai Gambar di Blogger

Kalau tempo hari saya membahas tentang membuat widget Random Post, kali ini saya ingin berbagi tips yang indah untuk menampilkan posting terkait atau lebih dikenal dengan istilah Related Post with thumbnails di bawah setiap posting blog Anda, dengan disertai gambar. Artikel-artikel terkait dipilih dari pesan lainnya dalam kategori yang sama / label / tag. Dengan tips ini banyak pembaca Anda akan tetap di situs Anda untuk waktu yang cukup lama ketika mereka melihat posting terkait kepentingan.

Langkah menambahkan Posting terkait Widget ke Blogger / Blogspot
Langkah 1. Go to Blogger Dashboard >> Template >> Edit HTML;
Langkah 2. Klik kursor di sembarang tempat pada kotak editor
Langkah 3. Cari (CTRL + F) untuk potongan kode ini: </head>
Langkah 4. Copy dan paste kode di bawah ini sebelum / di atas </ head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbk9TWZAHjmMDZuVMXNHPlwQPAgViYfvn0igt0Ira5JhFeb8dZ586uHcfHErjp1LmBun1ataT2PNqGmPfo2TMB-WmNiyjDkMv2zLgeECAFQE-skjfdia6r3_rLrJfDILkTeS-6n__0Ruli/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Catatan:
- Untuk mengubah gambar default, ganti URL dengan warna biru dengan Anda sendiri
- Untuk menampilkan lebih dari 5 posting, ganti 5 nilai dari "var maxresults = 5;"
- Hapus kode warna ungu jika Anda ingin posting terkait yang akan ditampilkan dalam homepage juga

Langkah 5. Sekarang cari kode berikut: <div class='post-footer'>
(jika ada 2 letakkan setelah baris yang pertama)
Langkah 6. Dan di atasnya, copy dan paste kode di bawah ini:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhALhhIB8nD3Vptt26bRv51Q7aUPj9D_t7PDg_A2yoS_rYAO9YUsY7Vk6DoijDvdrfxPGdpxwINOIF6yCUazwpS9mwbXreK0IIjY6SINeKnGUZ1j0gLHUU_mV__-Vo_9vrbmCX2AnOxEnzw/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Catatan:
- Ubah nilai 6 dari max-results = 6 dengan jumlah posting yang ingin ditampilkan.
- Jika Anda ingin posting terkait yang akan ditampilkan pada homepage juga, hapus kode warna ungu.

Langkah 7. Simpan Template
Nikmati :)

Credit goes to: helplogger.blogspot.com