Widget Related Posts dengan Thumbnail untuk Blogger
Hasil dari Widget Posting Terkait / Related Posts dengan Gambar Thumbnails untuk Blogger adalah sbb:
Dengan menampilkan link ke posting terkait disertai dengan thumbnail dari posting yang berhubungan sehingga bisa membantu anda meningkatkan page views/pengunjung blog anda. Pengunjung akan tergoda untuk melihat posting yang berhubungan ketika mereka terlihat muncul secara menarik apalagi dengan disertai gambar/tumbnail.
Untuk menampilkan gambar/thumbnails,widget ini akan menggunakan gambar yang diupload dari posting dengan menggunakan blogger image uploader (dari bilah post editor) dan saat ini widget ini juga sudah mendukung gambar eksternal juga.
Berikut Tutorialnya:
Disini akan dijelaskan tahapan secara deail untuk meng-install widget tersebut1. Pertama kali tentu saja anda harus Login ke blogger dashboard anda dan mengarahkan pada bagian Layout > Edit HTML dan centang "Expand Widget Templates" (Jangan lupa untuk selalu melakukan backup template terlebih dahulu).
2. Sekarang cari kode ini
</head>
dan ganti dengan kode di bawah ini
<!--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/AVvXsEhjF5bDaCmMn5ymUKNBhI80JrawLxbpMuQ7g0n9JTVoTjeUuqA9pdz8im_gwtE_qQwkrR0kWhCN97ACBZwY9mx5vV6R8l9IL2pSWs-6WS9DpIlQ0Rv_JUbIWssePFtRPBQngRg4F7yPBJw/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
3. Selanjutnya temukan kode di bawah ini
<div class='post-footer-line post-footer-line-1'>
Jika anda tidak bisa menemukannya, coba cari kode ini
<p class='post-footer-line post-footer-line-1'>
Sesudah anda menemukan salah satu kode di atas, tempatkan kode di bawah ini tepat di bawah kode yang baru anda temukan tadi
<!-- 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 != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</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://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
4. Anda bisa mengatur jumlah maksimum link yang tampil dari related posts dengan mengedit baris kode berikut ini (warna merah).
var maxresults=5;
5. Untuk mengedit judul dari widget, anda bisa mengubah baris kode berikut (warna merah)
var relatedpoststitle="Related Posts";
6. Untuk merubah default thumbnail/gambar, anda bisa mengedit baris kode berikut ini (ganti dengan alamat url gambar anda).
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjF5bDaCmMn5ymUKNBhI80JrawLxbpMuQ7g0n9JTVoTjeUuqA9pdz8im_gwtE_qQwkrR0kWhCN97ACBZwY9mx5vV6R8l9IL2pSWs-6WS9DpIlQ0Rv_JUbIWssePFtRPBQngRg4F7yPBJw/s400/noimage.png";
7. Untuk merubah Warna dari Garis pemisah, edit kode berikut (warna merah):
var splittercolor="#d4eaf2";
Untuk merubah semua warna lainnya anda harus memodifikasi CSS
Cara Menampilkan related posts di semua halaman dan bukan hanya pada halaman posting
Hapus dua baris yang dimulai dengan kode <!-- remove --> dari lankah ke 3 dan langkah ke 2.berikut ini baris kodenya:
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
dan
