Memasang Related Posts Widget dengan Thumbnail pada Blogger

Tahukah kamu apa itu Related Posts Widget dengan Thumbnail pada blogger? Ini merupakan sebuah widget pada blog blogger dengan menampilkan gambar (thumbnail) yang letaknya ada disetiap akhir postingan. Widget ini akan menampilkan artikel-artikel yang terkait dengan artikel yang sedang dibaca. Artikel terkait ditampilkan berdasarkan persamaan topik artikel tersebut. Bahasa yang lebih mudahnya, widget ini akan menampilkan artikel-artikel yang mempunyai pokok bahasan yang sama, misal karena tag/label yang sama, atau berada dalam satu kategori.

Ok. Untuk lebih jelasnya, langsung saja kita bahas bagaimana cara memasang atau menampilkan Related Posts Widget dengan Thumbnail pada blogger. Langkah-langkahnya adalah sebagai berikut:

1.      Langkah pertama Login ke Dashboard Blogger Anda dan pilih Design > Edit HTML dan check opsi “Expand Widget Templates”

 

2.      Cari tag

</head>

Dapat dicari dengan menekan CTRL+F kemudian ketikkan </head>.

Dan ganti dengan,

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmWEG68Fle6L9A8vUy96euCnqFYPHt381kQ-fb6Y3oddYcpuv1iJ5KY1vuNp6Mc8Q5KGrq2PBjDOJfDc1Tk0BMo5qQBbXFSm-v9NzXtOI6r5Y4h-MOp6-HcNNk5F8nb4dKsyI2fWc6U8Y/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.      Kemudian cari kode berikut,

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

Atau jika tidak menemukannya coba cari:

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

Kemudian tepat setelah baris ini paste script berikut:

<!-- Related Posts with Thumbnails Code Start-->

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

<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:loop>

<script type='text/javascript'>

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);

</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 dapat menentukan jumlah related posts yang akan ditampilkan dengan mengedit kode berikut:

var maxresults=5;

5.      Untuk mengedit judul widget, Anda dapat mengedit kode berikut:

var relatedpoststitle="Related Posts";

6.      Untuk mengganti default thumbnail, Anda dapat mengedit kode berikut:

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmWEG68Fle6L9A8vUy96euCnqFYPHt381kQ-fb6Y3oddYcpuv1iJ5KY1vuNp6Mc8Q5KGrq2PBjDOJfDc1Tk0BMo5qQBbXFSm-v9NzXtOI6r5Y4h-MOp6-HcNNk5F8nb4dKsyI2fWc6U8Y/s400/noimage.png";

7.      Untuk mengganti Splitter Line, Anda dapat mengedit kode berikut:

var splittercolor="#d4eaf2";

 

Source: http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html

Posted in: Blog dan Website,Tutorial Blogger