Cara Memasang Widget Related Post Blogger

Widget Related Post ..... Penting !! Keberadaan widget yang satu ini memang dirasakan cukup penting dalam dunia blogging. Widget Related Post merupakan sebuah widget yang menampilkan sejumlah link yang memiliki keterkaitan konten satu sama lainnya. Umumnya 'related post' akan ditampilkan di bawah artikel.

Beda halnya dengan Widget Recent Post di mana widget yang satu ini hanya menampilkan link-link artikel yang baru dipublish. Sedangkan Widget Related Post akan menampilkan link-link artikel yang terpublish dalam satu kategori atau label. Tentu saja dengan widget ini akan memberikan navigasi yang lebih baik buat para pengunjung blog.

Pada template bawaan Blogger maupun template-template gratis yang bisa kita download di situs-situs tertentu, umumnya tidak memiliki Widget Related Post. Untuk itu kita harus memasang sendiri widget tersebut.

Setelah keliling mencari kode script widget yang bagus dan yang berbintang lima.... :-) akhirnya saya dapatkan juga. Kode script ini telah lulus diujicoba dan telah berhasil dipasangkan pada blog.

Silahkan ikuti langkah-langkah berikut :

• Login ke dalam Blogger kamu.
• Pilih Template ---. Edit HTML ---. Lanjutkan ---> Centang Expand Template Widget.
• Kemudian gunakan Control+F atau F3 untuk menemukan kode script yang ini </head>
• Ganti kode script </head> dengan kode script yang ada di bawah ini.

<!--Related Posts 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 .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #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:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(http://2.bp.blogspot.com/-YVVtSI8pgnI/ULQm8M_taqI/AAAAAAAAAI0/PobQMJJkEfw/s1600/bintang-seo.jpg) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style> <script type='text/javascript'>var relatedpoststitle="Related Posts";
</script><script src='http://bloggergadgets.googlecode.com/files/related_posts_min.js' type='text/javascript'/> <!--Remove--></b:if><!--Related Posts Scripts and Styles End--></head>

• Kemudian cari kode script <div class='post-footer-line post-footer-line-1'> atau yang ini <p class='post-footer-line post-footer-line-1'>. 
• Ganti kode tersebut dengan kode script di bawah.

<!-- Related Posts 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>
<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&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
<!--Remove--></b:if>
<!-- Related Posts Code End-->

• Setelah itu simpan editannya dan silahkan lihat hasilnya. Selamat mencoba !

Widget : Related Posts Widget For Blogger