Add Blogger Related Posts with Image CSS Rotation Effect

Related post widget 
 Relate post widget is the best tool to boost the traffic of Site or Blog.In this Post we will Know about how to add css effect Relate post widget to Blogger in very easy way.

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/AVvXsEhB8odRmj0mIc22WNVJ58nXi6tKSH3WpGbXIVpJJWRO-PsvroDQV39rHUzgyPgbPT0vM9msD1zqLQ9qk_KY953DRQjW2_k3t1hMCwT6nLUkSpBgBwhWglSPHr28Zr9T4B5_yEPKuXipOY0/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>

thank you