Add Multi-Colored Popular Posts to Blogger

Popular Posts is a widget provided by Blogger that displays the most visited posts on the blog from the last 7 days, last month or all time. There are three ways to display it:

1. Display only post title
2. Display title with image thumbnails and snippets
3. Display post title with image thumbnail
4. Display title with snippets.

To customize this multi-colored popular posts widget, we have to add new variables and some CSS codes to our Blogger template. So let's begin adding it...

How to add multi-colored popular posts to Blogger

popular posts widget, blogger gadgets
Step 1. Login to your Blogger Dashboard, go to "Template" and hit the "Edit HTML" button.

popular posts widget, blogger widgets

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the editor' search box.

Step 3. Search for the following text:

Variable definitions

Note: If you can't find it, paste it below the autor information that is usually below this tag:

 <b:skin><![CDATA[/* 

...and should end up with a similar line:

----------------------------------------------- */

Step 4. Copy and paste just below/after this tag the next 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"/>
</Group>

Step 5. Now that we added the variables to allow us changing the colors, search for the following tag:

]]></b:skin>

Step 6. Just above/before it, add this code:

#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: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{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}

Step 7. Now find the following code:

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

Step 8. Delete it until you see this tag (delete the </b:widget> tag as well):

</b:widget>

Note: Be very careful when removing it. The entire fragment of code should look like this:

<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;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Step 9. After you have deleted the above code, paste the following 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGBdmpjRq1ol-qFBcYnIv9c9GTo_1uMo3cl9YzVSjc_YPZ_jicsZkRjA20vAPz9rN5aX2T-t3d5Q3vVTmtZDCBEwaNmlIwbkHf7-8s2c-CXCC3oOMIWUrO6M7Net5egZilhYB8qiec2GI/s1600/default.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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGBdmpjRq1ol-qFBcYnIv9c9GTo_1uMo3cl9YzVSjc_YPZ_jicsZkRjA20vAPz9rN5aX2T-t3d5Q3vVTmtZDCBEwaNmlIwbkHf7-8s2c-CXCC3oOMIWUrO6M7Net5egZilhYB8qiec2GI/s1600/default.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>

Step 10. To save the widget, click the 'Save template' button.

Multi-colored Popular Posts Settings

- Go back to Layout and click the "edit" link on the Popular Posts widget.

Select to "display up to 5 posts", then Save the widget.


- You can easily change the background color of the popular posts widget by going to "Template", click the Customize" button and go to the "Advanced" tab. There you should find the "PopularPostsBackground" title from where you can select any color you want.


You're done!

If you enjoy reading this blog, please like & subscribe for more tutorials. For any questions or suggestions, leave a comment below.

34 comments:

  1. Nice blog, def my favourite. Thanks for help!

    ReplyDelete
  2. Yeah 100% Great Blog... I've learned something too.....

    ReplyDelete
  3. doesn't display very well on my home pages but it display well in post pages why?

    ReplyDelete
  4. Help me, i can't find this code .. why ?

    ReplyDelete
    Replies
    1. Hi Laurie, please tell me what code you can't find and i'll try to help you. Thanks for visiting!

      Delete
  5. hi

    i cannot find the /* Variable definitions

    i have already checked the "expand widget templates"

    please help. tq

    ReplyDelete
    Replies
    1. Then you have to paste it under blogger template description which is usually after <![CDATA[/* and it ends with and astericks and a slash (*/)

      Sorry for the late answer!

      Delete
  6. You are awesome..every single thing worked.

    ReplyDelete
  7. Hi everything worked great! Just can't seem to change the colors? I can change it in the Template Designer but it doesn't actually change in the blog. Any reason?

    ReplyDelete
    Replies
    1. Hi Chelsey,

      Sorry for the late answer. You have to press the "Apply to blog" button, have you did so?

      Delete
    2. Same here, colours don't work! I can change them, but they stay white. Neither original code colours show up! Do I really have to have troubles with every single code I try to install???

      Delete
  8. Yes same questions, Please help! It looks like a rainbow on steroids. Love the shades of grey on yours!

    ReplyDelete
    Replies
    1. Hey Jessica,

      You have to save the changes by pressing the "Apply to blog" button on the right corner. If it doesn't work, please write me back. Thanks!

      Delete
  9. Hi, it didn't work :( It also doesn't show the 'edit' tools in the corner... Any other suggestion?

    ReplyDelete
  10. when i've already followed all the steps, i use Preview to make sure it is safe. but it display error 500.

    ReplyDelete
    Replies
    1. The same happened to me. I tried to paste the codes below and after the searched ones, but it doesn't matter.

      Delete
  11. CAN I SHARE THIS ON MY BLOG??????

    ReplyDelete
  12. Hi, i need some help here..i stuck at step 5, i couldnt find the below code,



    please help me, i really love this widget! :(

    ReplyDelete
  13. finally something to try about. i use this script and match perfectly with my blog template.

    ReplyDelete
  14. Error parsing XML, line 3094, column 3: The element type "b:widget" must be terminated by the matching end-tag "".
    I have added the gdget as you instructed but i have faced with this problem.......

    ReplyDelete
  15. Half of my background disappeared! I can't find the code that is causing this...help?

    ReplyDelete
  16. what if i find /* Variable definitions,where do i put the code?

    ReplyDelete
  17. Bingo...it worked,you're a star..thank you sooooooo much

    here is my blog,have a look http://clicksomemore.blogspot.com/

    ReplyDelete
  18. Works fine for my another blogspot blog. Thanks

    ReplyDelete
  19. first of all plz admin tell me where can i find expand widget template?
    there is no option of it in my blog!

    ReplyDelete
  20. Hi there!!!

    nice tips you got here, I aplied this particular, but seems that backgrounds for mobile devices are removed somehow... quite weird, the normal version of the blog works normally though.

    Do you have any tip for fixing that issue?
    Thanks in advance, and for this great blog!

    ReplyDelete
  21. Nice post. I applied all the codes correctly but unable to see any impact of background color of my popular post. My blog site is http://www.linksglobally.com, visit it and suggest the solution. Thanks

    ReplyDelete
  22. OK. But not apear thumbnail image ??

    ReplyDelete