Related Posts dengan Gambar

Halo sobat, saya punya tip baru ni buat blogger mania,yaitu bagaimana menampilkan link ke posting terkait bersama dengan gambar posting yang sesuai akan membantu Anda meningkatkan tampilan halaman / pengguna. Pengguna akan tergoda untuk posting yang bersangkutan ketika mereka disajikan dengan menarik dengan gambar.
Untuk menampilkan gambar, widget ini akan menggunakan gambar upload untuk posting menggunakan gambar blogger uploader (dari editor posting)

Berikut adalah langkah-langkahnya....

1.Pertama anda Login ke dashboard blogger Anda dan arahkan ke Layout> Edit HTML
2.Sekarang cari kode di bawah ini

</head>

dan ganti dengan

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'&gt;
<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/relatedthumbs19.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

3.kemudian cari kode ini

<div class='post-footer-line post-footer-line-1'>

kalau tidak ada coba cari kode di bawah ini

<p class='post-footer-line post-footer-line-1'>

Setelah ketemu ganti kode tersebut dengan menempatkan potongan kode di bawah ini

<!-- 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-->

4.anda dapat menyesuaikan jumlah maksimum posting terkait yang ditampilkan dengan mengedit baris ini di kode.

var maxresults=5;

5.To mengedit judul widget Anda dapat mengubah baris kode ini

var relatedpoststitle="Related Posts";

Untuk mengubah warna dan semua Anda harus memodifikasi CSS
Jika Ada masalah , jangan panik .. :). Hanya tinggalkan komentar di sini dan saya akan membantu Anda. Jika Anda ingin memberi saya saran tentang cara meningkatkan widget ini, maka akan saya sangat berterima kasih.

selamat mencoba...