Related Post with thumbnail adalah merupakan sebuah fasilitas blog yang kita sediakan untuk para pengunjung atau visitor, dengan mempergunakan fasilitas related post with thumbnail, para visitor dapat dengan mudah mengeksplorasi semua sudut (postingan) blog yang memiliki thema sama atau hampir sama. Related post with thumbnail yang akan kita paparkan berikut ini mempergunakan efek hover yang mampu merubah gambar menjadi judul postingan.
Bagaimanakah bentuk atau modelnya ? Anda dapat melihat pada bagian akhir setiap postingan pada blog Satu untuk semua ini.
Cara membuatnya adalah demikian :
Silahkan login dulu ke blogger anda masing masing,
kemudian seperti biasa klik di rancangan -->edit html jangan lupa
centang Expand Template Widget. Sebelum meng otak-atik template
blog usahakan membackupnya terlebih dahulu sebagai cadangan atau 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 :
<!--start related posts css Info : http:/saunmu.blogspot.com-->Kemudian cari lagi code dibawah ini
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://saunmu.blogspot.com-->
<div class='post-footer'>
Tempatkan
code dibawah ini tepat dibawah <div class='post-footer'> tadi,
jika pada template anda mempunyai 2 <div class='post-footer'>, maka
taruh di bawah <div class='post-footer'> yang pertama :
<!--start related posts code Info : http://saunmu.blogspot.com-->Simpan template dan lihat hasilnya
<b:if cond='data:blog.pageType == "item"'><h3>Related Posts</h3>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1d5gXOcS9nHFml8jZuzFnQ1vpdjVhdZ7f3O8P9_TskquE9dQNOLH948M0Rbqq-PV3ezXGlRIH2Up4OQJoxr4UMKhdL5dZJsSZc1HYM_F996dxQ0OCeIa3ykG73EqzOBYC21twKD2-rpI/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://thedexwan.blogspot.com'><img alt='thedexwan mengenal teknologi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii5z9jfxuTsCIM1ORrb4TJMFOLvvBhloP5JHI93Sp8PHPajVvYcsKKxoxkcByY780hwRPpEBJaxuwiJGGWEXuUoR1xh6IIhmF4sIwnbIbL982zcgPlUDKsQAZTNk4KlsZ1V6L-5A8JwcLj/s1600/best+blogger+tips.png'/></a>
<!--end related posts code Info : http://saunmu.blogspot.com-->
Kode yang tercetak merah merupakan jumlah posting terkait yang akan ditampilkan, anda dapat mengubahnya sesuai dengan lebar atau ukuran lebar halaman postingan blog anda.
Demikianlah uraian tentang membuat related post with thumbnail cantik, semoga bermanfaat.
Inspirasi : http://www.thedexwan.net/2012/01/membuat-related-post-thumbnail-dengan.html
2 komentar:
Related post with thumbnail, mantap mas bro, berguna untuk menaikkan pageviews blog
makasih... :)
Posting Komentar