Cara Membuat Realated Post dengan Gambar

Kali ini mazinu akan posting artikel tentang cara membuat related post dengan thumbnail gambar di blog. Ingin tahu caranya bukan? Dengan memberikan gambar pada artikel terkait pada blog kita maka blog akan terlihat lebih menarik,,, naah dengan itu mazinu akan memberikan tutorial blogger ini kepada kalian yang sebelumnya tutorial ini sudah saya pakai dan hasilnya lumayan bagus,, tapi mazinu lebih suka yang simpel2 saja seperti yang mazinu gunakan saat ini! yaitu dengan memasang Artikel Terkait dengan icon sendiri. Tapi semua itu selera sendiri-sendiri. benar kan?

yang hasil Realated Past-nya nanti seperti ini : (gambar disertai judul artikel)

Kalau kalian ingin memasang di Blog kalian,, silahkan ikuti cara yang mazinu berikan dibawah ini :

Login ke akun Blogger kalian.
Klik Template >> Edit HTML >> Lanjutkan (centang Expand Template Widget).
Dengan menggunakan CTRL+F atau F3, cari kode berikut: </head>
Pastekan kode di bawah tepat di atas kode </head>

<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: black;
font-family: Georgia, Times New Roman , Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq2jjpRpqx7e4PkB8Z7h_6-RbipzdVqRZmjyoBmkZYBNbnUqVLgA7l7WA8g6MW8sYK0zwq39ewhMxke1lJQiSmcP4AKEbXaE5y0uKTgV2UvROeSb1JhP_WQNKaTp51i3lfFleCgZ_UoTM/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>

Lanjutkan dengan mencari kode <data:post.body/> dan pastekan kode berikut tepat di bawah kode <data:post.body/>

<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'/>
</b:if>

Simpan dan lihat Hasilnya! Semoga Cara Membuat Realated Post dengan Gambar ini Bermanfaat!...

Title : Cara Membuat Realated Post dengan Gambar
Description : Kali ini mazinu akan posting artikel tentang cara membuat related post dengan thumbnail gambar di blog. Ingin tahu caranya bukan? Dengan ...

Postingan Populer

Cara Membuat Realated Post dengan Gambar