[2] [Tech] [recent] [Latest Posts]

Pages On TechnoPcArea

Powered by Blogger.
if(getTitles) document.write('

Movies of The Week

Join This Site On Google Friend


Collection Of Posts

[5] [Gadgets] [slider-top-big] [Slider Top]
You are here: Home / Stylish Popular Posts Widget With Numbering For Blogger

Stylish Popular Posts Widget With Numbering For Blogger

| No comment
Stylish Popular Posts Widget With Numbering For Blogger

About The Widget

I was fed up of that completely boring popular posts widget which is provided default by blogger.It didn't even suits the look of blog ,so I modified it and tried to give it a pretty look.In this tutorial I will provide you the way to add the widget and get rid of the boring popular posts widget by blogger. The thing that I like most about the widget is that it is just modification of simple popular posts,so it doesn't involve any javascript,PHP or html5 use.And in short we can say that it has only 2% effect on your blog's loading time and that effect is of loading the images and description of widget.

Steps To Add It:-

  • Go to Layout tab of your blog
  • Click on Add A Gadget on the place where you want the widget to appear.Usually it's on the sidebar.
  •       Select Popular Posts from the list that appears
  • Customize the name and other features
  •       Click on Save button when you have done customizing
  • Now go to Template tab of your blog
  • Click on Edit Html button
  • Search for ]]></b:skin> and add the following code above it:-

/*--- Stylish Popular Posts By  http://technopcarea.blogspot.com--- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666;
.popular-posts ul li a:hover {

Final Words

This amazing widget maintains the loading speed of your blog and increases the attractiveness of your blog. We don't use it on our blog because there is a default styling done for popular posts on our blog which suits it,but it will surely be better then those simple default boring popular posts by blogger.