[Update] Make Stylish Popular Posts Widget or Gadget

importance of popular post gadget

blogger do not set widget by default but you can
easily add any widget from layout.. when you go
you layout , you can see add new gadget , click on
it and you see list of  all gadget and widget.. just 
select which you want to add. but by default blogger 
has some simple widget but you can make these gadget 
stylish , this help to design your blog and make it more
beautiful and attractive , also widget are very necessary 
in any blog this help to deal visitor your blog easy
and efficient.popular post widget are automatically
count the mostly visited pages of your blog and show
it to your blog. 

adding widgets in blogger

it is advised that  you should add popular  post widget 

step 1: first login to your account and select your 

blog .

step 2:as you can see  in picture . you have to go in 

layout.

step 3: click add gadget and pop up window open 

chose popular post widget from the list and you

completed the process. visit your blog and

see most visited pages are in popular post. and it looks 

awesome.

how to add  stylish popular post gadget

step4: first you have to copy the code given below 

#PopularPosts1 h2{ padding:7px 0 3px 0; width:100%; margin-bottom:10px; font-size:1.3em; text-indent:-12px; font-size:18px; text-align:center; color: #757575; /* Color of the widget's title */ } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:8px 0px 1px; left:-7px; width:290px; } #PopularPosts1 li{ position:relative; margin:0 0 10px 0; padding: 3px 2px 0 17px; left:-5px; width:285px; } #PopularPosts1 ul li{ background: #eee; position: relative; display: block; padding: .4em .2em .4em 2em; *padding: .2em; margin: .5em 0; background: #ddd; text-decoration: none; border-radius: .3em; transition: all .3s ease-out; } #PopularPosts1 ul li:before{ content: counter(li); counter-increment: li; position: absolute; top: 50%; margin: -1.3em; height: 2em; width: 2em; line-height: 2em; font-size: 15px; color: #fff; /* text color of numbers */ background: #FB8835; /* background color of numbers */ border: .2em solid #fff; /* border color */ -webkit-box-shadow: 0 8px 5px -7px #888; -moz-box-shadow: 0 8px 5px -7px #888; box-shadow: 0 8px 5px -7px #888; text-align: center; font-weight: bold; border-radius: 2em; position: absolute; left: 0; transition: all .3s ease-out; } #PopularPosts1 ul li:hover{ background: #eee; } #PopularPosts1 ul li:hover:before{ transform: rotate(360deg); } #PopularPosts1 ul li a{ font: 14px Georgia, serif; /* font size of post titles */ text-shadow: 0 -1px 2px #fff; color: #444; display:block; min-height:25px; text-decoration:none; text-transform: uppercase; } #PopularPosts1 ul li a:hover{ color: #444; }

step5 : go to the template and click customize and then 
choose advance as you can see in picture below

step 6 : paste the code that you have copied before and
click apply to blog. now visit your blog and see your stylish 
popular post gadget appear . 

Note:  if it is not working then go to template edit html
and press ctrl+f  inside code area and search for this code
]]></b:skin> and paste the code you have copied you may have to expand by pointing arrow on left side .

Share this post