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.

7
data:blog.title

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>

/*---. www.bloggerspice.com  POPULAR WIDGET STYLE STARTS HERE---*/
#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}
/*---www.bloggerspice.com POPULAR WIDGET STYLE ENDS HERE---*/

Step 5 Now save your template and check your blog for beautiful customized popular posts.
Add Customized Multicolor Popular Post widget with Post number in Blogger
4 Stars stars - "Add Customized Multicolor Popular Post widget with Post number in Blogger " In this tutorial we will learn how to add a Customized Multicolor Popular Post widget wit...
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

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

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.

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.

sir

how change multicolor on blog back ground

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

or

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

my blog

http://thagavalurimaisattam.blogspot.in/

Hi Shibu..Actually It is not clear what exactly you want to explain. for different background in each post you can try below tutorial. http://www.bloggerspice.com/2013/08/random-background-color-for-every-blog.html 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

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *