Add Colourful Popular Post Widget in Your Blog Latest Widget

Are you searching for a new colorful popular widget for the blogger!This article will surely add a new and colored popular post.The widget blogger provides with itself is not an advanced as this new poplar post widget is.Poplar post widget has many options to show the post of the recent popularity.You can choose 7 days most visited post grouping,monthly most visited grouping and all time most visited grouping.
By default there are two options in the Popular Post widget -

1. Show Snippet-This feature show few lines of the post along with the title of the post.This should be enabled in case you have enabled the next options also otherwise it does not look good.
2. Show Thumbnail-Thumbnail is the small/miniature image that is present inside the post.This is also another SEO tool as it increases the HTML Vs. Text ratio. 

This new popular post widget uses some CSS and the code of the popular widget is changed .I  implemented it here in the sidebar and you can see the demo  on the right hand side.When you completely implement it ,you can see the widget in the page elements in the Design as your old popular widget but actually it will be a old widget with new looks.Confused? Don`t worry
If I am not wrong this is a widget of the wordpress.But in wordpress this widget also show the number of the visits to that post.But in the blogger you do not enjoy that feature.Many new templates are implementing this new popular post widget.Even I have seen this widget on some famous sites.

Why To Choose This Widget?

• This new post widget will definitely attract the visitors due to its color combination.It`s eye catching power is a main reason to use it.
• It gives your site/blog a more professional look.I was really fed up with the old boring style of popular post.Many bloggers have implemented the same and no one click on that due to fade look
• Easy To Use as you don`t need to look HTML code each time.You can easily change the settings from the page elements.

How to Implement This New Colourful Popular Post Widget

Bloggers can easily implement them by little knowledge about the HTML.Don`t worry I am here to help you.Here are the steps just follow each step.
Before you start adding the new widget , add the old Popular Widget That Blogger provide you.

1. Click on Add Gadget
2. Search of Popular Post Widget  and add that.
3. Choose the number of Post to 7 (you can show even less than but don`t add more than 7)
4. Click on Save Option

Now Follow The Below Steps To Add The New Widget:-

1. Open Your Blogger Dashboard ,Select your blog.
2. Click on template> Edit HTML > Proceed >Select Expand Widget template
3. After that search for the </Head>
4. Add the below code before </head> tag.
   
   <link href='http://dl.dropbox.com/u/50753886/updateviaz/Popularpost.css' rel='stylesheet' type='text/css'/>
   
   
5. After that search for <b:widget id=’PopularPost 
6. Select the whole content between   <b:widget id=’PopularPost   and </b:widget> (make sure you don`t add any other widget with it)
7. Change it with the below code.
   <b:widget id='PopularPosts3' locked='false' title='' type='PopularPosts'>
   <b:includable id='main'>                      
                                        <div id='sidebartitlewrapper'>
                                            <b:if cond='data:title'><h3><span><data:title/></span></h3></b:if>                                      
                                        </div>                                   
                                        <div class='sectioncont'>
                                            <ul class='mostpopular'>
                                                <script type='text/javascript'>
                                                    //<![CDATA[                                               
                                                    var i=0;
                                                    //]]>
                                                </script>
                                                <b:loop values='data:posts' var='post'>
                                                    <script type='text/javascript'>
                                                        //<![CDATA[                                               
                                                            document.write ('<li class="mostpopular_li color'+i+'">');
                                                            var i= i +1;
                                                        //]]>
                                                    </script>
                                                     <a class='barlinko' expr:href='data:post.href'><data:post.title/><data:post.id/></a>
                                                    <span style='display: inline-block;width:100%;'>
                                                        <span style='float: left;font-size:10px;color:#f5f5f5;'> </span>                                                      
                                                        <span class='cb'/>
                                                    </span>
                                                    <script type='text/javascript'>
                                                        //<![CDATA[                                               
                                                             document.write ('</li>');
                                                         //]]>
                                                    </script>                                          
                                                </b:loop>
                                            </ul>
                                        </div>                                   
                                        <b:include name='quickedit'/>
                                      </b:includable>
   </b:widget>

Press Save and Enjoy The New look of Popular Post widget. Now you have to just change the settings from the Layout> Popular Post Widget