Pasang Related Post dengan Gambar Thumbnail

Pasang Related Post dengan Gambar Thumbnail - Bagi sebagian orang, tampilan blog dengan menyertakan banyak gambar dianggap sebagai salah satu cara agar blog itu terlihat lebih menarik. Gambar-gambar yang dipasang biasanya disimpan di sidebar, di dalam postingan atau dengan menyertakan gambar kecil/thumbnail pada recent post, recent comment, posting terbaru atau pada bagian yang akan kita bahas di sini yaitu memasang gambar kecil pada related post/posting berkaitan.

Bagi sobat yang tertarik memasang related post dengan thumbnail ini, berikut adalah langkah-langkahnya:
  • Login ke bloger
  • Pilih Rancangan
  • Klik Edit HTML
  • Centang Expand Template Widget
  • Simpan kode CSS berikut di atas </head>
<!--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 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://u-sup.googlecode.com/files/artikelberhubungandengangambar.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End--> 
  • Cari kode <data:post.body/> (jika anda sudah memasang readmore biasanya ada 2)
  • Letakkan kode barikut di bawah <data:post.body/> yang kedua
<!-- 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'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</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://u-sup.blogspot.com/2011/05/artikel-berhubungan-dengan-gambar_22.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://u-sup.blogspot.com/" style='display:none;'>blogspot tutorials</a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
  • Simpan template dan lihat hasilnya. 
Keterangan:
  1. var maxresults=5; adalah jumlah judul artikel yang akan ditampilkan.
  2. var relatedpoststitle="Related Posts"; adalah judul related post. Bisa diganti dengan posting berkaitan atau yang lainnya.
Untuk berlangganan artikel, masukan email anda disini:



0 Comment :

Posting Komentar

Bahasa dapat mencerminkan kepribadian seseorang.
Bagi yang ingin promosi web, blog dan atau mendapatkan backlink dari blog ini, telah disediakan tempat khusus. Klik DISINI

 

Info Olahraga

Info Komputer

Info Blackberry