Kali ini saya akan posting artikel tentang Cara Membuat Artikel
Terkait dengan Gambar/ Thumbnail Pada Blog. Beberapa waktu lalu saya juga sudah update
artikel tentang related post, tapi waktu itu related post biasa, tapi bagi yang tertarik boleh juga koq mencobanya. Silahkan
dibaca: Cara Membuat Artikel Terkait dengan Gambar/ Thumbnail Pada Blog.
Tapi, membuat related post dengan thumbnail gambar pastinya lebih keren dan
membuat pengunjung lebih betah di blog kita, silahkan lihat contoh di atas.
Nah, bagi yang tertarik untuk membuatnya, silahkan ikuti langkah-langkah di
bawah ini:
1.Login ke akun Blogger sobat.
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang
Expand Template Widget).
3. Dengan menggunakan CTRL+F atau F3, cari kode berikut: </head>
4. Pastekan kode di bawah tepat di atas kode nomor 3 di atas
=============================================
<!-- 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.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/AVvXsEjVOwHR7v9nEotwh4qLwSxiGO9NkSdYRhnw-R4j4apd1j3HpDjWQhyphenhyphenvAtadJ89jCTAFaMnylhHiIBtY6eGAm1D4jarsGmyrg0RbrcZksY8MPqo3YmfzXQFG1ZJfeLccHpSNis3YFQUhhSw/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'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
===========================================================
5. Lanjutkan dengan mencari kode <data:post.body/> dan pastekan kode
berikut tepat di bawah kode <data:post.body/> tadi
====================================
<!-- 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'/><script src='http://secebisilmu.blogspot.com'
type='text/javascript'></script></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->
===========================================
6. Simpan template sobat dan lihat hasilnya
Keterangan :
var maxresults = 5 adalah jumlah artikel
akan ditampilkan di related post blog sobat.
var
relatedpoststitle="Related Posts"; kamu bisa ganti kata Related Posts atau kalimat lain yang
sobat inginkan.
Demikianlah posting mengenai Cara Membuat Artikel Terkait dengan
Gambar/ Thumbnail Pada Blog. Semoga bermanfaat buat semua.