Cara Membuat Releated Post Dengan Thumbnail

Selamat pagi sobat blogger, satu lagi nih tips blog cara membuat releated post dengan thumbnail. Kalo sobat blogger ingin melihat koleksi saya , bagaimana membuat releated post dengan thumbnail, bisa dilihat di artikel Cara Membuat Related Post Thumbnail di Blog, Cara Membuat Releated Post Bergerak - Carousel Related Post , Cara MengCustom Releated Post dengan Linkwithin. Nah itu adalah beberapa koleksi saya sebelumnya bagaimana membuat releated post dengan thumbnail.

Lalu apa yang membedakan releated post dengan thumbnail kali ini, untuk jelas nya sobat lihat gambar dibawah ini. Penampilan nya hanya thumbnail saja, tapi ketika krusor kita arahkan ke thumbnailnya, akan muncul keterangan judul posting. Kalau mau lihat Live demonya, sobat berkunjung saja ke blogger www.idblogdesign.com, sobat lihat releated post nya, penampilan nya hampir sama seperti itu :

Okey,langsung saja, bagaimana cara membuat releated post dengan thumbnail ini :

• Masuk Pada Blogger
• Jangan lupa backup template agar jika terjadi kesalahan template bisa di restore kembali.
• Backup template pada interface baru Blogger:
  Template >> Cadangkan/Pulihkan >> Unduh Template Lengkap
• Selanjutnya kembali pilih Template >> Edit HTML >> Lanjutkan
  Centang Expand template Widget cari kode : ]]></b:skin> 

Pastekan kode berikut diatas  ]]></b:skin> : 

<!--start related posts css Info : http://www.katakan-hey.com-->
ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
<!--end related posts css.Info : http://www.katakan-hey.com-->

Selanjutnya cari kode:

Pencarian 1 : <div class='post-footer'> jika tidak ketemu ganti pencarian menjadi Pencarian 2
Pencarian 2 : <div class='post-footer-line post-footer-line-1'>

Letakkan kode berikut dibawah kode hasil pencarian 1 atau 2 :

<!--start related posts code Info : http://www.katakan-hey.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><h3>Related Posts</h3>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjsef1HJzYC4CGXuCv0ptpsHmvhXgxmRCphOWRWrIK2T5eC2vhw0aU9U0SMgkEKpO8aho72cUfdybwlp9iKah9YfY2cyHFV7BePs5N0uS6FncLYtkXRDV3fWMcxRrDssCC0AEidOXajz0/s1600/no-image.gif&quot;;
var maxresults=6;
</script>
<script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
<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>
</b:if><div style='clear:both'/>
<br/>
<!--end related posts code Info : http://www.katakan-hey.com-->

Simpan Template dan Lihat Hasilnya.
Okey, cukup sekian tips blog kali ini  cara membuat releated post dengan thumbnail

Semoga Bermanfaat.

Share this post