Installing the Cloud Colorful Labels

I

As we know, the default blogger label cloud us quite boring and plain white with black text. Well here I am going to try to change  to be a colorful and fresh look.

How to Installing the Cloud Colorful Labels

Here’s how the installation:

Note: Remove the CSS code for the label in the template.

First you should add a label widget in blog

Go to Blogger> Layout> Add Gadget> Then add the widget label and follow the settings according to the image below

 

Colorful Labels

Then Save.

Next, go to Template> Edit HTML> Then paste the CSS code below just above]]> </ b: skin> or </ style> 

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

Save Template and see the final results. Quite so and hopefully useful.

About the author

domdom rung

1 comment

By domdom rung

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Categories

Recent Posts

Recent Comments

Archives