MEMBUAT RELATED POST WITH THUMBNAIL CANTIK

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-->
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-->
Kemudian cari lagi code dibawah ini
<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-->
<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/AVvXsEh1d5gXOcS9nHFml8jZuzFnQ1vpdjVhdZ7f3O8P9_TskquE9dQNOLH948M0Rbqq-PV3ezXGlRIH2Up4OQJoxr4UMKhdL5dZJsSZc1HYM_F996dxQ0OCeIa3ykG73EqzOBYC21twKD2-rpI/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/><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-->
Simpan template dan lihat hasilnya 

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

Share this Article on :

2 komentar:

Unknown mengatakan...

Related post with thumbnail, mantap mas bro, berguna untuk menaikkan pageviews blog

Anonim mengatakan...

makasih... :)

Posting Komentar

 

© Copyright satu untuk semua 2011 -2012 | Design by Satu Untuk Semua | Powered by Blogger.com.