coin

cara pasang dan pengaturan related post with thumbnail (posting terkait dengan gambar) bloggerpluggins

Related Post ini terlihat sangat menarik, pasti anda tahu sebabnya. ya, karena related post yang dibuat oleh Bloggerpluggins ini selain menampilkan judul, juga menampilkan gambar kecil (thumbnail) dari posting yang berkaitan. Dengan dilengkapi thumbnail maka related post ini dapat menarik penngunjung untuk membaca artikel lainnya. pada artikel ini saya akan membahas cara pemasangan dan sedikit pengaturan untuk dapat disesuaikan pada Blog anda.

Baiklah kita menuju pada pemasangan kode related post ini, namun sebelum mengedit template sebaiknya anda sudah membackup lengkap templete dan menggunakan menu Find untuk memudahkan pencarian kode yang dimaksud.

PEMASANGAN
Langkah 1, Masuk pada menu TATA LETAK > EDIT HTML. Beri tanda centang pada EXPAND WIDGET.

Langkah 2, Cari kode berikut ini
</head>

Langkah 3, Copy-paste kode dibawah ini diatas kode Langkah 2.
<!--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-->

Langkah 4, carilah kode berikut ini:
<div class='post-footer-line post-footer-line-1'>

Langkah 5, Copy-paste kode berikut ini, dibawah kode langkah 4.
<!-- 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-->

Langkah 6, simpan perubahan dan lihat blog anda.


PENGATURAN POSTING
Pengaturan yang saya maksudkan disini adalah jumlah posting terkait yang ditampilkan. Anda dapat mengaturnya jumlahnya sesuai dengan kebutuhan denngan mengganti angka warna merah pada kode langkah 5 diatas, dengan catatan sebagai berikut:
jumlah 'max-results' berselisih satu lebih banyak dari jumlah 'var maxresults'
contoh:
jika 'max-result=6', maka 'var maxresult=5'
jika 'max-result=7', maka 'var maxresult=6'
jika 'max-result=8', maka 'var maxresult=7'


knj

Read More...