Related Post Widget with Image Opacity for Blogger
Related Post Widget with Image Opacity for Blogger
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-
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'>
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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=4;
var relatedpoststitle="More Posts you might like to see :";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>Customization
- Alter maxresults=4 for changing the number of posts to display.
Congratulation you have successfully added related post widget in your Blogger template and now just check your Blog post and see this active widget.
2 comments
I am very glade to hear that. And thanks for using my widget. :up