How to add related post widget with css hover effect on blogger

How to add related post widget with css hover effect on blogger

Fast download the html code from the below download box

/*--- ------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;

}

After download the html code
Fast backup your template
Go to >> edit html>>and press Ctrl +F
Now Find ]]></b:skin>
Just coy the downloaded file and paste the code above ]]></b:skin> tag

<!--Related Posts Scripts and Styles Start-->

<script type='text/javascript'>

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpcV_PvlzYr0JTpn7voiRJ6w_gmjNLa53dAZmE_ERn95ZghY_LgQbNxo48BtSunUADKJZXzIh_BrXNF7DeHHsBE1Ik7z7v5lufThu6d8GZg2uw-B4ZKiQ2qcV7rd5ZTSAET4rDWMsa1sON/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/AVvXsEjpcV_PvlzYr0JTpn7voiRJ6w_gmjNLa53dAZmE_ERn95ZghY_LgQbNxo48BtSunUADKJZXzIh_BrXNF7DeHHsBE1Ik7z7v5lufThu6d8GZg2uw-B4ZKiQ2qcV7rd5ZTSAET4rDWMsa1sON/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-->

Now Find </head>

Copy the downloaded html code and paste the code above </head> tag

<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 find <div class='post-footer'>
copy the downloaded code and paste the code above <div class='post-footer'> tag