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:
- Go to Page Elements / Layout >> Add a Gadget >> HTML/JavaScript
- Paste the below highlighted code into the content box.
- Now Click on Save
<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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></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&alt=json-in-script&callback=rpthumbnt"></script> </ul><small><a href="http://www.facebook.com/rayeesrehmanmir/" target="_blank"><span style="color:#fff;">Get this widget here</span></a></small>