 |
How to Add Multi-Colored Popular Posts Widget in Blogger? |
Popular posts widget is default widget in blogger which shows the most popular posts in widget area. Widget includes popular posts of a Week, Month, Year or all Time. It is up to you which option you select for your popular posts widget.
In this article I will show you a method to customize blogger popular posts widget to change widget into multi-colored popular posts widget.
Popular Posts Widget can be displayed into 4 ways.
- Display with Post Title Only.
- Display with Post Title, Image Thumbnails and Snippets.
- Display with Post Title, Image Thumbnails.
- Display with Post Title, Snippets.
How to Add Multi-Colored Popular Posts Widget in Blogger?
- Login Blogger Account.
- Go to Template > Edit HTML.
- Search for the following text.
Variable definitions
- If you can't find that code then you can search the below code.
<b:skin><![CDATA[/*
- This should end up with
----------------------------------------------- */
- Add the following code below/after "<b:skin><![CDATA[/* "
<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>
- Now search for the following code.
]]></b:skin>
- Add the following code above/before the searched 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}
- Now search the following code.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
- Delete the complete widget till "</b:widget>"
Important Note: You should be aware while deleting the code. I recommend you to make backup of your template before editing.
- After deleting the code paste the below code at the same 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 == "false"'>
<b:if cond='data:showSnippets == "false"'>
<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 == "false"'>
<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/AVvXsEhs7ckZswVpV5duDws9jUSQsviiM-Ei5jrYybSQU6iqqh_rgdJ3vn93MfcNqR-TvuuYt7OIGJNGa0guh34VpwKYfAbpQnr_YXzYmLn7XpeYfFCMuc3H1-GfQzIz5H1jrt_Rf_aJYtgjLlo/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/AVvXsEhs7ckZswVpV5duDws9jUSQsviiM-Ei5jrYybSQU6iqqh_rgdJ3vn93MfcNqR-TvuuYt7OIGJNGa0guh34VpwKYfAbpQnr_YXzYmLn7XpeYfFCMuc3H1-GfQzIz5H1jrt_Rf_aJYtgjLlo/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>
- Save template.
- Done!
Multi-Colored Popular Posts Widget Settings:
- Go to Layout.
- Click on "Edit" link of popualr posts widget.
- Select the Settings which suits you the best.
- Go to Template.
- Cick Customize and then Advanced Tab.
- You will found there "PopularPostsBackground" title from where you can select any color you want.