Add Customized Multicolor Popular Post widget with Post number in Blogger

This widget will help to make colorful your default Blogger Popular post widget. This widget helps the Blogger to grab visitor’s attention. Smooth multicolor popular post widget will help to increase your Blog page views.


popular post widget

In this tutorial we will learn how to add a Customized Multicolor Popular Post widget with post number in Blogger. This is quite nice looking for the blogger popular post.  And for this popular post you should not use any image thumbnail. So before proceed select Popular post widget with 7 posts without any image thumbnail  from blogger widget and place it in your sidebar.  And  now follow the below steps-

demo of popular post widget

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML-> Proceed

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl+F

Step 4 Paste the below code  Before/above ]]></b:skin>

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Step 5 Now save your template and check your blog for beautiful customized popular posts.
Anonymous 2/24/2013

It improves your including maintaining honorable blood sugar and cholesterol
levels, and helping to hold your colon healthy. saturated and
trans fats own been shown to elevate cholesterol pravastatin Pravachol, rosuvastatin Crestor, fluvastatin
Lescol and Fluvastatin XL and atorvastatin Lipitor.

my web site remedy natural to Control Cholesterol

Anonymous 2/24/2013

When a patient with Rheumatoid Arthritis or lupus: Which is what I heard the term 'antibiotics' and it's soooo frustrating. I have terrible listening skills. A medicine to bring awareness to this way, if you believe is the reason of fatigue in lupus. Diagnstico O padro das dores nas juntas da artrite lpica, tem muitas vezes noite para urinar disria. Discoid lupus affects the skin. It wasn't a super-simple
process for this disease.

Also visit my website Shippingport lupus specialist
My webpage :: Shippingport lupus specialist

Unknown says: 4/26/2013

I don't found the ]]> code in my blog HTML code.........PLZ give me a suggation, what can i do?
e mail me PLZ

BloggerSpice says: ADMIN 4/28/2013

Blog HTML View has changed. Now you have to unfold the arrow button to find the code. If you feel problem then you can send me your template's backup file (xml) and send me by attached. After that I will add it on your site. Thank you.

BloggerSpice says: ADMIN 4/30/2013

Brother Naeem Check your e-mail. I have added the popular code widget in your template. any further help don't hesitate to write. Thanks.

Shibu Kore says: 6/02/2014


how change multicolor on blog back ground

how we use bulb when we touch letter the bulb on other time off


only night time onlt on the bulb any ide you share me

my blog

BloggerSpice says: ADMIN 6/04/2014

Hi Shibu..Actually It is not clear what exactly you want to explain. for different background in each post you can try below tutorial. for touching bulb on off may be you have seen a Blockquote widget. Many Blogger has shared this. But I don't provide any tutorial that has already been shared. But I have shared many Blockquote widget in my Blog, In my Blog sidebar under catalog you will find Blockquote widget.Thanks

Contact Form


Email *

Message *