Sunday, November 4, 2012

How to Add Animated Recent Posts Gadget to Blogger/Wordpress/Website

Animated Recent Posts Gadget
Today i am posting how to add Animation for Recent Posts Gadget to your blogger/website:
In this tutorial, you will learn how to make an animation for the Recent Post gadget. As you have seen an example in my Recent Posts Widget, it looks quite attractive, isn't it?. When the recent posts keep changing the positions, it can actually draw attention from visitors, thus more posts will be read, and visitors will probably stay longer on your site.
If you also want to set your animation for your Recent Posts in your blog, you can see and follow the instructions below:

Steps to add Animation for Recent Post Gadget:

  1. Go to Page Elements / Layout  >>  Add a Gadget  >>  HTML/JavaScript
  2. Paste the below highlighted code into the content box.

  3. <style type="text/css"> #rp_plus_img{height:377px;} #rp_plus_img li {height:60px;padding:5px;list-style:none; background-color:#ffffff; border:solid 1px #000000;} #rp_plus_img a{color:#00000;} #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px; text-align:justify; -moz-border-radius: 5px;} #rp_plus_img img{float:left;margin-right:5px;padding:0px;border:solid 1px #00000;width:60px;height:60px;} </style> <script type="text/javascript" src=""></script> <script type="text/javascript" src=""></script> <script type="text/javascript"> var speed = 1500; var pause = 3500; $(document).ready(function(){ rpnewsticker(); interval = setInterval(rpnewsticker, pause); }); </script> <ul id="rp_plus_img"> <script style="text/javascript"> var numposts = 5; var numchars = 0; </script> <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt"></script> </ul><small><a href="" target="_blank"><span style="color:#fff;">Get this widget here</span></a></small>
  4. Now Click on  Save 
Site Developed, Designed and Maintained by Rayees Rehman Mir. Copyrights © Rayees Rehman Mir, 2010 - 2016. Best viewed on Firefox and Google Chrome.