Get Latest Tricks Alert Daily
Follow Readers

Related Post widget with css hover effect


SHARE:

related post widget
Today I am sharing Related post widget which is using in my blog. This related post widget was created with javascript and designed with css. it is easy to install on blogger templates no need to use linkwithin and other services to created this widget.
Just add this script to you blogger template which shown in below step by step tutorial.features of this widget you can get more page views from visitor and earn more money from adsense.


How its work?

This related widgets work like a labels tags, this java scripts calls all related labels tags and align in sort this script captures all related posts 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



<!--Related Posts Scripts and Styles Start-->
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWjv-RQGlkMt7scrg1vqm1O6OQtH98Ik445t6lea5rXBixc8_dt1nKrvP0BXifKA_CUfYvDR3LLy6w-3zd7lb7DQs1BBYbWSmD4Qv5EiD_UWv7EhlWh6wEQXyeXM7AswyjfoMyQ6uXGbux/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/AVvXsEjWjv-RQGlkMt7scrg1vqm1O6OQtH98Ik445t6lea5rXBixc8_dt1nKrvP0BXifKA_CUfYvDR3LLy6w-3zd7lb7DQs1BBYbWSmD4Qv5EiD_UWv7EhlWh6wEQXyeXM7AswyjfoMyQ6uXGbux/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>
<!--Related Posts Scripts and Styles End-->




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"'>
<!--Related Post Start-->
<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=10&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
removeRelatedDuplicates_thumbsundefined);
printRelatedLabels_thumbsundefined);
</script>
</div><br/><div style='clear:both'/>
<div style='clear:both;'/>
</b:if>
Now save template. you have done

If you have any confusion feel free to ask by leaving message in comment below





SHARE:



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Subscribe To Get Latest Tricks On Email!

 

13 comments:

  1. I am really impressed with your blog design.

    ReplyDelete
  2. thanks very nice I will use it..

    ReplyDelete
  3. Replies
    1. @Abraham Joseph
      please mention your blog url link where you want to add this widget..

      Delete
  4. I don't have div class='post-footer' in my blog. I'm using picture window template

    ReplyDelete
    Replies
    1. @Akuneme christopher
      please provide your blog url

      Delete
  5. its not working on my blog
    http://apkhive.blogspot.com/

    ReplyDelete
    Replies
    1. @Albert Einstein
      first you have to remove your present related post widget from your blog then after add this widget

      Delete
  6. I don't have div class='post-footer' in my blog. I'm using picture window template. My blog is www.mobilegreentips.com

    ReplyDelete
    Replies
    1. @Akuneme Christopher
      your are finding div class='post-footer' you have to find this code div class="post-footer"

      you are missing double quotes "

      Delete
  7. One thing I want to know that is it important to put in the post-footer or I can use it anywhere in the post.

    ReplyDelete
  8. very informative articular, Thanks for sharing this
    http://mybloggertools.com/

    ReplyDelete