Installing the Cloud Colorful Labels

Installing the Cloud Colorful Labels

Installing the Cloud Colorful Labels




Here's how
the installation

NoteRemove the CSS code for the label in the template


First you should add a label widget in blog 

Go to BloggerLayout> Add GadgetThen add the widget label and follow the settings according to the imagebelow



Colorful Labels

Then Save


Next, go to TemplateEdit HTMLThen paste the CSS code below just above]]> <bskin> 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.


Post a Comment

Thank for feedback u

 
Top