Related Post Widget With New CSS Hover Effects For Blogger

Today I am sharing Related post widget. This related post widget was created with the of coding JavaScript and designed with CSS coding.It is easy to install on blogger templates,No need to use link-within or any other bad Widget or any other services to created this widget.

Just add this script to you blogger template.Features of this widget is that you can get more page views from visitor and earn more money from adsense or any other ad network.

How it is work?

This related widgets working like a labels tags, this java-scripts calls all related label tags and align in sort,This script captures all related posts with images and links in the frame in equal size.

Adding Related Post to Blogger Template

Step 1

First backup your template

Goto > Edit Template > and press Ctrl + F

Now find ]]></b:skin>

Step 2

Now Paste this code above ]]></b:skin>

/*--- ------Related Posts --------------------*/
#related-posts {
margin: 1px 0px 15px 0px!important;
background: white;
height: 265px;
width: 600px!important;
padding: 0px 0px 0px 0px!important;
border-radius: 5px 5px 5px 5px;
}
#related-posts h2{
margin: 10px 0px!important;
padding: 15px 15px!important;
font-family: Helvetica,Arial,sans-serif;
font-size: 16px;
color: white;
font-weight: 600;
line-height: 14px;
text-transform: capitalize;
none repeat scroll 0% 0% rgb(255, 255, 255) !important;
background: #900000;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
box-shadow: 0px 2px 4px #333;
}
#related-posts-text {
font-size: 1.1em !important;
font-weight: 600 !important;
line-height: 1.45em !important;
font-family: Helvetica,Arial,sans-serif !important;
width: 120px;
padding-left: 3px;
height: 65px;
border: 0pt none;
margin: 3px 0pt 0pt;
}
#related-posts img {
border: 2px solid #ccc ;
padding: 3px !important;
overflow: hidden;
width: 110px;
height: 90px;
margin:3px;
border-radius:4px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
opacity:1;
}
#related-posts img:hover {
border: 2px solid #333;
opacity:0.5;
}
#related-posts a {
color:#666;
}
#related-posts a:hover{
color:#333;
}

Step 3

Now Find </head>
and paste this code above it

<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju_C5H5KAjDVNCKZB54zsEC2VtMXYo7sf6HH2wz1sDFX6ePsfGP-K-zl6uPim9MBTSZSPzpo6iSm-j-wFlgUNGzXUMA_KVEzLmQi_3Tldpi99-YWiH2B5zzPuVPmSjFNueeAsNFRtf-rRY/s1600/no_image.jpg";
var maxresults=4;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Topics:";
</script>
<script>
//<![CDATA[
var relatedTitles = new Arrayundefined);
var relatedTitlesNum = 0;
var relatedUrls = new Arrayundefined);
var thumburl = new Arrayundefined);
function related_results_labels_thumbsundefinedjson) {
for undefinedvar 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 undefinederror){

s=entry.content.$t;a=s.indexOfundefined"<img");b=s.indexOfundefined"src=\"",a);c=s.indexOfundefined"\"",b+5);d=s.substrundefinedb+5,c-b-5);
ifundefinedundefineda!=-1)&&undefinedb!=-1)&&undefinedc!=-1)&&undefinedd!=""))
{thumburl[relatedTitlesNum]=d;} else {ifundefinedtypeofundefineddefaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]

="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju_C5H5KAjDVNCKZB54zsEC2VtMXYo7sf6HH2wz1sDFX6ePsfGP-K-zl6uPim9MBTSZSPzpo6iSm-j-wFlgUNGzXUMA_KVEzLmQi_3Tldpi99-YWiH2B5zzPuVPmSjFNueeAsNFRtf-rRY/s1600/no_image.jpg";}

}

ifundefinedrelatedTitles[relatedTitlesNum].length>45) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substringundefined0, 45)+"...";
for undefinedvar k = 0; k < entry.link.length; k++) {
if undefinedentry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;

}
}
}
}
function removeRelatedDuplicates_thumbsundefined) {
var tmp = new Arrayundefined0);
var tmp2 = new Arrayundefined0);
var tmp3 = new Arrayundefined0);
forundefinedvar i = 0; i < relatedUrls.length; i++) {
ifundefined!contains_thumbsundefinedtmp, 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_thumbsundefineda, e) {
forundefinedvar j = 0; j < a.length; j++) if undefineda[j]==e) return true;
return false;
}

function printRelatedLabels_thumbsundefinedcurrent) {
var splitbarcolor;
ifundefinedtypeofundefinedsplittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD";
forundefinedvar i = 0; i < relatedUrls.length; i++)
{
ifundefinedundefinedrelatedUrls[i]==current)||undefined!relatedTitles[i]))
{
relatedUrls.spliceundefinedi,1);
relatedTitles.spliceundefinedi,1);
thumburl.spliceundefinedi,1);
i--;
}
}

var r = Math.floorundefinedundefinedrelatedTitles.length - 1) * Math.randomundefined));
var i = 0;

ifundefinedrelatedTitles.length>0) document.writeundefined'<h2>'+relatedpoststitle+'</h2>');
document.writeundefined'<div style="clear: both;"/>');
while undefinedi < relatedTitles.length && i < 20 && i<maxresults) {
document.writeundefined'<a style="text-decoration:none;padding:5px;float:left;');
ifundefinedi!=0) document.writeundefined'border-left:solid 0.5px '+splitbarcolor+';"');
else document.writeundefined'"');
document.writeundefined' href="' + relatedUrls[r] + '"><img src="'+thumburl[r]+'"/><br/><div id="related-posts-text">'+relatedTitles[r]+'</div></a>');

i++;

if undefinedr < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}

}
document.writeundefined'</div>');

relatedUrls.spliceundefined0,relatedUrls.length);
thumburl.spliceundefined0,thumburl.length);
relatedTitles.spliceundefined0,relatedTitles.length);

}

//]]>
</script>

Step 4

Final Step
now search for <div class='post-footer'>
after finding this code paste below code above it

<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=10"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
removeRelatedDuplicates_thumbsundefined);
printRelatedLabels_thumbsundefined);
</script>
</div><br/><div style='clear:both'/>
<div style='clear:both;'/>
</b:if>