Tutorial Cara Membuat Artikel Terkait Bergambar

Kali ini gw ingin menjelaskan bagaimana caranya membuat widget artikel terkait bergambar, dimana yang biasanya itu cuma berua text link aja..nah yang disini itu disertai dengan gambar, agar kelihatan lebih menarik dan lebih membuat penasaran pengunjug yang melihatnya :).

oke lanjut aja buat yang penasaran kita langsung mulai aja prakteknya :). cekidod!

Script 1 

<!--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/AVvXsEgSkX3I9g_FoFzk9A_lyqcqHxfLZVqLy9zenjqC3R8Uqhzh1k-1Kdc9y-5LDDZHMST7XCllv6GoPm6Fr217Stl-gYO8jzzk195YCEhIF2N00qCcCoslN1HWdjJxCaIF77kRFzgsOMJ-yQE/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'/>
<a href='http://digitalareas.blogspot.com/'><small><font color='#555555'>Blogger Widget</font></small></a>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Script 2

<!-- Related Posts with Thumbnails Code Start-->
<!-- 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 != &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'/>
<a href='http://digitalareas.blogspot.com/'><small><font color='#555555'>Digital Areas</font></small></a>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->

Caranya :

1. Pertama silahkan ente buka blogger.com dan login dengan akun ente.
2. Silahkan pilih menu TEMPLATE kemudian pilih EDIT HTML.
3. Centang kotak yang bertuliskan EXPAND TEMPLATE WIDGET.
4. Setelah itu, cari kode  </head> (Untuk memudahkan dalam pencarian, gunakanlah CTRL +F)
5. Copy kode yang ada pada SCRIPT 1 di atas, dan paste di atas tulisan </head>

6. Sekarang, cari lagi kode bertuliskan <data:post.body/>
7. Berikutnya adalah, copy kode yang ada pada SCRIPT 2 di atas, dan paste di bawah tulisan <data:post.body/>
8. Kemudian SIMPAN template.

Bila di dalam template anda terdapat lebih dari 1 <data:post.body/> , silahkan di coba satu per satu..

Perhatikan kode pada SCRIPT 1, khususnya tulisan yang berwarna merah. Untuk kode var maxresults=5; digunakan untuk menentukan berapa banyak artikel terkait yang ingin ditampilkan. Sedangkan var relatedpoststitle="Related Posts"; bisa diganti sesuai kalimat yang ingin anda pakai (ex: Artikel Selanjutnya, Artikel Lain, Baca Juga ya .. dll sesuai dengan yang ente mau )