Ngeblog Yuk.... Cara membuat Related Post Thumbnail Pada Blog :
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 -->
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.-->
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 -->
<b:if cond='data:blog.pageType == "item"'><h3>Related Posts</h3>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji-TnXU5bbWx123h5Eh911LRkQBGLwXC5_24hSpOK0EhYlN75IojSdJhne0i-HgQjNjJOPCyOYEniLypZAbapmF6pP4CTZBlzBBjWwRjP0udTq3mXtISSpcx0ZWcqGfFOXqDa20gFyjPg/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 -->
Simpan Template dan Lihat Hasilnya.
Selamat Mencoba & Semoga Berhasil
Thanks for reading & sharing KUMPULAN ILMU DAN CERITA
