Home Blogging Tips How to Add Stylish Multicolored Popular Posts Widget in Blogger Blog

How to Add Stylish Multicolored Popular Posts Widget in Blogger Blog

0
17
Recommended WordPress Hosting

If you have a blog on blogger platform then you know about widgets. There are many defaults widgets available in blogger dashboard. Widgets are used to increase the usability of your blog. Here in this post, I show you how to add stylish multicolored popular posts widget into your blogger blog where you want.

In all blogspot blogs, the popular posts widget is available and it can be easily display on almost every blogs whether it is on blogger or any other blogging platform.

add-multi-colored-popular-post

This stylish multicolor popular posts widget can display the posts which can get most views in the last 24 hours, last seven days, last month or any time which you set for it.

It is very important widget and it can be displayed on threee ways like title only display, display title with image or display the title, image and description as well.

How to Add Multicolor Popular Post Widget To Blogspot Blog

Step1- First of all go to www.blogger.com homepage.

blogger-homepage

Step2 – Log In to your blogger account and select your blog.

Step3 – Now go to the “Theme” option from left sidebar, and click on the “Edit HTML” button.

customize-blogger-theme

Before this: firstly backup your existing theme into your computer hard drive.

Step4 – Click any where and press CTRL + F to find out some tags.

open-blogger-search-box-ctrl+f

Step5 – Copy below code and paste in the search bar to find that particular line of code into your theme.

/* VARIABLE DEFINITIONS ====================

Step6 – Almost every blogger templates or theme have this tag, but if you doesn’t find it anywhere, don’t worry, just find the below tag.

<B:SKIN><![CDATA[/*———————————————– */

Step7 – Copy below piece of code and paste just after the above 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>

Step8 – Again search and find this tag.

]]></b:skin>

Step9 – Copy the below code and paste it just above this tag.

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

Step10 – Now find this line of code into your theme by pressing CTRL + F.

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

Step11 – Delete this code until you reach the following line.

</b:widget>

Step12 – Now just copy the below code and paste it in its place where you deleted above 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=’http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/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=’http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/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>

Step13 – Save your blogger theme.

Now you’ve done your work, now you can use your default popular post widget into your blog any where you want and check the stylish multicolored effects on it.

Setting of Your Popular Post Widget:

Now you can simply go to your Layout option, click on the Link Popular post widget, and select the display only 5 posts and save your theme.

Enjoy the Multicolor Stylish Popular Post Widget live on your Blog!!!

If you’ve any question related to this post, don’t worry and feel free to comment below and mention your problem. Thanks

Load More Related Articles
Load More By Aamir Saleem Ansari
Load More In Blogging Tips

Leave a Reply

Your email address will not be published. Required fields are marked *