Recently, I share a post of how to add popular post widget to blogger blogs. So my readers request me to share the tutorial of how to add related posts widget with thumbnails to your blogger blogs.
- How To Add Feedburner Recent Posts Widget To Your Blog
- How To Add Circle Image Style To Popular Posts in Blogger
- Awesome Popular Posts Widget With Counter Box For Blogger
- How To Add Random Posts Widget into Blogger Blogs
 |
| How to add “Related Posts” widget with thumbnails in blogger blog |
I’ll always recommended you to use related posts widget on your blog. When users visit any web page or single article page to your blog, they will also see the most relevant articles which is appears at the below of every posts.
This widget helps users to find most relevant information and that can improve your bounce rate and you’ll also increase your website traffic easily.
People are always want to show something different things on their blogs. Basically there are different blogger widgets are available that are used for improving blog visibility and appearance.
“Related Posts” widget is also one of them. There are many ways to display this widget to your blog, but many of them shows irrelevant results which are not related to that particular article that we reading that time.
So this kind of widgets not attracts users, and they also provide the bad impressions to your readers. So today in this articles, I’ll share a awesome and beautiful related posts widget that helps you to use according to your taste and interest.
Why We Add Related Posts Widget Below Posts in Blogger?
Many times you may want to give some many other related links to your readers that helps them to read more stuffs on your site and remain active more time.
This will also helps for engaging more and more readers for a longer period of time that is useful for your blog growth but also increase your blog revenues. Because as much your visitors active and engaged with your contents as much you earn money online.
No doubt there are thousands of articles, tutorials are available on the internet that helps you add related articles below your posts in blogger blogs, but I hope that this tutorial will helps you more and you can easily adding this to your blog without any problem.
Adding Related Posts Widget Below Posts in Blogger Blogs
</head>
Step 6 – Just before / above this tag, paste the below code.
<!– Related Posts with thumbnails Starts–>
<style>
#related-posts {
float: left;
width: 650px;
border-bottom: 1px solid #ddd;
height: 290px;
}
#related-posts h2 {
margin-top: 50px;
border-bottom: 0px;
border-top: 1px solid #ddd;
padding-top: 20px;
margin-bottom: 10px;
margin-left: 3px;
color: #666;
font-size: 16px;
}
</style>
<b:if cond=’data:blog.pageType == "item"’>
<script type=’text/javascript’>
var defaultnoimage="https://lh6.googleusercontent.com/-uckOXB3-t6A/V8cTI0h8cLI/AAAAAAAAH2E/Sn9l_YsqW8UEJMPcRW0AN
O0MwAlD0XcOQCL0B/s128-no/no_image.jpg";
var maxresults=4;
var splittercolor="#fff";
var relatedpoststitle="Related Articles:";
</script>
<script type=’text/javascript’>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf(“<img”);b=s.indexOf(“src=””,a);c=s.indexOf(“””,b+5);d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=””))
{thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== ‘undefined’) thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]=”https://lh6.googleusercontent.com
/-uckOXB3-t6A/V8cTI0h8cLI/AAAAAAAAH2E/Sn9l_YsqW8UEJMPcRW0ANO
0MwAlD0XcOQCL0B/s128-no/no_image.jpg”;}
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+”…”;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;}}}}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length – 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length – 1] = relatedTitles[i];
tmp3[tmp3.length – 1] = thumburl[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if(typeof(splittercolor) !== ‘undefined’) splitbarcolor=splittercolor; else splitbarcolor=”#DDDDDD”;
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==current)||(!relatedTitles[i]))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
i–;}}
var r = Math.floor((relatedTitles.length – 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write(‘<h2>’+relatedpoststitle+'</h2>’);
document.write(‘<div style=”clear: both;”/>’);
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write(‘<a style=”text-decoration:none;padding:5px;float:left;’);
if(i!=0) document.write(‘border-left:solid 0.5px ‘+splitbarcolor+’;”‘);
else document.write(‘”‘);
document.write(‘ href=”‘ + relatedUrls[r] + ‘”><img style=”width:200px;height:120px;border:0px;” src=”‘+thumburl[r]+'”/><br/><div style=”padding-left:3px;height:65px;border: 0pt none ;
margin: 3px 0pt 0pt; padding: 0pt; font-style: normal;
font-variant: normal; font-weight: normal; font-size: 12px;
line-height: normal; font-size-adjust: none; font-stretch: normal;”>
‘+relatedTitles[r]+'</div></a>’);
i++;
if (r < relatedTitles.length – 1) {
r++;
} else {
r = 0;}}
document.write(‘</div>’);
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script>
</b:if><!– Related Posts with thumbnails End–>
<data:post.body/>
<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></b:if>
<div class=’post-footer-line post-footer-line-1′></div>
I hope this article helped you in adding related posts below every posts in blogger blogs. Related articles widget helps a lot in reducing your bounce rate and gives a lot of traffic and increase your leads, sales and commissions. If you have any questions in your mind, share in comment section.
