Learn More

Monday, September 26, 2011

Horizontal Animation Of Popular Posts With Control

Hey buddy, missed with our tutorials? Ok, now we will discuss about beautifying the popular post widgets from the original bloggers. You'll want to display the widget is more lively and interesting. So let's make it popular as an animated slideshow post. Equipped with forward and back controls. Interesting is not it?

animation of popular posts
Popular posts (with another name: Most Viewed) Animation


Visitors worldwide have always tended to enter the two main parts of our posts. The first is the recent posts and the second is the post popular. Both have a very important role (see our previous article). Beautify the recent post widget and popular post is one of the power to make the visitor's interest grew. For the purpose of why we made ​​the original post popular bloggers become more lively and interesting. That animated slideshow. We've met a few blogs that offer a new form of popular post-blogger widget. Such as simple spy, grid, and others. However, we want users to have the ability to control the popular post widget.

And we are very grateful to Remy Sharp (@ rem on Twitter), for writing the tutorial about Infinite Automatic Carousel.

Unfortunately, the tutorials are given by him can not be applied easily in blogger. When we re-examine the entire script from him, there is a code that causes the popular post widgets with other widgets overlap. And still there are a number of other code that we fix. However, Remy's good work, you give us an idea.

To the point

Just let us begin this tutorial, the first step you should do is make the widget popular posts. Click the Design tab -> Page Elements -> Add a Gadget. Then select popular posts. Change Show popular post with image thumbnails. You can choose how many popular posts that you want to show. Then save.

popular posts widget

After that open the Design tab -> Edit HTML, look for type = 'PopularPosts', in fact here we will look for widgets from popular posts. Widgets from popular posts have type PopularPosts. Precisely you at least look for code like this <b:widget id='uniq_id' locked='false' title='your_title_widget' type='PopularPosts'>.

After that, the bottom of that code, you will find <b:includable id='main'>. At least popular posts widget code like the following

replace that code with the following code

Continue your work by entering the following css code before ]]></b: skin> (Hint: if you are using windows, you can find it by using Ctrl +F).


Next, place the following code above the code </head>


Done, you've managed to solve it.

How to implement it on your blog?

Basically, the distance between the forward and back buttons are automatic. Depending on the width of section. The example I give to you is for main bar section. Another story with a sidebar. For that, you need a little guidance from us.

To adjust the width of the slideshow, then change the value of the width that is in the .infiniteCarousel. To avoid overlap between the images with the button of the forward or back, then change the width value is in the .infiniteCarousel .wrapper. To set the distance between the images, change the width which is within .infiniteCarousel ul li. Arrange all the values ​​that we suggest, to fit your needs.

  1. Would have loved this one, Just didn't work for me.

    1. For Ashley:
      On where position it not work? Basically, the javascript is always work. But it will not good if the css code not support. So tell us?

  2. very nice i will try this for my website http://www.theindependentindia.com

  3. Ayyappa ChaytanyaAugust 3, 2012 at 9:51 PM

    This works...please provide a way to arrange 10 popular posts in 2 rows. Thank You.

  4. Thanks for your suggestion and want to use this widget. My suggestion, try another plugin from threelas. One plugin for all widgets http://www.threelas.com/2012/05/recent-posts-widget-multifunction-for.html

  5. great tip for new bloggers like me. It will be very useful to me
    to improve my blogging profession.... Keep continuing sharing new

  6. i tried it but its not horizontal.. its vertical. see it www.aymovie.blogspot.com