Membuat Related Post untuk Blogger

Membuat related post untuk blogger. Menampilkan Related post atau artikel-artikel yang berkaitan dapat meningkatkan pageview atau pengunjung blog. Terlebih jika Related post tersebut dilengkapi dengan gambar yang menarik, tentunya pengunjung akan lebih tertarik lagi untuk melihat artikel tersebut. Untuk menampilkan gambar thumbnail dalam related post menggunakan gambar yang diupload ke blog melalui post, bisa juga menggunakan external image.

Berikut adalah langkah-langkah untuk membuat related post untuk blogger

Pertama, Login ke blogger dashboard dan masuk ke Template -- Edit HTML -- Proceed dan centang "Expand Widget Templates"
Lihat pada code :
```
</head>
```

Ganti code tersebut dengan style dan script di bawah ini.

<!--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/AVvXsEg_NNWVDAl69NZrupCdpQfHBEEnImYiNCXDFVqMSPfcceX3Fu3y7a6cxJXt37XYjGo0R2Cq__FIf9dbgR8Z_-3VaN64bwfDzoVSzQNHSEuGA5WftDrqpg6sbHS71t9JcQJ5j1mtsVKQnZs/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

Cari code/tag :

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

Tempatkan script di bawah ini tepat di bawah tag tersebut :

<!-- 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://nekadbisnis.blogspot.com/2012/11/membuat-related-post-untuk-blogger.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Untuk mengubah banyaknya related post ganti jumlah pada kode berikut :
```
var maxresults=5;
```

Untuk mengganti default thumb pada post tanpa image/gambar ganti kode berikut :

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_NNWVDAl69NZrupCdpQfHBEEnImYiNCXDFVqMSPfcceX3Fu3y7a6cxJXt37XYjGo0R2Cq__FIf9dbgR8Z_-3VaN64bwfDzoVSzQNHSEuGA5WftDrqpg6sbHS71t9JcQJ5j1mtsVKQnZs/s400/noimage.png";

Demikian tutorial cara membuat related post dengan gambar thumbnail untuk blogger, semoga bermanfaat.

sumber : bloggerpluggins.org

rating : 4.5 by : nekadbisnis