Cara Membuat Related Post With Thumbnail

Cara Membuat Related Post With Thumbnail-Pada postingan sebelumnya Cara Design Blog sudahk memberikan tutorial blogger cara membuat related post. Namun related Post itu tanpa thumbnails atau tanpa gambar atau image. Related post with thumbnail ini karena menyertakan gambar maka akan menarik pengunjung untuk mengunjungi halaman terkait. Fungsi dari related post silahkan simak pada artikel cara membuat related post sebelumnya.

Tampilan related post with thumbnail silahkan lihat screenshoot di atas.
Kali ini ijinkanlah Cara Design Blog memberikan tutorial cara membuat related post with thumbnail. 
Sudah siap menyimak tutorial blogger yang akan saya sampaikan?
Oke, Mari kita simak bersama cara membuat related post with thumbnail berikut ini:

1. Masuk Dasbor Blog kamu.

2. Template > Edit HTML > Lanjutkan

3. Centang Exspnd Template Widget

4. Cari kode: </head>

5. Letakkan kode berikut diatas </head>

<!--Related Posts with thumbnails Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}
#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}
#related-posts a{
color:black;
}
#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzqDiRRgAvXNopzd7ETtV1JNeAK7IYUNATEXWp3hbr_ACMG-R8TYMapXqfvVQ4xEC4jCoJYFCFvTt52dP0MT8yckLGEc7yQQjYA2j5sPeaXT0jBF3PT7PdPx0mD1ODU1_dmF-M2KaZ9aWZ/";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="Artikel Terkait:";
</script>
<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->

Keterangan kode:  

• Kode:#cccccc warna hijau pada kode diatas bisa kamu ganti dengan kode warna yang kamu suka. var plittercolor: garis pembatas antar related post with thumbnail.
• Tulisan Artikel Terkait warna hijau di atas bisa kamu ganti dengan kata yang kamu suka.

6. Cari:<p class='post-footer-line post-footer-line-1'/>
7. Letakan kode berikut ini tepat di bawah kode no.:6.

<!-- Related Posts with ThumbnailsCode 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-->

Keterangan kode:  

• Angka 6 warna hijau pada kode di atas bisa kamu ganti dengan jumlah related post yang ingin kamu tampilkan.

8. Save Template.
Selesai, silahkan lihat blog kamu.


Tags:cara membuat related post, cara membuat related post with thumbnail