Don't Miss

Multi-Colored Popular Posts widget for Blogger

By Zohaib Liaqat - No Comments
Popular posts widget Displays the most viewed posts of your blog. Blogger provides default blogger popular posts widget that only allows you to set the number of posts you want to show, most viewed pages of all time, 7 days or 30 days and what you want to show post title with image/snippet or both. But today in this tutorial we are going to share that how to customize your default blogger popular posts widget to a multi-colored popular posts.

Add Multi-Colored Popular Posts Widget to your Blog

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Click on Edit HTML and search (Ctrl + F) for the Following Tag

/* Variable definitions

Note: If you can't find it. paste it after the following tag :

<b:skin><![CDATA[

and it should end with the following tag

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

Step 3. Copy the Below code and Paste it just below/after the this tag

     <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 4. Now search (Ctrl + F) for the Following Tag

]]></b:skin>

Step 5. Copy the Below code and Paste it just above/before it

#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 6. Now search for the following code

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

Step 7. And delete it until you reach the following tag

</b:widget>

Note: Also delete the </b:widget> tag
Step 8. After you deleted the code, paste the following 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGrOU5UDIL5Gg8ry8TMROg8HNhNta3BpCULvk2UNlEot4bOi9XZj7Dmf1TRWSEarC9ciKpbnqOfiozS0Z0yNIeEEN8BDjz1NlapW7H0jy8XGRw5QL9Be2yUm3DP0EE5NAR9h5CDEJBTh8/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/AVvXsEgGrOU5UDIL5Gg8ry8TMROg8HNhNta3BpCULvk2UNlEot4bOi9XZj7Dmf1TRWSEarC9ciKpbnqOfiozS0Z0yNIeEEN8BDjz1NlapW7H0jy8XGRw5QL9Be2yUm3DP0EE5NAR9h5CDEJBTh8/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 9.  Hit the Save Template Button
Customization : Go to Layout >> Edit Popular Posts Widget >> select Display up to 5 Posts >> Hit the Save Button
And you're Done :)

From Editors Desk

I hope that you will like this image hover effect, Give us your Feedback and Enjoy Blogging !Feel Free to Ask. Your Feedback is always highly appreciated  - See more at: http://blogolect.blogspot.com/b/post-preview?token=_xfJSUMBAAA._QudqCLLg7WGzaDyI8xMBQ.Kx0AKv8MK84qcLnfGHzLMQ&postId=3783301090408238732&type=POST#sthash.PIEvAy4V.dpuf
I hope that you will like this widget, Give us your Feedback and Enjoy Blogging !
Feel Free to Ask. Your Feedback is always highly appreciated

Tags:

No Comment to " Multi-Colored Popular Posts widget for Blogger "