Any Blogger blog can be easily customized but did you know that we can also customize the existing gadgets ? It becomes very easy to design gadgets on a blog with CSS and i love doing it. In this tutorial you will learn about adding heat meter style for popular post gadget.
In this tutorial you don't have to add any external HTML into a gadget. We will be applying CSS style on the default popular post widget in Blogger to give it a heat meter style with hover effect. Follow the steps below to continue to the tutorial.
Demo preview
In this tutorial you don't have to add any external HTML into a gadget. We will be applying CSS style on the default popular post widget in Blogger to give it a heat meter style with hover effect. Follow the steps below to continue to the tutorial.
Demo preview
1. Configure the Popular post widget
Before we put styles onto it, we have to configure the popular post widget for the style to be compatible with it. To do that that go to your Blogger Dashboard -> Layout -> Edit/Add Popular Post gadget -> And configure it like this
2. The CSS
CSS for this effect is very long. You don't need to edit or customize the CSS, it looks the best in what it is.But if you know what to do then you can try your hands on this. But before that follow the instruction and add this CSS to your template.
.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;}
Copy the CSS into your notepad or any word processing program.Note : This is a scroll box so make sure to copy the whole code.
3. Adding the CSS
Now it's time to add the CSS to your blogger template.Add from Template Designer : The easiest way is to add from the Template designer. To do that go to your Blogger Dashboard -> Template -> Customize -> Advanced -> Add CSS -> Paste the copied CSS in custom CSS box and preview, if it's okat then hit Apply to Blog.
Or add directly to Template : For a long CSS i recommend you adding the CSS directly to the Template. And to do that Go your Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Now use CTRL+F to find ]]></b:skin> and paste the copied CSS just above this tag. Preview the template and Save.
That's it ! Now see your Popular post gadget design, isn't it amazing ?
You tried but nothing happened ? Don't worry i am here to assist you, just provide your blog address in the comments and i will tell you what to do. Also comment if you loved this post and want to say thanks.
