How to Add Related Post Widget with Thumbnails to Blogger Blog
Related post widget with thumbnails is a good widget all bloggers ought to have on their blog since it increases page views & readership while your blog traffic bounce ratio will decrease gradually.
This widget will show beneath every post(s) on your blog. Go through the steps below to make this widget work on your blogger blog.
Related Posts Widget with Thumbnails for Blogger
1.Log in to your Blogger Dashboard and Navigate to Layout ==> Edit HTML and checked the Expand Widget Templates Check box. Then use (CTRL+F) to find </head> in your templates.2.Paste the code below before the closing </head> tag.
<!--Related Posts with thumbnails Scripts www.justnaira.com-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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/AVvXsEi_luPE4am7Vo_fw4_Hb_XjelepSOEipXeLJKBf6Kp62Y0y9rN1HXxSw4T9mG0ibRYp253N9U-W3EaQSABGrFhhK6avwnvtlCLRomWePL_d8MQcvljFJYcG0YJJFuW_L5_ZsxFfZwNsa687/s1600/no+Image+1.png";var maxresults=5;var splittercolor="#d4eaf2";var relatedpoststitle="Related Posts";</script>
<script src='http://olusegun-fapohunda-calculator.googlecode.com/svn/wiki/related-post-with-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts www.justnaira.com-->
3.Now find any of this code in your template:
<p class='post-footer-line post-footer-line-1'/>Now immediately after any of these lines (whichever you could find) place the code snippet below
Or
<div class='post-footer-line post-footer-line-1'/>
<!-- Related Posts with Thumbnails Code Start www.justnaira.com-->4. Now Save your template.
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</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.justnaira.com/2012/07/how-to-add-related-post-widget-with.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYlHqMbIsAVmw23P1p_ar8e7-H99uOJqcOZodLxxz-N0_zb-XX1axa684qrpHaLUYZ8qOQHF2VQvcsGxrpnhzwEOdgU4rfdjzoKXW4SWFLKaZAfyyaHS2ROFO3CW0PUqH8jpThfSIt7JV/s1600/blogger-widgets.png" /></a><a href='http://www.justnaira.com' ><img style="border: 0" alt="Blogger Templates" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN3O3KM4hARgj-_ovpjh6r8M_opYZM0AY0fJmj_oGveuNcTZCbsljfRBd8qjgxg_uau5nVBw2Rs2QQmjO0KZ5R4Fzu8Z6_bzaFj2r0XOlMj1Z_OFp_ZJnFvB848R7IXLqLRhdc_0EEOY5Y/s1600/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End www.justnaira.com-->
Widget Configuration
1. To change the total no of posts displayed in your blog posts, Edit the following line of code.
var maxresults=5;
2. To Edit the title of the widget, change the following line of code.
var relatedpoststitle="Related Posts";
0 comments:
Post a Comment