Amazing Blogger Tricks

Popular posts widget is the most essential part that every blog should have because of its unique feature of displaying the most viewed and highly rated posts on the blog. Popular posts widget plays an important role in bringing more viewers as it provides the highly rated and most viewed posts a click away instead of searching all the blog posts to identify them. This widget guides visitors to the most popular posts of the blog and makes their search easier in identifying the best posts of the blog.

How do you get your blog traffic increased with Popular posts widget?
Popular posts widget plays a vital role in Blogger to increase traffic to your blog. Lets us see how it does. By having a popular posts widget on the blog will provide the best posts of the blog a click away for the visitors. And if the posts are so interesting then we can expect a lot of traffic to the blog posts. Once the best posts get more traffic, all of them will get indexed by Google which will increase the traffic to the blog as a whole.

Blogger provides Popular posts widget for all the blogs created on blogger. The widget provided by blogger is very basic and not much attractive. So, it's always better to have a nice looking popular posts widget. The stylish widgets always makes a difference to the blog.

Lets us see the process of adding Popular posts widget to Blogger.

Adding a basic Popular posts widget provided by Blogger
=========================================
1. Go to: Dashboard -> Layout -> Add Gadget -> Popular Posts

2. Select the options from the sections "Most Viewed" and "Show"

Most Viewed -> will determine from where the popular posts should be picked for display.
Show -> will determine what to display in the widget area.

3. Save the gadget and move it to the required position on blogger Layout.

4. View blog to see the popular post added to the blog.

Yes, It's done! The basic Popular posts widget (i.e provided by Blogger) is successfully added to the blog.

=========================================================
The Popular posts widget provided by Blogger is basic and not so attractive. So Let us see the process of adding some CSS code to the blog Template which makes the basic Popular Posts widget added above look beautiful.

I have discussed few types of Stylish Popular Posts widgets below.

Widget Code - for Popular Posts widget with Rounded Thumbnails and Circular Images

1. Go to: Dashboard -> Template -> Edit HTML
2. Search for the code ]]></b:skin>
3. Paste the below code just before ]]></b:skin>
4. Save and View blog to see the basic Popular Posts widget become stylish.

Widget Code - for Popular Posts widget with Multiple Colours

.sidebar .PopularPosts .widget-content ul li{
height: 100%;

line-height: 22px;

float: left;
clear: left;
list-style-type: none;
overflow: hidden;
color: gray;
}
.sidebar .PopularPosts .widget-content ul{margin:0;padding:5px 0;list-style-type:none;}
.sidebar .PopularPosts .widget-content ul li{position:relative;margin:5px 0;border:0;padding:10px;opacity:0.8;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;}
.sidebar .PopularPosts .widget-content ul li:hover {border-radius:30px 0px 0px 0px;margin-left:10px;opacity:1.0}
.sidebar .PopularPosts .widget-content ul li:first-child {background:#ff4c54;width:90%}
.sidebar .PopularPosts .widget-content ul li:first-child:after{content:"1"}
.sidebar .PopularPosts .widget-content ul li:first-child + li{background:#ff764c;width:80%}
.sidebar .PopularPosts .widget-content ul li:first-child + li:after{content:"2"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li{background:#ffde4c;width:70%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after{content:"3"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li{background:#c7f25f;width:60%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"4"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#33c9f7;width:40%;padding-right:20px;}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"5"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:30%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after{content:"6"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:20%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{content:"7"}
.sidebar .PopularPosts .widget-content ul li:first-child:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:15px;right:-5px;border-radius:9%;background:#353535;width:30px;height:40px;line-height:1em;text-align:center;font-size:22px;color:#fff;}
.sidebar .PopularPosts .widget-content ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:30px;height:90px}
.sidebar .PopularPosts .widget-content ul li a{font-size:12px;font-weight:bold;color:white;text-decoration:none;text-shadow:0px 0px 6px white;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;
}
.sidebar .PopularPosts .widget-content ul li a:hover{color:black;text-decoration:none;text-shadow:1px 1px 1px white;}

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.