Posted by : Nurfaizi Alfrianto
Sabtu, 16 Februari 2013
pada bagian bawah postingan akan terlihat Related Post (Artikel Terkait) berupa Gambar dan Judul (Jika pada postingan tidak ada gambar, maka tambilan gambar akan bertuliskan no image), jika sobat berminat untuk Membuat Related Post Thumnail (Artikel Terkait Bergambar) di Blog , silahkan ikuti langkah-langkahnya dibawah ini.
1. Login ke Blogger
2. Design (Rancangan) => Edit HTML => Centang Expand Widget Template
3. Cari Kode </head> (cari dengan Ctrl+F)
4. Letakkan Kode di bawah ini tepat di atas kode </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
5. Kemudian Cari Kode <div class='post-footer'>
6. Masukkan Kode bawah ini tepat diatas kode <div class='post-footer'>
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<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:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=8;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
7. Save Template
Catatan : Kode var maxresults=8 diatas, angka 8 bisa sobat ganti sesuai dengan yang sobat mau.
Untuk Contoh Hasilnya nih
1. Login ke Blogger
2. Design (Rancangan) => Edit HTML => Centang Expand Widget Template
3. Cari Kode </head> (cari dengan Ctrl+F)
4. Letakkan Kode di bawah ini tepat di atas kode </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
5. Kemudian Cari Kode <div class='post-footer'>
6. Masukkan Kode bawah ini tepat diatas kode <div class='post-footer'>
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<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:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=8;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
7. Save Template
Catatan : Kode var maxresults=8 diatas, angka 8 bisa sobat ganti sesuai dengan yang sobat mau.
Untuk Contoh Hasilnya nih
Related Posts :
- Back to Home »
- Tips And Trik »
- Cara Membuat Related Post Thumbnail (Artikel Terkait Bergambar) di Blog
