Stylish Related post for blogger with hover effect

stylish related postHi Visitors!! As we have explained in our previous post that we will share the unique widgets of our beautiful template "Skillmag". We have already publshed some of the widgets, which are "Stylish Author Box Below Post with Admin Tag", "Stylish all in one social widget with hover effect for blogger" and "Stay connected social subscribe widget for blogger". So taday we are going to share Stylish Related post widget from this template. The widget looks very stylish and cool, it is equipped with hover effect, when a visitor will hover on it, it will show the description with opacity effect. The widget will display most relevant suggests to your visitors according to your post label.So, at first lets see the demo of the widget.

Live Demo

Features of this widget:-

  • looks clean and stylish.
  • supports all browsers.
  • beautiful hover effect.
  • display most relevant suggests

How to install stylish related post for blogger with hover effect.:-

These  steps are so simple and easy that every new blogger will not face any kind of problem to install it in their blog.

  • Go To Blogger.com >> Your Blog >> Template
  • Now Backup your template.
  • Then select Edit HTML
  • Search for ]]></b:skin> and just above it paste the following  CSS code.

#related_posts h4{font-size:220%;font-family:&#39;Open Sans Condensed&#39;,&quot;Arial Narrow&quot;,Arial,sans-serif;text-transform:capitalize;margin-top:20px}
.isirelated h5{text-transform:capitalize;font-size:120%;margin-bottom:3px}
#relpost_img_sum img{width:120px;height:120px;border: 2px solid #1d1d1d;
border-radius: 5px;
background-image:-moz-linear-gradient(top,#ffffff,#eeeeee);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#eeeeee));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#eeeeee);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffffff),color-stop(1,#eeeeee));
background:-moz-linear-gradient(center top,#fff 0,#eee 100%);
-pie-background:linear-gradient(270deg,#ffffff,#eeeeee);
-moz-box-shadow:0 0 0 4px rgba(100,100,100,0.1);
box-shadow:0 0 0 4px rgba(100,100,100,0.1);
-webkit-box-shadow:0 0 0 4px rgba(100,100,100,0.1);}
.isirelated{width:300px;z-index:2;padding:5px 8px;background-color:#F3F3F3;border-bottom:2px solid black;position:absolute;top:-70%;left:200px;visibility:hidden;opacity:0;transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s}
#relpost_img_sum li:hover .isirelated{visibility:visible;opacity:1;left:10px}
.isirelated::after{content:&quot;&quot;;width:0;height:0;border-width:10px 5px;border-style:solid;border-color:black transparent transparent transparent;position:absolute;top:100%;left:11px}
#relpost_img_sum li{list-style:none;width:120px;height:120px;position:relative;float:left;margin-right:5px}
.news-text{font-size:90%}
#related_posts{height:180px;border: 2px solid #c4c4c4;
border-radius: 5px;
background-image:-moz-linear-gradient(top,#ffffff,#eeeeee);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#eeeeee));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#eeeeee);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffffff),color-stop(1,#eeeeee));
background:-moz-linear-gradient(center top,#fff 0,#eee 100%);
-pie-background:linear-gradient(270deg,#ffffff,#eeeeee);
-moz-box-shadow:0 0 0 4px rgba(100,100,100,0.1);
box-shadow:0 0 0 4px rgba(100,100,100,0.1);
-webkit-box-shadow:0 0 0 4px rgba(100,100,100,0.1);}

Now let’s add the important part of the widget, Search for  and just above/before it paste the following coding.

<script>
//<![CDATA[
$(document).ready(function(){
if(!$.browser.msie) $(".glap ul li").hover(function() {$(this).siblings().stop().fadeTo(400,0.4);},
function() { $(this).siblings().stop().fadeTo(400,1); });
});
//]]>
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relnojudul=0;var relmaxtampil=4;var numchars=150;var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(d,c){var b=d.split("<");for(var a=0;a<b.length;a++){if(b[a].indexOf(">")!=-1){b[a]=b[a].substring(b[a].indexOf(">")+1,b[a].length)}}b=b.join("");b=b.substring(0,c-1);return b}function relpostimgcuplik(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];reljudul[relnojudul]=d.title.$t;postcontent="";if("content" in d){postcontent=d.content.$t}else{if("summary" in d){postcontent=d.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in d){postimg=d.media$thumbnail.url}else{postimg="http://4.bp.blogspot.com/-b9kfnZlObjc/UGxyCcbigjI/AAAAAAAAFd4/xPPqLCo9uCA/s1600/no_image.jpg"}relgambar[relnojudul]=postimg;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relurls[relnojudul]=d.link[a].href;break}}relnojudul++}}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function artikelterkait(){var j=new Array(0);var h=new Array(0);var g=new Array(0);var d=new Array(0);for(var k=0;k<relurls.length;k++){if(!contains(j,relurls[k])){j.length+=1;j[j.length-1]=relurls[k];h.length+=1;h[h.length-1]=reljudul[k];g.length+=1;g[g.length-1]=relcuplikan[k];d.length+=1;d[d.length-1]=relgambar[k]}}reljudul=h;relurls=j;relcuplikan=g;relgambar=d;for(var k=0;k<reljudul.length;k++){var c=Math.floor((reljudul.length-1)*Math.random());var p=reljudul[k];var m=relurls[k];var f=relcuplikan[k];var b=relgambar[k];reljudul[k]=reljudul[c];relurls[k]=relurls[c];relcuplikan[k]=relcuplikan[c];relgambar[k]=relgambar[c];reljudul[c]=p;relurls[c]=m;relcuplikan[c]=f;relgambar[c]=b}var n=0;var a=Math.floor((reljudul.length-1)*Math.random());var e=a;var o;var l=document.URL;while(n<relmaxtampil){if(relurls[a]!=l){o="<li class='news-title clearfix'>";o+="<a href='"+relurls[a]+"' rel='nofollow' target='_top' title='"+reljudul[a]+"'><img src='"+relgambar[a]+"' /></a>";o+="<div class='isirelated'><h5>"+reljudul[a]+"</h5>";o+="<span class='news-text'>"+relcuplikan[a]+" ... </span></div>";o+="</li>";document.write(o);n++;if(n==relmaxtampil){break}}if(a<reljudul.length-1){a++}else{a=0}if(a==e){break}}};
//]]></script>
</b:if>

Now let’s add the final  part of the widget, Search for <data:post.body/> and just below/after it paste the following coding.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
<p style='color:#111; font-weight: bold; font-size: 22px;font-family: &quot;Trebuchet MS&quot;,sans-serif; margin:0px 0px 5px 0px; '>You May Also Like</p>
<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=relpostimgcuplik&amp;max-results=40&quot;' type='text/javascript'/>
</b:loop>
<span class='glap'><ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul></span>
</div>
</b:if>

All Done : Now everything is completed just  Save your Template by pressing Save template button.
Note: if you want to increase the number of results then just search for relmaxtampil=4 and change the value.

From the Editor’s Desk:

Hope you have enjoyed the cool and interesting session  of this relating your articles. we are trying to create more widgets that benefits to you and your users. If you would face any problem to add this widget feel free to ask till then, blessings and happy relating

Comments

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge

Looking for More Awesomeness?