Add Animated Recent Post In Blogger

I have request for animated recent post widget so today we learn how to add in blogger, it is quite easy if you know may be little bit different than simple recent post widget so it is the great way to tell you viewers about your recent activity and up to date them about new things.we had already added simple recent post with thumbnail.but this widget has animation effect.As all we know it helps to increase page views and make you template more attractive.

How to add animated recent post widget in blogger

This animated widget has amazing effect with thumbnail.when you hover the mouse over post then it move in circular motion and then back to its original position.It is really cool

Step1: now login to you blogger account and select your blog.

Step2: Go to template and search for 

]]></b:skin>

Step3: paste the below CSS code just above ]]></b:skin>


#post-gallery{width:100%;margin:0 auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px}#post-gallery .rp-item{float:left;display:inline;position:relative;margin:2px;padding:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjis4mEI5llpwtgLbtpa7lNZNzhrj4oUp1SZGISySjjTKvs0CFw52ewPO1EbIuwNjR4X08EngXTUgstgwYedQUnGbhtHHbBJJWylB1XJ6nBBIJOvyqDiA6QHbQkWHM0dCQmJjHWAqtY5lWs/s1600/please-wait.gif) no-repeat 50% 50%;width:79px;height:79px}#post-gallery .rp-item img{width:69px;height:69px;border:2px solid silver;border-radius:50%;margin:0!important;padding:0!important;background:transparent!important;display:none;-webkit-transition-duration:.8s;-moz-transition-duration:.8s;-o-transition-duration:.8s;transition-duration:.8s;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;transition-property:transform;overflow:hidden}#post-gallery .rp-item img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg)}#post-gallery .rp-item .rp-child{position:relative;top:10%!important;left:10%!important;z-index:1000;width:200px;background-color:#fff;border:2px solid #f56954;-webkit-box-shadow:5px 5px 10px rgba(0,0,0,0.7);-moz-box-shadow:5px 5px 10px rgba(0,0,0,0.7);box-shadow:5px 5px 10px rgba(0,0,0,0.7);padding:10px 15px;overflow:initial;word-wrap:break-word;display:none;opacity:.9}#post-gallery .rp-item .rp-child h4{font-size:12px;margin:0 0 5px;color:#1BA1E2}#post-gallery .rp-item:hover .hidden{display:block}

Step4:Go to layout and add a gadget of html/javascript by pressing add a gadget , pop up appear and add from that list.

Step 5: paste the below piece of code there.and save it

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script> <script type="text/javascript"> var rpTitle = "Recent Posts", // Widget Title numposts = 12, // Number of Posts to show numchar = 200, // Number of Characters to be displayed rcFadeSpeed = 600, // Speed pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgddhsuVpofXpedIYFGRegREqvA3I-ch6qohpb7T1ycGWLfX0XAz-ok2XE9m_wC5UF5WIgrbKxam910_D-4nB2U7KK8jXPOavRhjY0f0uk-leGwlNvgRW9CwJCJeBpTnt_gE8dONCrTtC3k/s1600/grey.png", // If No Image blogURL = "your blog url"; // Blog URL </script> <script src="https://you blog url.googlecode.com/svn/trunk/javascript/animated%20recent%20post%20widget.js" type="text/javascript"></script>

Note: before saving you have to see with in last two lines and you will see written your blog url. remove it and write your blog url there.now you process has been finished. visit your blog and enjoy amazing recent post widget.