by

Installing the Cloud Colorful Labels

image_pdfimage_print

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.

image_pdfimage_print

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *