Attractive popular post widget for blogger 2014.

What is Popular post widget?

It is a widget of blogger which is appears mostly right side of your blogger or website home page. Popular post widget shows your popular post in the blog or website.So, today I am gonna show you how to add a smart popular post widget in your blog. So, just follow this simple steps given below with picture.


1.    First of all log in to your blog. Click on layout tab of your blog As shown in the below picture.

2.     Now click on add a gadget on the place where you want to display the popular post widget. After that many widget will display you just click on Popular post shown in the below picture.

3.     Now set your popular post widget like how many popular post you want show and Post title, Thumbnail and snippet etc. and finally click on save button.

4.     After that Back to your blogger dashboard. Click click on Template tab And a new page will open just click on edit html as shown in the below picture.

5.     Now search the code ]]></b:skin> and past the above code just before it

<style type="text/css"> .popular-posts ul li a { background: none repeat scroll 0 0 #222222; color: #FFFFFF; display: block; margin: 10px 0; padding: 25px 15px 30px; position: relative; text-decoration: none; transition: all 0.3s ease-out 0s; width: 85%; } .popular-posts ul li a:before { background: none repeat scroll 0 0 #2DB3E9; color: #FFFFFF; font-weight: 700; height: 2em; line-height: 2em; margin-left: 88%; padding: 4px; position: absolute; text-align: center; width: 2em; transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; } .popular-posts ul li a:hover { opacity: 0.8; } .popular-posts ul li a:hover:before { border-left-color: #CCCCCC; left: -1px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before { content: "10"; } .popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before { content: "9"; } .popular-posts ul li:first-child + li + li + li + li + li + li + li a:before { content: "8"; } .popular-posts ul li:first-child + li + li + li + li + li + li a:before { content: "7"; } .popular-posts ul li:first-child + li + li + li + li + li a:before { content: "6"; } .popular-posts ul li:first-child + li + li + li + li a:before { content: "5"; } .popular-posts ul li:first-child + li + li + li a:before { content: "4"; } .popular-posts ul li:first-child + li + li a:before { content: "3"; } .popular-posts ul li:first-child + li a:before { content: "2"; } .popular-posts ul li:first-child a:before { content: "1"; } .item-snippet { display: none; } .PopularPosts .item-thumbnail { display: none; }

+