Cara membuat related post keren dan bergambar

Setelah artikel sebelumnya kita membahas cara membuat simple related post friendly untuk blog Anda, kali ini saya akan memberikan cara membuat related post keren dengan thumbnail yang bisa mempercantik blog Anda sekaligus bisa membantu Anda mengurangi bounce rate pada blog Anda.

Berikut ini adalah langkah-langkah membuat related post keren dengan thumbnail/gambar :

1. Pertama-tama Anda harus login ke Blogger/penyedia lain terlebih dahulu
2. Masuk ke menu Template > edit html
3. Letakkan kode berikut diatas kode </head>

<!--Related Posts + Thumbnails from rendilesmanatips.blogspot.com Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
margin: 1px 0px !important;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
height: 300px;
width:590px!important;
padding: 0px !important;
box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important;
border-radius: 5px 5px 5px 5px;
}
#related-posts h2{
margin: 0px !important;
padding: 10px !important;
color: rgb(255, 255, 255);
font-weight: normal;
text-transform: capitalize;
background-color: rgb(18, 18, 18);
border-bottom: 1px solid rgb(0, 0, 0);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
text-decoration:none!important;  

}
#related-posts a{

font-weight:bold!important;
color: white;
font-family: arial!important;
border-right:0px!important;
margin: 10px 0px 10px 10px !important;

}
#related-posts a:hover{
border-right:0px!important;
margin: 10px 0px 10px 10px !important;
background:none!important;
text-decoration:underline!important;
   
}

#related-posts img{
border: 1px solid #666 !important;
padding: 1px !important;
width: 100px !important;
height: 90px !important;
margin-right: 15px !important;
overflow: hidden;
background:#444!important;    
}

#related-posts img:hover{
opacity:0.5;
   
}

#attb{
font-size:5px!important;
padding-top:200px;
padding-bottom:5px;
padding-left:560px;
  }
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggLUIje5KshdY9gMgvVJQpQLZTiLpdK6AWxUXGGuxOGtErWJxDxxnMCCuRUop77uXHjVdLC-dWZUHUDvF4HmcCG2g7uilKPbxbMd26dhC5YeQ9Nwze5I2hInhAeRU7wiQ1rxGmViAFIK2V/s1600/no_image.jpg&quot;;
var maxresults=4;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related post:&quot;;
</script>
<script src='https://related-posts-atb-brandnew.googlecode.com/files/related%20posts%20js.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts + Thumbnails from Rendilesmantips.blogspot.com End-->

4. Letakkan kode berikut di bawah kode <div class='post-footer'> pada html

<!-- Related Posts with Thumbnails Code from www.Rendilesmanatips.blogspot.com 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 id='attb' align='bottom-right'><a href="http://bit.ly/19tnH6q">Get Widget</a></div>
</div>
<!-- remove --></b:if>
<!-- Related Posts + Thumbnails Code from www.Rendilesmanatips.blogspot.com End-->

5. Klik simpan, Anda telah berhasil memasang Related post + thumbnail/gambar pada blog Anda.

Pengaturan :- Ganti Angka pada tulisan berwarna ungu untuk mengganti lebar widget.
- Ganti tulisan berwarna biru untuk mengganti judul widget.
- Ganti Angka pada tulisan berwarna merah untuk mengganti jumlah Artikel yang ditanyangkan.

Fitur pada related post ini antara lain :- Bisa disesuaikan dengan mudah.
- Script secara otomatis akan mengambil post terkait dari label dan tulisan yang ditampilkan pun relevan dengan konten.
- Widget related post ini tergolong ringan sehingga tidak akan terlalu memberatkan blog Anda.

Kemudian untuk Anda yang kesulitan membuat related post bergambar/thumbnail dengan cara tersebut, Anda bisa membaca cara simple membuat related post bergambar sehingga Anda bisa memasang related post/artikel terkait bergambar dengan lebih mudah dan tidak ribet.