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

]]></b:skin>

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

/******Color label widget by www.blogtariff.com.com****/
    <div>.sidebar .label-size {
      position:relative; text-transform:uppercase;
      text-decoration:none;
      font-size:13px; font-family:Arial;
      color:#fff!important;}
    .sidebar .label-size a {
      color:#fff!important;
      font-weight:bold;
      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="http://www.blogtariff.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
/******Color label widget by www.blogtariff.com.com*********/

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