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
- How to create Responsive Multiple Content or Paragraph Column inside Blogger Posts?
Instead of changing more layouts or templates it’s better to spiceup blog with... - How to create/convert a Drop Down Menu for Blogger Label list Categories?
As everyone aware about Blogger label gadget/widget is a default sidebar... - Add Stylish Whatsapp Smileys/emotions to Your Blogger Posts and Comments
Social media network playing vital role on mobile platform where mobile users... - Add Labels Widget to show each label in different attractive colors for blogger blogs
Varieties of labels widgets are available online with simple, animated,... - Add 'Auto Scrolling Latest Posts News Ticker' widget to Your Blogger blog
Sometimes few plugins drags readers attention indirectly forces them to stay... - How Addthis Floating Share buttons widget maximize your visitors?
Social media sites plays a vital role in bringing huge traffic to... - Stylish Carousel Slider on Mouse Over to Blog/Websites
Most of the Carousel Sliders used for music, games and movies website or...
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.
Post a Comment Gmail ID Facebook
Do not Try to Add Spam Comments
EmoticonClick to see the code!
To insert emoticon you must added at least one space before the code.