New Awe-Inspiring Related Post Widget for Blogger

 Related post widgets bellow your blogger post is an awesome gadget for blogger because it'll surely increase your blog traffic in the way of internal traffic.Today I'm writing regarding a way to add awe-inspiring related post widget for blogger. And this Awe-Inspiring widgets have hover impact with variety of comments. It look stylish and attract the visitors to check it ! Let's see how to add it in your blog. How to add Awe-Inspiring Related post widget ?  First Log in to your Dashboard >> Template >> Edit HTML  Search  for ]]></b:skin>  by using ctrl+F After searching paste the following code given bellow just paste it before ]]></b:skin> /*Awe-Inspiring Related post widget*/ #related-posts{ float:left; height:160px; margin-bottom:10px;  outline: 1px solid #fff; border: 1px solid #ddd; background: #f9fafb; } #related-posts h3{     font-family: Francois One;     font-size:20px;     font-weight:400;     color: #222222;     margin-bottom: 0.5em;     margin-top: 0.5em;     margin-left: 0.5em;;     padding-top: 0em; } #related-posts ul{ margin:5px; width:613px; padding-left:17px; list-style:none; display:block; } #related-posts ul li{ list-style:none; position:relative; float:left; border:0 none; margin-right:11px; padding:2px; width:86px; }  #related-posts ul li:hover{z-index:100} #related-posts ul li:hover img{border:3px solid #BBB}  #related-posts ul li:hover div{ font-size:7px; text-transform:capitalize; position:absolute; top:20px; left:-15px; margin-left:0; width:130px } #related-posts ul li img{ border:3px solid #DDD; width:80px; height:80px; background:#FFF; display:block; } #related-posts ul li div{ position:absolute; z-index:99; margin-left:-999em } #related-posts ul li .title{ text-align:center; border:1px dotted #CCC; background:#fff; padding:5px 10px } Then again search for <data:post.body/>  Once you finished searching it paste the following code bellow  <data:post.body/>  <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <script type='text/javascript'>var ry=&#39;<h3>You May Like This:</h3>&#39;;rn=&#39;<h3>No Related Posts </h3>&#39;;rcomment=&#39;Comment&#39;;rdisable=&#39;Comments off&#39;;commentYN=&#39;yes&#39;;</script> <script type='text/javascript'> //<![CDATA[ var nothumb='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png';dw='';titles=new Array();titlesNum=0;urls=new Array();time=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><a href="'+urls[c]+'" rel="nofollow"><h2>'+titles[c]+'</h2></a><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw}; //]]> </script> <b:loop values='data:post.labels' var='label'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/> </b:loop> <script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script> </div> <div style='clear both'/> </b:if> Now save your template. That's it ! You have successfully added the Awe-Inspiring Related Post Widget on your blog. Now take a look on your related post widget on our blog and share your thoughts in comment ! I hope this text can assist you a far better for adding this new widget on your blog. Have a nice day ! Happy Blogging !

Blogging is associate degree impressive issue. However bringing visitors to the blog is tough.Related post widgets bellow your blogger post is an awesome gadget for blogger because it’ll surely increase your blog traffic in the way of internal traffic. Last week I updated an new gadget at here about adding random article widget for blogger.Today I’m writing regarding a way to add awe-inspiring related post widget for blogger. And this Awe-Inspiring widgets have hover impact with variety of comments. It look stylish and attract the visitors to check it ! Let’s see how to add it in your blog.

 Related post widgets bellow your blogger post is an awesome gadget for blogger because it'll surely increase your blog traffic in the way of internal traffic.Today I'm writing regarding a way to add awe-inspiring related post widget for blogger. And this Awe-Inspiring widgets have hover impact with variety of comments. It look stylish and attract the visitors to check it ! Let's see how to add it in your blog. How to add Awe-Inspiring Related post widget ?  First Log in to your Dashboard >> Template >> Edit HTML  Search  for ]]></b:skin>  by using ctrl+F After searching paste the following code given bellow just paste it before ]]></b:skin> /*Awe-Inspiring Related post widget*/ #related-posts{ float:left; height:160px; margin-bottom:10px;  outline: 1px solid #fff; border: 1px solid #ddd; background: #f9fafb; } #related-posts h3{     font-family: Francois One;     font-size:20px;     font-weight:400;     color: #222222;     margin-bottom: 0.5em;     margin-top: 0.5em;     margin-left: 0.5em;;     padding-top: 0em; } #related-posts ul{ margin:5px; width:613px; padding-left:17px; list-style:none; display:block; } #related-posts ul li{ list-style:none; position:relative; float:left; border:0 none; margin-right:11px; padding:2px; width:86px; }  #related-posts ul li:hover{z-index:100} #related-posts ul li:hover img{border:3px solid #BBB}  #related-posts ul li:hover div{ font-size:7px; text-transform:capitalize; position:absolute; top:20px; left:-15px; margin-left:0; width:130px } #related-posts ul li img{ border:3px solid #DDD; width:80px; height:80px; background:#FFF; display:block; } #related-posts ul li div{ position:absolute; z-index:99; margin-left:-999em } #related-posts ul li .title{ text-align:center; border:1px dotted #CCC; background:#fff; padding:5px 10px } Then again search for <data:post.body/>  Once you finished searching it paste the following code bellow  <data:post.body/>  <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <script type='text/javascript'>var ry=&#39;<h3>You May Like This:</h3>&#39;;rn=&#39;<h3>No Related Posts </h3>&#39;;rcomment=&#39;Comment&#39;;rdisable=&#39;Comments off&#39;;commentYN=&#39;yes&#39;;</script> <script type='text/javascript'> //<![CDATA[ var nothumb='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png';dw='';titles=new Array();titlesNum=0;urls=new Array();time=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><a href="'+urls[c]+'" rel="nofollow"><h2>'+titles[c]+'</h2></a><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw}; //]]> </script> <b:loop values='data:post.labels' var='label'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/> </b:loop> <script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script> </div> <div style='clear both'/> </b:if> Now save your template. That's it ! You have successfully added the Awe-Inspiring Related Post Widget on your blog. Now take a look on your related post widget on our blog and share your thoughts in comment ! I hope this text can assist you a far better for adding this new widget on your blog. Have a nice day ! Happy Blogging !

