Join Our 1500+ Community Readers

We hate spam as much as you!

Add Labels Widget to show each label in different attractive colors for blogger blogs

Varieties of labels widgets are available online with simple, animated, single colors etc. but visitors when visits any blog/website attracts with arrangement of widget and their customization.
Most the webmasters are aware of that and every time they try to show something different to their subscribers presenting professionalism. Here in this tutorial we educate you about how to convert your labels widget to show in different attractive colors for each label. Let’s begin tutorials for adding this simple code, webmaster don’t work hard for adding this code to their blog/website just follow our step by step procedure.

Step 1
Sign into your blogger account
From Blogger dash board select ‘Layout’ link and proceed
Note: Before you implement this on your blog/website just backup your template, if anything goes wrong you can reuse it again.
Click on ‘Add a Gadget’ link tab and select ‘Labels’ widget and Save your template
Browse More Related Posts
More News...
Step 2
Select to click on ‘Template’ link
Click on ‘Edit HTML’ link tab
Now search for tag

After find this tag copy the below code and paste above to it

/******Color label widget by****/
    <div>.sidebar .label-size {
      position:relative; text-transform:uppercase;
      font-size:13px; font-family:Arial;
    .sidebar .label-size a {
      padding:8px 10px;
      margin:0 6px 6px 0; float:left;display:block;
      transition: all 0.4s ease-in-out;}
    .sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
    .sidebar .label-size-1 a:hover {background:#16a085;}
    .sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
    .sidebar .label-size-2 a:hover {background:#2980b9;}
    .sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
    .sidebar .label-size-3 a:hover {background:#27ae60}
    .sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
    .sidebar .label-size-4 a:hover {background:#8e44ad}
    .sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
    .sidebar .label-size-5 a:hover {background:#c0392b}
<div class="separator" style="clear: both; text-align: center;"><a href="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
/******Color label widget by*********/

After successful adding the above code, Click on ‘Save template’
Now preview your template to watch experiment.
That’s it you’ve done.

    You May also Like Trending Posts


PRIYA PATEL on September 1, 2014 at 12:15 AM said...


earn money online in india

auto msg in facebook all friends wall

how to post all facebook friends wall

auto facebook group poster script

auto facebook group poster script


Post a Comment

About Me

My Photo
Krishi Omli
Dedicated blogger - Always endeavor to know new things and share with others.
View my complete profile

Money Tariff

All Your Tech Needs

How to Help us?

If you feel our blogging Tutorials helped to you, then help us to spread our voice by using the below badge:-


Try a Back Links

Total Pageviews

| Blog Tariff | Blogger Tricks | Blogging Tips | SEO | Earn Money | Blogger Templates © 2009. All Rights Reserved | Template Style by Blog Tariff .com | Design by Brian Gardner | Back To Top |