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 Responses to "Related Posts dengan Thumbnail untuk Blogger"

agus said...

menarik nih..... perlu dicoba.

central004 said...

makasih tutorial-nya mba ipit,cukup bermanfaat neh

Cara Cepat Mendapatkan 2000 Teman di Facebok said...

wah tutorial ini udah banyak yang buat nih heheeee mantap deh

rukzzolangan said...

mantappp thanks ya.....berhasilllllll horeeeee

Bang Jobs said...

Terima kasih ya Mbak...:)

rantz said...

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