Mungkin beberapa dari kalian sudah membaca artikel terdahulu saya tentang
Membuat Related Post di Blog. Kali ini saya akan membahas tentang hal yang sama akan tetapi memiliki bentuk yang berbeda dan lebih menarik, yaitu
Membuat Related Post Bergambar di Blog. Lalu apa perbedaan dari kedua Related Post tersebut? Mari kita lihat perbedaannya :)
Related Post :
- Tampilan Apa adanya.
- Menampilkan semua artikel yang memiliki label sama dengan postingan yang dibaca oleh pengunjung.
Related Post Bergambar :
- Tampilan lebih menarik karena memiliki gambar.
- Hanya menampilkan beberapa Artikel terkait saja.
Berikut adalah langkah-langkah untuk membuat
Related Post Bergambar:
Anda terlebih dahulu harus login ke www.blogger.com, Pilih dashboard blog yang ingin anda modifikasi. Pilih Template > Edit HTML (Jangan lupa dicentang "Expand Template Widget")
Langkah Pertama : Carilah code
</head> . Copy dan Paste-kan code dibawah ini tepat diatas code
</head>
<!--Related Posts with thumbnails*Scripts and Styles Start-->
<!-- remove --><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.2em;
font-weight: bold;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
.post-body img {border:none;}
</style>
<script type='text/javascript'>
var
defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0vR6daRXVG2916T5hfU08gZjl6WxOixkhgbLuDG8oNyPMGRojIj3Djp7a0IkIrgdY8nsx8BilXg_MFuOu3cxu-8jQcFwCytCgDCGyARhKDaVjJJ95FNLkH3Isk6ILK3dgLv39-2OU9NI/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Software Terkait Yang Mungkin Anda Cari";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Langkah Kedua : Carilah code
<div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
Langkah Ketiga : Jika sudah ketemu code diatas, Copy dan Paste-kan code ini dibawah code Langkah Kedua
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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>
</div><div style='clear:both'/>
<!-- remove --></b:if>
Langkah Keempat : Simpan Template.
