Home
Blogging

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.
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. 

popular post widget


So before proceeding select the Popular post widget with 7 posts without any image thumbnail from the 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 -> Theme ->  

Step 3 Click on the down arrow next to CUSTOMIZE button Edit HTML-> Proceed

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

Step 5 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 6 Now save your template and check your blog for beautiful customized popular posts.

7 comments

  1. 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
  2. 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
  3. 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.
  4. 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.
  5. 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
Go Up