"Related Posts" Widget untuk Blogger

Hari ini aku berjaya membuat “Related Posts” Widget dibawah setiap post di dalam kesemua Blog aku. Ini dapat memudahkan sesiapa yang ingin membaca kandungan atau post yang berkait rapat dengan psot tersebut. Cara ini juga dapat membuatkan pelawat untuk lebih lama berada dalam Blog tersebut. Ini dapat mengurangkan “Bounce Rate” yang sekarang ini terlalu tinggi.
Sebagai contoh, “Bounce Rate untuk Blog2 dibawah adalah:
1 - Future is Here = 90.9% (32 saat - average time on site)
2 - My Gadget = 81.7% (50 saat)
3 - Antara Alam Maya = 66,67% (3 minit 9 saat)
4 - Edoras Travelogue = 67.9% (3 minit 53 saat)
5 - Edoras FotoZine = 78.79% (3 minit 13 saat)

Cara ini adalah termudah dibandingkan dengan cara2 yang kubaca dalam Internet.

Source: Related Posts Widget for Blogger / Blogspot.
Steps for Implementation:

• Go to Layout >Edit HTML in your Blogger Dashboard.
• Back up your existing Template before making any changes!
• Make sure to check the “Expand Widget Templates” box.
• Search for the </head> tag.
• Add the following code just before the </head> tag.

2. <style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp6sh7L9LKwNyCDIxQ1aI2EoGE-BLc4JmZjH6R4ueGb02ryXRUlxro9hWBlB9lDVVtLdlZIO1u3NUS95E2YjOfwNAf_vefcehU0OqfdFBZyaGAcv5a5YY3rkpBF-8sF2KrDG4J8ICqre4/”) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src=‘http://theblogtemplates.com/scripts/Related_posts_hack.js’ type=‘text/javascript’/>

• Now search for <data:post.body/>. In some of the templates this code may look like this
<div class=‘post-body>
or
<data:post.body/>

• Add the following code just beneath the code you just searched for.

2. 
<b:if cond=‘data:blog.pageType == “item”’>
3. <div id=“related-posts”>
4. <font face=‘Arial’ size=‘3’><b>Related Posts : </b></font><font color=‘#FFFFFF’><b:loop values=‘data:post.labels’ var=‘label’><data:label.name/><b:if cond=‘data:label.isLast != "true"’>,</b:if><b:if cond=‘data:blog.pageType == "item"’>
5. <script expr:src=‘"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"’ type=‘text/javascript’/></b:if></b:loop> </font>
6. <script type=‘text/javascript’> removeRelatedDuplicates(); printRelatedLabels();
7. </script>
8. </div></b:if>

• Now Save your Template and you’re done!

Customization

1. In order to change the number of maximum related posts being displayed for each label, search for the code below (within the code given in step 7) and change the number “5” to any desired number.
3. max-results=5