Cara Membuat artikel Terkait dengan gambar

cara membuat artikel dengan thumbnail gambar artikel terkait
Salam belajar untuk sobat naufalblog semuanya, kali ini saya akan jelaskan langkah langkah membuat postingan dengan ekstra tambahan thumbnail. Ngemeng ngemeng sobat sudah tahu belum apa itu thumbnail? Yup betul, thumbnail itu punya fungsi yang penting dalam menyajikan informasi kepada pengunjung blog kita. Karena melalui thumbnail ini secara otomatis blog kita akan menampilkan artikel artikel yang sejenis dengan artikel yang sedang kita posting saat itu. Dah dari pada bingun kayak yang nulis mending langsung ke TKP saja ya...sok atuh... ojo nesu wkwkw XP

Ikuti beberapa langkah berikut :

1.Login ke akun blogger sobat
2.Klik menu Template/Rancangan
3.Klik Edit HTML
4.Centang kotak Expand Template Widget
5.Cari kode </head>
biar lebih cepat mencarinya,gunakan Ctrl+F
6.Maukan kede di bawah ini tepat di atas kode </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.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/AVvXsEio7PS8cZJw3ApRgqTqGCqjfnd4wv7Ism9Xe9KW6R1soWr_ht0hEQx27bpQceS0lU5ZEYn2x5hsn1opkif5XqK-RdJjxxGlSECVnTipImvu_5nBdx2YwwpugXIT0oGOKNkYQg59fF9Ffuw/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Terkait";
</script>
<script src='http://andreykusanagi.googlecode.com/files/related-posts-thumbnail.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

7.Cari Kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
8,Jika sudah ketemu,masukan kode di bawah ini tepat di atas kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>

 <!-- 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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.andreykusanagi.com'><img style="border: 0" alt="Cara membuat Artikel terkait dengan Thumbnail" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

9.Klik Simpan Template

Keterangan :
-Sobat dapat mengubah jumlah artikel yang ingin ditampilkan
dengan mengubah kode var maxresults=5;
-Untuk mengubah judul widget kodenya var relatedpoststitle
-Untuk mengubah warna dari splitter line kodenya var splittercolor

Silahkan cek hasilnya dan selamat tersenyum lebar karena karya anda telah berhasil dipublikasikan dengan sangat baik. Ok juragan semua bilam merasa artikel cara membuat artikel dengan thumbnail ini bermanfaat silahkan kasih komentarnya ya. Salam hangat untuk anda dan keluarga.