RELATED POST THUMBNAIL DENGAN EFEK HOOVER

Keberadaan Related Post atau yang lebih terkenal dengan sebutan Artikel Terkait sepertinya telah menjadi kebutuhan dalam dunia blogger. Betapa tidak, setiap blog atau bahkan website yang saya kunjungi, selalu menampilkan widget Related Post ini pada bagian akhir setiap postingan yang ada. Salah satu fungsi dari widget ini adalah untuk memudahkan pengunjung dalam mencari artikel-artikel terkait dengan artikel yang sedang di bacanya.

Berikut ini saya akan coba uraikan tentang cara membuat Related Post with thumbnail (gambar kecil) dengan mempergunakan efek hoover. Related post yang akan kita buat ini nantinya agak berbeda dengan yang telah umum dipakai. Related post kita kali ini hanya akan menampilkan gambar-gambar yang ada dalam postingan blog (thumbnail), selebihnya bilamana mouse kita arahkan kepadanya, maka akan berganti menjadi judul postingan yang ada.

Berikut ini cara membuatnya :

Ok untuk membuatnya silahkan login dulu ke blogger masing masing, kemudian seperti biasa klik di rancangan-->edit html jangan lupa centang Expand Template Widget. Oh ya sebelum mengotak-atik template blog usahakan membackupnya terlebih dahulu sebagai cadangan buat jaga-jaga jika terjadi hal hal yang tidak kita inginkan.

Kembali ke topik utama. pertama cari code dibawah ini :

]]></b:skin>

Untuk memudahkan pencarian bisa menekan ctrl + f. Kemudian tempatkan code dibawah ini tepat di atas code tadi :

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);
}

Kemudian cari lagi code dibawah ini

<div class='post-footer'>

Tempatkan code dibawah ini tepat dibawah <div class='post-footer'> tadi, jika di template saya mempunyai 2 <div class='post-footer'>, maka taruh di bawah <div class='post-footer'> yang pertama :

<b:if cond='data:blog.pageType == "item"'><h3>
Related Posts</h3>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE55aK4JeeTfXiIOznY9jlsB4mFO1eA0qFJFmM2B26LszHIp0nCh_eIl-tQpVr8gIGqtN8WqcQ9tRzDr54wpifz3uA3yMUUCOVXtc2JmwK0odDfzrFwfNmGVPX0VcRg9d6UMUOoBXj8ic/s1600/no-image.gif";
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 != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</b:if><div style='clear:both'/>
<br/><br/>
<a href='http://cobablog67.blogspot.com'><img alt='Coba Blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd7IY3skVR_5LogoHsGK3d11mUOzhGABJ4hXUAkCqBsZVqxUbL4eB4ZVSbf3qfeNSjYgZKMWZtO0XwZ9J2J2zCWGKK4srAbsX7AJhez35ad6xiSlVdYVX6XvweC58z2DPtUVVn-EfSLUUf/s1600/best+blogger+tips.png'/></a>

Simpan template anda dan silahkan melihat hasilnya, semoga anda puas.

Sumber Inspirasi : http://www.thedexwan.net/2012/01/membuat-related-post-thumbnail-dengan.html

Baca Juga Artikel Terkait Lainnya: