Membuat Related Post Dengan Thumbnails

Mempercantik tampilan blog memang sangat banyak caranya dan salah satunya adalah membuat related post dengan thumbnails.

 Related post dengan thumbnails adalah merupakan tampilan artikel terkait bergambar yang di tampilkan di bawah artikel blog kita. Jadi kalau artikel blog kita selau di sertai dengan gambar di awal artikel, maka  related post dengan thumbnails ini sangat bagus untuk blog kita.

Jika Anda tertarik ingin menampilkan artikel terkait yang di sertai dengan tampilan gambar, Anda bisa mencobanya dengan merubah sedikit kode template blogger atau blogspot Anda. Ikuti langkah berikut ini:

  • Login ke account atau dasbor blogger anda.
  • Masuk ke halaman Rancangan.
  • Klik Edit Html.
  • Dan jangan lupa beri tanda centang pada "Expand Widget Templates".
  • Cari dan temukan kode </head>.
  • Gantilah kode tersebut dengan kode dibawah ini :
<!--Related Posts with thumbnails Scripts and Styles Start-->
<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 h2{
font-size: 1.6em;
font-weight: bold;
color: black;
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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

  •  Lalu cari dan temukan lagi kode dibawah ini:
<div class='post-footer-line post-footer-line-1'>
  • Lalu letakkan kode dibawah ini persis dibawah kode tersebut di atas.
<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
 <!-- Related Posts with Thumbnails Code End-->
  • Sekarang simpan template Anda dengan cara klik SIMPAN TEMPLATE.
 Siap dech dan apabila langkah-langkah di atas di lakukan dengan benar, maka silahkan coba lihat hasilnya pada blog Anda. Pasti related post atau artikel terkait dengan thumbnails muncul pada halaman posting blog Anda.

Selamat mencoba!!!

0 komentar :