Popular posts is a widget provided by blogger which shows a list of most viewed posts from your blog.Recently we provide a hack about customizing blogger's official popular posts widget now using same trick we will customize popular posts widget with awesome style.The main part of this hack is you don't need to add any heavy JavaScript or any other scripts we will apply this hack with using only CSS.Also you can customize this widget with using blogger template designer.Let's go to the tutorial.

Multi Colored Popular Posts Widget Preview


Add Multi Colored Popular Posts Widget To Blogger?


  • Go to Blogger Dashboard > Design > Edit HTML.
  • Download/Backup your template.
  • Tick the Expand Widget Template check box
  • Now find for below code in your template.

/* Variable definitions
   ====================

  • Note - If you can't find above code in your template then please contact me I will reply back as soon as time allows.


  • Now paste below code just below/after above code.


<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>
</Group>


  • Now find for


]]></b:skin>



  • add below code just above ]]></b:skin>


#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}



  • Now find the following code


<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>



  • and delete it until you reach this tag.(Be very careful while deleting this code and to verify that you have deleted the code correctly see the preview of your changes you will notice that your popular posts widget is disappeared)


</b:widget>



  • After deleting the code paste below code in its place


<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <b:if cond='data:showThumbnails == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='http://4.bp.blogspot.com/-A6NQTW-MBZY/T37HVOov53I/AAAAAAAAAys/XLjZX6HrE50/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='http://4.bp.blogspot.com/-A6NQTW-MBZY/T37HVOov53I/AAAAAAAAAys/XLjZX6HrE50/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
</b:widget>


Widget Settings


  • Go to Blogger Dashboard > Design > Page Elements
  • Click on the EDIT link of Popular Posts widget
  • Select "display up to 7 posts".
  • Now Save the widget.

Customize


  • Go to Design > Template Designer
  • Advanced > Popular Posts Background
  • Now customize the widget as you wish and save your template.

Now go to your blog you will watch your brand new popular posts widget.

Post a Comment

  1. hi admin i dont find /* Variable definitions.I use thesis template and also vivist my site www.hackingworld.in..please reply me at sunilrajput760@gmail.com..thanx

    ReplyDelete
    Replies
    1. @Sunil Thakur - Please send me your template in .xml format I will fix it and send back to you.Use our contact form.

      Delete
  2. hi admin...can i send to you my template so you can fix it tq...

    ReplyDelete
    Replies
    1. Yes of course.Follow these steps...

      1. Download a copy of your template.
      2. Now open it with Notepad and save it as .txt file
      3. Upload/Attach it and send me...

      Delete
  3. @Ibnul Wardi - I have deleted your comment.Pls don't share your template publically...

    ReplyDelete
    Replies
    1. i'm so sorry...i had sent the template via yahoo mail

      Delete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. @Sunil - I got your template and never share your template with anyone.That's why I deleted your comment.

      Delete
  5. This comment has been removed by the author.

    ReplyDelete
  6. sorry bro send me my template at sunilrajput760@gmail.com........And thanx for helping me...you're awesome

    ReplyDelete
    Replies
    1. Why you are saying sorry ? Sorry to you bro. I have tries several times but I am getting this error every time.

      See this image - http://i.imgur.com/R0yc2.png

      There is a problem in this bloggermint template and this is not for first time I even got the same problem while installing this template on this blog.

      Delete
  7. No problem bro...you did your best.....Can u provide me any professional template to me.Please I want to add colour post widget in my popular posts

    ReplyDelete
    Replies
    1. Bro. you can check this template -

      http://www.helperblogger.com/2012/03/releasing-professional-my-blog-blogger.html

      It is a magazine style professional template also It is very easy to customize as you wish.I hope you will like it...

      Delete
  8. its nice and professional looking template...thanx Rahul bro....and bro is this template support multi coloured post widget

    ReplyDelete
    Replies
    1. I didn't checked it yet.But,I am sure this gadget will work on "my blog blogger template".

      Delete
  9. Please send me bro my mail is sunilrajput760@gmail.com.Please send me as soon as possible.Thnax

    ReplyDelete
  10. i can get template same like you?? it so simple but very beautiful :)

    ReplyDelete
  11. owhh yeahh tQ very2 much and by the way can you create tutorial like this but it have a counter view each entry name,

    ReplyDelete
  12. Hello Rahul Ippar..have you done fixing my template for this widget...i dont get reply from you about it..thank you

    ReplyDelete
  13. My email is naufal.alimi@yahoo.com

    ReplyDelete
    Replies
    1. I have tried several times but your template has so many errors.I am trying again...

      Delete
  14. Hey Rahul Bro thanx for giving us such a lovely template of your blog.Please can u tell me how can i customize blog's name on the top of the blog ???

    ReplyDelete
    Replies
    1. find this code image in your template

      http://4.bp.blogspot.com/_b0xJ7qk6DTc/THvRqkecH1I/AAAAAAAAA64/EgNa1OjtlQQ/s1600/logo.png

      and replace it with your own logo URL.

      Delete
  15. thnx bro......its great and nice template by the way have u facebook account ???

    ReplyDelete
  16. to difficult mr rahul I give u haha

    ReplyDelete
  17. thanks a lot dude.. see my blog now http://beauty-4-everyone.blogspot.com

    ReplyDelete
  18. very cool,,there is no problem to apply
    salam.... I am from Indonesia

    ReplyDelete
  19. hi.. i can't find .how use it,please..

    ReplyDelete
  20. oopss!! disappear..
    this code i can't find b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  21. hey help me plzz did u habe twitterrrrrrr pf FBBBBBB

    ReplyDelete
  22. Hi
    Nice blog Post
    I have Used This Code After Copying From Here
    Friends Check Out
    Pak India fashion styles Provides Updates On Fashion In Pakistan & India.
    http://pakindiafash.blogspot.com

    ReplyDelete
    Replies
    1. Hi..Where did you Grab that popular posts widget with thumbnails?..Please tell me...

      Delete
  23. Am having an error on installing tha variables and the css this is my site http://bookreviewbuz.blogspot.com

    ReplyDelete
    Replies
    1. Hi. Just delete the group tags in the first steps. i mean the line starts with <group and the last line /group. and the error will gone.

      Delete
  24. This comment has been removed by the author.

    ReplyDelete
  25. Attention everyone who gets error message while saving their template:

    In the first step:
    delete the opening and the closing group tags. Just paste the variable lines.

    Paste the code without these two lines and the error message will gone. And for the author: You don't have to use "group" code while you are defining variables. That's why everyone gets error.

    ReplyDelete
  26. Can you add codes for Thumbnails for this widget,please?I need it...

    ReplyDelete
  27. Excellent post Admin Very Nixe Widget Gr8 Thanks For Share With Us Multi colored random posts Widget for Blogger

    ReplyDelete
  28. This comment has been removed by the author.

    ReplyDelete
  29. my blog :www.cquek.com
    I followed the steps above but it says:We were unable to save your template.
    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message:
    Invalid variable declaration in page skin: The skin variables could not be parsed as they are not well-formed. Input:

    ReplyDelete
  30. thanks for sharing wonderful trick but when i applied this trick :"2" is not seen properly you can visit my blog at www.technospeciests2015.bogspot.com

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete
  32. thanks brother 4 sharing this valuable post....

    ReplyDelete
  33. I add new template but in this template there is image at homepage of my blog....how we remove that image

    ReplyDelete
  34. my blog name is newfeatureblog.blogspot.com please check

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top