How to add Awe-Inspiring Related post widget ?

  • First Log in to your Dashboard >> Template >> Edit HTML 
  • Search  for ]]></b:skin>  by using ctrl+F
  • After searching paste the following code given bellow just paste it before ]]></b:skin>

/*Awe-Inspiring Related post widget*/
#related-posts{
float:left;
height:160px;
margin-bottom:10px;
outline: 1px solid #fff;
border: 1px solid #ddd;
background: #f9fafb;
}
#related-posts h3{
    font-family: Francois One;
    font-size:20px;
    font-weight:400;
    color: #222222;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    margin-left: 0.5em;;
    padding-top: 0em;
}
#related-posts ul{
margin:5px;
width:613px;
padding-left:17px;
list-style:none;
display:block;
}
#related-posts ul li{
list-style:none;
position:relative;
float:left;
border:0 none;
margin-right:11px;
padding:2px;
width:86px;
}

#related-posts ul li:hover{z-index:100}
#related-posts ul li:hover img{border:3px solid #BBB}

#related-posts ul li:hover div{
font-size:7px;
text-transform:capitalize;
position:absolute;
top:20px;
left:-15px;
margin-left:0;
width:130px
}
#related-posts ul li img{
border:3px solid #DDD;
width:80px;
height:80px;
background:#FFF;
display:block;
}
#related-posts ul li div{
position:absolute;
z-index:99;
margin-left:-999em
}
#related-posts ul li .title{
text-align:center;
border:1px dotted #CCC;
background:#fff;
padding:5px 10px
}

  • Then again search for <data:post.body/> 
  • Once you finished searching it paste the following code bellow  <data:post.body/> 

<b:if cond=’data:blog.pageType == &quot;item&quot;’><div id=’related-posts’>
<script type=’text/javascript’>var ry=&#39;<h3>You May Like This:</h3>&#39;;rn=&#39;<h3>No Related Posts </h3>&#39;;rcomment=&#39;Comment&#39;;rdisable=&#39;Comments off&#39;;commentYN=&#39;yes&#39;;</script>
<script type=’text/javascript’>
//<![CDATA[
var nothumb=’http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png’;dw=”;titles=new Array();titlesNum=0;urls=new Array();time=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(‘thr$total’ in d){commentsNum[titlesNum]=d.thr$total.$t+’ ‘+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel==”alternate”){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;if(‘media$thumbnail’ in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>’;while(b<titles.length&&b<20&&b<maxresults){if(commentYN==’yes’){comments[c]=’ – ‘+commentsNum[c]}else{comments[c]=”};dw+='<li><a href=”‘+urls[c]+'” rel=”nofollow”><img alt=”‘+titles[c]+'” src=”‘+thumb[c]+'”/></a><div class=”title”><a href=”‘+urls[c]+'” rel=”nofollow”><h2>’+titles[c]+'</h2></a><span>’+time[c].substring(8,10)+’/’+time[c].substring(5,7)+’/’+time[c].substring(0,4)+comments[c]+'</span></div></li>’;if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>’};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById(‘related-posts’).innerHTML=dw};
//]]>
</script>
<b:loop values=’data:post.labels’ var=’label’>
<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;’ type=’text/javascript’/>
</b:loop>
<script type=’text/javascript’>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div style=’clear both’/>
</b:if>

  • Now save your template.
  • That’s it ! You have successfully added the Awe-Inspiring Related Post Widget on your blog.

Now take a look on your related post widget on our blog and share your thoughts in comment ! I hope this text can assist you a far better for adding this new widget on your blog. Have a nice day ! Happy Blogging !

About Harshit Jain

Harshit Jain is a tech-savvy blogger. He is graduated from Mumbai University. He likes to share his knowledge through his own blog at TripoSoft, Best Beard Trimmer, Best Electric Toothbrush & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

1 Comment

  1. Removing the line (b:if cond=’data:blog.pageType == “item”), works on the homepage only the first posting.
    How to change it, I want to appear in all posts of the home page?

      

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.