Customize Popular Post Widget with jQuery

'Recent Posts' widget or 'Popular Posts' widget is very essential widget for blog. I think it is known to everyone that why it is important, because it gives latest post information of your blog to your blog readers. So you should look after this widget very carefully. By default blogger provides some styles for this widget but somehow these are obsolete, unprofessional and not animated. I have written few posts about customization of this widget. You can find those out in my blog. Some of those are using css only and rests are using css and jquery. Advantage of css is it requires less time for page loading, but main drawback is it is not supported in every browser and it is animation free. This post is the customization of popular posts using both jQuery and CSS. Hope you will enjoy it.

You may also like
• Customize 'Popular Posts Widgets' using CSS3 for Blogger.
• Replace Popular Posts Title with an Image

Features :
• Auto Scrolling
• Full control over scrolling speed
• Full control over direction of scrolling
• Choose whether animation should pause or not on mouse-over
• Full control over 'Image thumbnail' view.
• Full control over 'Snippet' (post summery) view.
• Full control over displaying post date
• Full control over showing number of comments

Screenshots :

• 
• 
• 

All right, let's proceed.

Before you make any changes in your blogger template, it is recommended to backup your blog in case something goes wrong.
It is just a cautionary statement. Don’t get scared. Just stay serious.

Let's proceed.

1. Sign in to Blogger.
2. Click the Drop-down arrow adjacent to 'Go to post list' icon.
   
3. Click 'Layout' form the drop-down menu list. It will open the layouts of different widgets (or gadgets) of your blog.
4. Click 'Add a Gadget' link as shown in the fig below. A new window will open that contains list of all gadgets available.
   
   
5. Scroll down and when you will see 'HTML/Javascript' gadget, click on it or click the '+' icon as shown in fig below.
   
   
6. This will take you to a new window named as 'Configure HTML/Javascript'.
   • Write 'Recent Post' or 'Popular Post' or anything else you want under 'Title' field.
   • Copy and paste the below code under 'Content' field.
Before I highlight the entire code, let's talk about its various parts.

✓ CSS

The CSS code goes something like that,

img.recent_thumb {padding:1px;width:70px;height:70px;border:1px solid #aaa;border-radius: 3px; float:right;margin:5px 0 5px 10px;}
ul.recent_posts {float: right;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;}
ul.recent_posts li {padding-bottom:5px;padding-top:5px;min-height:65px;}
ul.recent_posts .header a {text-decoration:none; font: italic normal 19px PT Sans Narrow; color: #005; text-shadow: 1px 1px 3px #fff;}
ul.recent_posts .main { font: normal normal 16px PT Sans Narrow;}
ul.recent_posts .footer, ul.recent_posts .footer a {font: italic normal 14px PT Sans Narrow; color: #1414ff;}

Details of this CSS code are shown below. Carefully notice it.



✓ jQuery

Let's now talk about jQuery part. Have a look at this.

<script type='text/javascript'>
 var numposts = 10;
 var showpostthumbnails = true;
 var displaymore = true;
 var displayseparator = false;
 var showcommentnum = true;
 var showpostdate = true;
 var showpostsummary = true;
 var numchars = 100;
 $(document).ready(function() {
  $('#sai').vTicker({
   speed: 500,
   pause: 3000,
   showItems: 3,
   animation: 'fade',
   mousePause: true,
   height: 0,
   direction: 'down'
  });
 });
</script>

Be sure to read the configuration below.

☀ Configuration

numposts

Number of popular posts are to be shown to reader. Value should be an integer.

showpostthumbnails

Display post thumbnail image for every post. If the value is set to true but your blog post does not contain any image, it will show .

displaymore

Display More -> for every post.

displayseparator

Display a separator between two adjacent posts.

showcommentnum

Display no of comments for every post. If there is no comments for a specified post but the value is set to true, it will show No Comments.

showpostdate

Display post date.

showpostsummary !important

Display post summery. This is important because numchars variable depends upon this variable.

numchars

Display number of characters under a post. This will work if and only if the value of showpostsummery is set to true.

speed

Animation speed in microsecond (ms).

pause

Animation delay in microsecond (ms). Make sure that the value is set to a bigger one than the value set for speed. Recommended value is 3000 ms.

showItems

Height allocated for this widget in terms of number of items. Value should be an integer one. Make sure you understand the basic difference between numposts and showItems.
Say for example the values of numposts and showItems are set to 10 and 3 respectively. Now look down to see how it works.



animation

A custom easing function for the animation.

mousePause

Behavior of animation on mouse over i.e. whether it would stop or not.

direction

Direction of scrolling. Value should be either up or down.

Now here goes the entire code


<style type="text/css">
  img.recent_thumb {padding:1px;width:70px;height:70px;border:1px solid #aaa;border-radius: 3px; float:right; margin:5px 0 5px 10px;}
  ul.recent_posts {float:right; width:100%; min-height:70px; margin:5px 0px 5px 0px; padding:0;}
  ul.recent_posts li {padding-bottom:5px; padding-top:5px; min-height:65px;}
  ul.recent_posts .header a {text-decoration:none; font:italic normal 19px PT Sans Narrow; color:#005; text-shadow:1px 1px 3px #fff;}
  ul.recent_posts .main {font:normal normal 16px PT Sans Narrow;}
  ul.recent_posts .footer, .recent_posts .footer a {font:italic normal 14px PT Sans Narrow; color:#1414ff;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script style='text/javascript' src='https://all-js-files.googlecode.com/files/jquery.vticker.js'></script>
<script style='text/javascript' src="https://all-js-files.googlecode.com/files/recent_posts_new.js"></script>
<script style='text/javascript'>
  var numposts = 10;
  var showpostthumbnails = true;
  var displaymore = true;
  var displayseparator = false;
  var showcommentnum = true;
  var showpostdate = true;
  var showpostsummary = true;
  var numchars = 100;
  $(document).ready(function () {
    $('#sai').vTicker({
      speed: 500,
      pause: 3000,
      showItems: 3,
      animation: 'fade',
      mousePause: true,
      height: 0,
      direction: 'down'
    });
  });
</script>
<div id="sai">
 <script type="text/javascript" src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
</div>

7. Hit 'Save template'

If you have any questions on this, please let me know. Enjoy !