Awesome Animated recent post widget for Blogger

Blogger Animated recent post widget - is more attractive and useful. Some users requested me for blogger recent post widget. Okay, Today i am sharing a widget for blogger recent post widget. This widget with awesome and beautiful rotate animation. 

Some times we have to need a widget for recent post. Because when a visitor visit on static page or post then he/she could't see other recent posts. If you put a widget of recent post then all visitors are see your recent post. Okay, Now let's stat. Before starting you may see the results of this widget.

View Result

Step 1 - Go to your blogger dashboard and click on Edit Template.
Step 2 - Now Save the below CSS before ]]></b:skin> or </style>

 #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(http://i.imgur.com/Xgup3Hw.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}

Step 3 - Save The Template and Click on Layout
Step 4 - Add a new gadget like HTML/Javascript and save the below javascript.

<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    = 14,      // Number of Posts to show
    numchar     = 200,      // Number of Characters to be displayed
    rcFadeSpeed = 600,      // Speed
    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // If No Image
    blogURL     = "http://your-blog.blogspot.com/";       // Your Blog URL
</script>
<script src="https://ms-design.googlecode.com/svn/animated-recent-posts.js" type="text/javascript"></script>

Note: "http://your-blog.blogspot.com/" replace this with your blog url.

Now enjoy the awesome animated widget with your blog. If you find any problem then inform me on comment section. Happy Blogging and keep sharing our posts... Thanks

Tags

HTML tutorial Widget

Zorex Zira

I'm A Web Designer And Developer, Stay Connect with us. facebook twitter instagram youtube external-link

Related Posts