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

Read More

New Related Posts Widget with Thumbnails for Blogger

Hello Friends are you want to say good buy to LinkWithIn Related Posts Widget  and apply a new Pro Related Posts Widget with Thumbnails ?
If YES ... Then follow steps below to add this to your blogger blog with some easy steps ......

• Login to Blogger  >> Click on drop down >> and then select "Template"
• Now you will see EDIT HTML Button. Click on it >> and then click on Proceed button 
• Now find this tag </head> by using Ctrl+F 
• Paste below code Before/above </head> tag .

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix8qKJ2ApzePnV6alkIZiGKg08ZlEEypiJt0nMq2h-S9Th8vMwma2D7A-aT6YwwoaxddR0nxq-4qLmQq0EfgHoo9ByGCrGfcfHNf0bzKV7WRbL-HFep-06HLwNr03nCLlEpIMxQZ7rifo/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='https://egytricks.googlecode.com/files/related_posts_with_thumbnails_min_2.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

• Now Find

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

If you cant find it this then try finding this one

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

Now Just after any of these lines (whichever you could find,if not work try both one by one ) put the below code.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.egytricks.com/2012/12/Blogger-related-posts-widget-with-Thumbnails.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://www.egytricks.com/2012/12/Blogger-related-posts-widget-with-Thumbnails.html' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Now all done Save the Template. you can see Live Demo in this blog.Enjoy ......

Read More