How to add Multi Colored Popular Posts Widget to Blogger

Popular posts widgets shows the most visited posts (up to 10 posts) of all times, last 7 days or last months. In widgets there are 3 modes to display the posts 1. Display only post title 2. Title with image thumbnail 3. Title with posts snippet. Generally its background is white. If you want to change its background with multi colors then you have to add new variable and css codes to your blog template. Today i am going to show you how to add this multi colored popular posts to blogger. Let's start.

• How to Create a Social Content Locker in Blogger Blog

Add Multi Colored Popular Posts Widget In Blogger

• Step 1 - Sign in to blogger -> Template -> Edit html . Now press Ctrl+F and search it.

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

• Step 2 - Now copy and paste the below code just after '/* Variable definition' .

<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 3 - Now again press Ctrl+F and search for

]]></b:skin

• Step 4 - Now paste the following 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: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 5 - Now you have to replace the exists 'popular post widget's code' . To find it press Ctrl+F again and searh for 'widget id='PopularPosts1' and just delete the following line.

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

 And replace it with this code.

<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/AVvXsEinrlN1nXKZu63gWZQqz2LPIJGfWLRI4CH_igdrfiMA5EcnbTuOKnH1nGnLh8S8grT7CSoarUfMm25S6mbT3gEBLp1qqWmvnebY5bflllzX86mhAi7-SeOEaql0rGhv8_PJQwFOtGG1Drk/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/AVvXsEinrlN1nXKZu63gWZQqz2LPIJGfWLRI4CH_igdrfiMA5EcnbTuOKnH1nGnLh8S8grT7CSoarUfMm25S6mbT3gEBLp1qqWmvnebY5bflllzX86mhAi7-SeOEaql0rGhv8_PJQwFOtGG1Drk/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> <div style="font-size: 10px; float: right;"><a href="http://www.itsatblogger.com/2015/11/add-multi-colored-popular-posts-widget.html" rel="nofollow">Multi Colored Popular Posts Widget</a></div>
  </b:includable>
</b:widget>

• Step 6 - Save template. Now go to 'Layout' and 'Add popular post widget' if it already exist then simply edit the setting and set display maximum posts to 5. Then Save it.

• Step 7 - If you want to change the color then go to Template -> Customize -> Advance -> Popular posts -> Select colors as you want -> Apply to blog.

Your'e done. Now go to you website add see the effect. 

That's all for today's article. Hope you have enjoyed and done everything rightly. If you are still facing any problem please comment below. If you like this article please support me by sharing and subscribe. Happy blogging.