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 :
- 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>
<!--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 == "item"'><h3>Related Posts</h3>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCOBSvs_Duzziib8La-HOfklIk1RAq2vPcJHcV_l6bxXGbu79c7Wc63dQtOI8PLrjuBog6svxC5ZeL4tfVLdUUybI98GKAso4ZrMamGRhw_UNocADmcVO0WIZ9UwpoqVSm7XG5SZxjHQk/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/>
<!--end related posts code Info : http://www.katakan-hey.com-->
<b:if cond='data:blog.pageType == "item"'><h3>Related Posts</h3>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCOBSvs_Duzziib8La-HOfklIk1RAq2vPcJHcV_l6bxXGbu79c7Wc63dQtOI8PLrjuBog6svxC5ZeL4tfVLdUUybI98GKAso4ZrMamGRhw_UNocADmcVO0WIZ9UwpoqVSm7XG5SZxjHQk/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/>
<!--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.
0 Response to "Cara Membuat Releated Post Dengan Thumbnail"
Post a Comment