Add Blogger Related Posts with Image CSS Rotation Effect

How to Related Post with Image CSS Rotation Effect for Blogger.

Relate post widget a No-1 Widget to boost the traffic of Site/Blog .well In this Post I am going to tell you how to add a very beautiful and stylist css effect Relate post widget to Blogger in very easy way.in Past i already posted about some Related Post Widget for blogger like Blogger-related-posts-widget-with-Thumbnails

Now we will add the CSS Code in Blogger Template ..  so follow my Simple below Instruction..

• Login to Blogger  >> Click on drop down menu >>then select "Template".
• Now Click on  "EDIT HTML" Button >>then click Proceed button and then click on  Expand Widget Templates.
• Now find this tag  </head> by using CTRL + F 
• Paste below code Above  </head>  tag  and Save the Template.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#related-posts img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0FBK7QJQP7fuuhFbD_fNzkZtphS3EeNYaBnyHFkF7npuff4YmRTI87hANlpQRpKWOGMgK0Slq6K-RT5T0eU5qyCJ3jzBK8vVLlOCs6omgNjtWdKWc4q5LaMOhNpQuRs1Y9g0PlMJP-Og/s1600/noimage.png&quot;;
var maxresults=4;var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='https://egytricks.googlecode.com/files/Egytricks-Related-Post-Blogger.js' type='text/javascript'/>
</b:if>

• Now Find 

<div class='post-footer-line post-footer-line-1'>

And add the below Code just Below it .

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- remove --><div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<b:if cond='data:post.isFirstPost'>
<Script Language='Javascript'>
document.write(unescape('%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%77%77%77%2E%65%67%79%74%72%69%63%6B%73%2E%63%6F%6D%2F%32%30%31%33%2F%30%32%2F%6E%65%77%2D%62%6C%6F%67%67%65%72%2D%72%65%6C%61%74%65%64%2D%70%6F%73%74%2D%77%69%74%68%2D%69%6D%61%67%65%2D%63%73%73%2E%68%74%6D%6C%27%3E%3C%69%6D%67%20%61%6C%74%3D%27%52%65%6C%61%74%65%64%20%50%6F%73%74%73%20%57%69%64%67%65%74%20%46%6F%72%20%42%6C%6F%67%67%65%72%20%77%69%74%68%20%54%68%75%6D%62%6E%61%69%6C%73%27%20%73%72%63%3D%27%68%74%74%70%3A%2F%2F%34%2E%62%70%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%2D%49%72%5F%77%51%48%63%41%48%5A%67%2F%55%52%45%4A%5A%4F%64%5F%74%62%49%2F%41%41%41%41%41%41%41%41%49%41%41%2F%71%45%54%6C%6B%39%79%67%67%47%30%2F%73%31%36%30%30%2F%62%6C%6F%67%67%65%72%2D%77%69%64%67%65%74%73%2E%70%6E%67%27%20%73%74%79%6C%65%3D%27%62%6F%72%64%65%72%3A%20%30%27%2F%3E%3C%2F%61%3E%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%77%77%77%2E%65%67%79%74%72%69%63%6B%73%2E%63%6F%6D%2F%27%3E%3C%69%6D%67%20%61%6C%74%3D%27%42%6C%6F%67%67%65%72%20%77%69%64%67%65%74%27%20%73%72%63%3D%27%68%74%74%70%3A%2F%2F%34%2E%62%70%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%2D%49%72%5F%77%51%48%63%41%48%5A%67%2F%55%52%45%4A%5A%4F%64%5F%74%62%49%2F%41%41%41%41%41%41%41%41%49%41%41%2F%71%45%54%6C%6B%39%79%67%67%47%30%2F%73%31%36%30%30%2F%62%6C%6F%67%67%65%72%2D%77%69%64%67%65%74%73%2E%70%6E%67%27%20%73%74%79%6C%65%3D%27%62%6F%72%64%65%72%3A%20%30%27%2F%3E%3C%2F%61%3E'));
//-->
</Script>
</b:if>
<!-- remove --></b:if>

Now all done if have any question or Problem according to this Related Post with Image CSS Rotation Effect for Blogger then Comment below