Related Post Widget with Image Opacity for Blogger

Related Post Widget with Image Opacity for Blogger
related posts

Related Post widget is essential for any site because it suggest the users to view similar post that might be helpful for readers. And also it helps to increase the Blog page view. But related post style varies template to template. This related post widget is perfect for those sites that use square size image. Though I have previously shared another related post widget that containing landscape type image but this is little different.  


This related post widget able to display square size image perfectly with image opacity. Posts image and title will be inside a margin seems like boxed. Hope this widget your Blog visitors will like. To add this widget just follow the below steps-

Blogger widget

Step 1 Log in to your blogger account and Go to Dashboard 

Step 2
 Click on Template-> Edit HTML->

Step 3 Now find ]]></b:skin> by Pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 4 And Paste the below code above ]]></b:skin> 

/* widget by www.bloggerspice.com */
#related-posts{float:left;width:100%;}
#related-posts h2{border-bottom:3px solid #008CDB;margin-bottom:2%;padding:1% 1%;}
#related-posts .bs_img {padding:5px 5px 0;width:135px;height:119px;}
#related-posts .bs_img:hover{opacity:.6;filter:alpha(opacity=60);-moz-opacity:.6;-khtml-opacity:.6}

Customization

  • Alter #008CDB for changing the Related Post headings border color.
  • To change the Image size alter width:135px;height:119px;
Step 5 Now again find out </head> by Pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 6 Now Paste the below Code before/above </head>
 
<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.gform_foot.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 thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVYvftnNO5AjlI6_o3tCv_N_gCu8aGgWQE1JL75uRDD1DZuYEE1Iu8kGKAO55oI9Rlivybzdn7UNbqL0eE4UlAJNznNFddy9HivS_YjrXknowO-wK5QfW7zSDHcwU5CGYlVfkT0CTlCQyK/s1600/BloggerSpice+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(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(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;margin:0 5px 10px 4px;float:left;;border:1px solid #ccc;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><div class="play-button"><img class="bs_img" src="'+thumburl[r]+'"/><br/></div><div style="width:135px;padding:0 5px;color:#222;height:35px;text-align:center;margin:0px 0px; font:bold 12px Arial; line-height:14px;">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>

Customization

  • Alter width:135px for changing the related post’s Title width
  • Alter height:35px for changing the related post’s Title height

Step 7 Now by Pressing Ctrl+F (Windows) or CMD+F (Mac) again find out <data:post.body/> 

or <div class='post-footer-line post-footer-line-1'> 

Step 8  Now Paste the below Code after/below <data:post.body/> or <div class='post-footer-line post-footer-line-1'>
 
<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_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;More Posts you might like to see :&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>

Customization

  • Alter maxresults=4 for changing the number of posts to display.
Step 9 Now hit the Save template button.

Congratulation you have successfully added related post widget in your Blogger template and now just check your Blog post and see this active widget. 
Go Up