Pin It



Animation for Recent Post Gadget

  • Wednesday
  • Andy Law
  • Share
  • In this tutorial, we will learn how to make an animation for the Recent Post gadget. As you can see an example here, 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. You can see the instruction below:

    1. Go to Page Elements / Layout  >>  Add a Gadget  >>  HTML/Javascripts
    2. Place this 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:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;} </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&alt=json-in-script&callback=rpthumbnt"></script> </ul><small><a href="" target="_blank"><span style="color:#fff;">get this widget here</span></a></small>
    4. SAVE

    9 Responses to “Animation for Recent Post Gadget”

    syeds said...
    28 July 2011 at 19:50

    I am getting error while uploding this animation. Ther error code is 2152.021

    Sample Business templates

    Andy Law said...
    29 July 2011 at 17:11

    you just need to go to Page Element, then click on Add a Gadget, then find the HTML/Javascripts (to find the HTML/Javascript option, scrolling down after you have got a pop-up window). Then copy and paste the exact code above (make sure you get the given correct code above, otherwise it won't work.). After that, click Save. It would work.

    Many Men Entertainment said...
    5 August 2011 at 11:25

    how do i link them individually?

    Andy Law said...
    5 August 2011 at 13:04

    if you want to link your recent post individually, you should add the "Link List" Gadget, then place your post link to your link list gadget. then name it "Recent Post".

    yuda said...
    8 November 2011 at 02:12

    very nice visit my blog

    Signorina Syima said...
    24 January 2012 at 20:06

    hi.. successful install into my blog.

    buy... why only 3 recent post only? what happen to the rest??

    -quite confuse

    Akshay said...
    11 April 2012 at 18:59

    It Worked.

    Check here

    අවතාර් said...
    7 May 2012 at 16:31

    wow its working thanks

    Anonymous said...
    23 September 2012 at 20:18

    it worka check it out

    Post a Comment

    SUBSCRIBE NOW to get the latest posts