Related Posts dengan Thumbnail untuk Blogger


Dengan adanya Related Post maka tampilan postingan anda akan lebih menarik dan pembaca akan diberikan informasi yang lebih segar dengan adanya thumbnail tersebut, jika sahabat blogger tertarik untuk memasangnya silakan ikuti langkah-langkahnya dibawah ini. Berikut adalah langkah-langkah instalasi rinci :


1. First Login ke dashboard blogger Anda dan arahkan ke Layout> Edit HTML dan centang kotak "Expand Template Widget" kotak centang


2.Sekarang anda harus mencari kode di bawah ini :

</head>

Setelah ketemu silakan ganti dengan kode di bawah :

<!--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/relatedthumbs20.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

3.Selanjutnya anda harus mencari kode seperti ini :

<div class='post-footer-line post-footer-line-1'>
Jika Anda tidak dapat menemukannya, maka cobalah menemukan yang satu ini
<p class='post-footer-line post-footer-line-1'>
Setelah ketemu silakan anda copy paste kode di bawah tepat dibawah kode 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-->

4.Untuk menampilkan banyaknya thumbnail silakan anda ganti angka 5 sesuai dengan keinginan anda misalnya jumlahnya 4, 3 atau 2.

var maxresults=5;

5 Untuk mengedit judul widget Anda dapat mengubah baris kode ini

var relatedpoststitle="Related Posts";

Selamat mencoba dan kunjungi terus blognya tutorial ipitoon siapa tahu anda akan memerlukannya dan saya akan mengupdatenya di lain kesempatan, terima kasih sahabat sudah mengunjunginyi blog ini dan jangan lupa komentarnya.

6 Komentar untuk "Related Posts dengan Thumbnail untuk Blogger"

menarik nih..... perlu dicoba.

makasih tutorial-nya mba ipit,cukup bermanfaat neh

wah tutorial ini udah banyak yang buat nih heheeee mantap deh

mantappp thanks ya.....berhasilllllll horeeeee

makasi ku dh pasang,.,. hehe,.,.

Back To Top