Membuat artikel terkait dengan gambar

Membuat artikel terkait dengan gambar sebenarnya judul yang sebenarnya adalah make related post with thumbnail atau dalam bahasa indonesianya membuat artikel terkait dengan thumbnail. Related post with thumbnail sama seperti artikel terkait yang sudah saya pernah jelaskan di artikel ini tapi bedanya related post ini menampilkan dengan gambar contohnya bisa dilihat pada gambar ini

 

 Langkah untuk membuatnya ada di bawah ini:

1. Loggin ke blogger

2. Pergi ke dasbor ==>Rancangan ==> Edite HTML

3. Jangan lupa backup template dulu dengan mengklik Download Template Lengkap agar kalau terjadi eror pada saat perombakan template, template yang belum dirombak bisa diupload.

4. Klik Expand

5. Cari kode </head> untuk memudahkannya pencarian anda tekan F3 lalu masukan kodenya dalam toolnya

6. Lalu hapus kode tersebut, dan ganti kodenya dengan kode di bawah ini

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h3{
font-size: 1.6em;
color: #ffffff;
font-family: Georgia, &#8220;Times New Roman&#8221;, 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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKSA2Qz83LihJDmJa7O0TUUZgMrjzlb9JK_T6PNeC3ZytJXkBQUzSZkoRM5pFZab7CNdp_HoT90dTnYRfILTNlxwPXD139L9xqZTnIgcKAgwOqkWUgYEk6Nu3pAcucEu4v3JhrHKBW0a8n/s1600/noimage.png&quot;;
var maxresults=7;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts Thumbnail&quot;;
</script>
<script src='http://blogergadgets.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--></head>

7. Cari kode <div class='post-footer-line post-footer-line-1'>
     Atau kode ini <p class='post-footer-line post-footer-line-1'>

8. Lalu masukan kode di bawah ini tepat sebelum kode yang berwarna hijau tadi yang kamu cari.

  <!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->    

9. Klik save
10. Selesai
Semoga tutorial ini bisa berhasil. Kalau anda tidak paham atau ada kode yang salah silahkan hubungi saya dengan cara beri komentar saja di artikel yang membuat anda bingung.