Popular Post widget has been published by Blogger long time ago . A helpful widget that show the most viewed posts in blog . In this post ,I will show you how to style this widget ,add colors to this one to make it look nice and exciting :D


This post contain Blogger API code ,CSS and a little of Javascript ,so it will be easier if you are familiar to them . Please read my posts on Blogger API to understand Blogger API and it structure , the 'section'  and 'widget' code . If you are not sure on what is going on ,pls do backup template ,it will be helpful in case of any error .

Demo here

How to do it


1,Go to Dashboard ->Template - > Edit HTML

2,Add the CSS code right before ]]></b:skin>



3,In template ,choose the position where you want to insert this widget ,and then add the code

  <b:section id='sidebar' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' 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>
</b:section>

 Insert this code into sidebar as other script . Do not insert in other section element .For the question what 'section' is ,pls read this post

Save changes and go back to Dashboard .

4, Click on View blog to see the result . We need some work here
Click on the wrench icon in the right corner of widget

I marked it with a circle .
A dialog will display . Change the setting as picture bellow

Save settings .
That's all for this widget . Hope it works ^^

Share this post

Advertisement

25 comments

  1. hey awesm post bro.. :)
    but please help me out i want to add related post like option like you and i know too you must had posted it in your blog but m not getting it i've searched more than 10 times please let me know that link or tell me how to add related post help me out please :D
    waiting 4 ur reply

    ReplyDelete
  2. First I'd like to congratulate you for this awesome job.
    I can't make it work. I'm stuck at step 3. When I attempt to save the template an error shows up saying that the ID "sidebar" is already taken.
    Please help me. I tried to read the "sections" articles but I still don't understand.

    Regards!

    ReplyDelete
  3. two thumbs up, promise to share in my blog with indonesian language

    ReplyDelete
  4. Great,,,, Like Wordpress Popular Posts Widget...

    ReplyDelete
  5. nice tut,your best of the best...

    ReplyDelete
  6. I like the way you code, it's so simple but always effective.

    I also write many unique post on Blogger Items in English, but have no many readers as my target. Can you share some your tips to have a large number of fans for SimplexDesign?

    Thank so much.

    ReplyDelete
  7. @se7en : Sorry for this inconvenience . My blog has changed domain ,so blogger search can't index the older posts . Here are two link you can refer for related post :
    http://www.thesimplexdesign.com/2009/09/easiest-way-to-create-related-posts-for.html
    or
    http://www.thesimplexdesign.com/2010/03/make-thumbnail-for-related-posts.html

    @Cartero : Name of section must be unique ,if the name 'sidebar' has been taken ,you can try sidebar1 ,sidebar2 ...etc

    @Tien Nguyen : One thing I learned from blogging, number of visitors can't increased extremely in one night . If your posts are great, you followed all instruction for SEO ,and you try all way to SEO-off page (Comment in other blogs ,post in forums ...) ,but the number of visitor is still low ,pls wait. It took me 3 years to increase the number of subscriber from zero to 4000+ . Believe it or not ,the pageview for my blog in oneday is only 2000+ ,not a big number ,and income from my blog is less than 80$/month .
    I'm a lazy blogger,because I have a full-time work, so if you have more free time and passion ,you would get the better result (do more in SEO,blog posting ...)
    Btw,you can try blackhat methods :D you will be in fast track in short time . But I do not guarantee for the final result .
    Building a blog is not only for fast money (Adsense or other ad network) ,but also building a brandname in blogger sphere ,a real business,in my opinion ^^ I think it will be helpful in someway (not money at this time ^^).Keep blogging and sharing :d follow the passion and you will find the result ^^

    ReplyDelete
  8. An error on my blogging in last year is also from rushing black hat SEO. And I will never try again, never!

    Thank you very much, nhamngahanh. Your advises make my head become smart. I will do more and just patient.

    ReplyDelete
  9. Thanks for this wonderful post nhamngahanh!

    kind of MISS YOUR STUFFS :)

    Best Regards!

    ReplyDelete
  10. Nice post Thanks for sharing this information which is useful for all.

    php web development

    ReplyDelete
  11. Your post about widget, blogging tips and template always amazing Mr. @nhamngahanh
    This my first comment but not the first visit simplexdesign

    ReplyDelete
  12. Thanks for this tutorial. Really Nice Widget
    :-)

    ReplyDelete
  13. i need it. good widget for blogger :-)

    ReplyDelete
  14. NICE ONE...U R THE BEST BLOGGER...;-)

    ReplyDelete
  15. nice, before this only see at WP,
    now blogspot also can :)
    thx you

    ReplyDelete
  16. one more great blogger hack, thanks for share this

    ReplyDelete
  17. Good work, bad tutorial

    ReplyDelete
    Replies
    1. haha,thanks for your comment :D I'm trying to improve my writing skill :D it really hard to explain what to do in a tutorial for all readers ,and sometimes I am confuse when reading my posts :D It would be better if you can help :D

      Delete
  18. hi, great widget. but if u can add comments count, it will be more great. Anyway thanks for this widget. luv it

    ReplyDelete
  19. I am having a hard time understanding step 3. need help

    ReplyDelete
  20. I added the code given in step1 just before the script(]]>).
    Then I added the script given in step3 into one of sidebar position where I want it.. but oops it didn't work.. just little red color appears and no other thing is there:(

    ReplyDelete

Here are some rules for commenting on Simplex Design blog :
1, Search first ,then ask question. You will get the answer faster
2, All comments except spams are welcome.
3, Please make all requests in English.
4, Do not use generic titles such as Admin or Mod. This confuses readers