Add Customized Colorful label in Blogger/Blogspot

Click Below Ad for Leaning Blogging Tricks.

Next Blogger Tricks

Hello Bloggers today i am going to show how to add customized Colorful label in Blogger/Blogspot this widget are very colorful and its better than the old label widgets in other words Default Blogger Labels this widget work on HTML and JavaScript and CSS once you can put this label widget then your blog are colorful it is very easiest method to set this labels on your blog  and its contain hover effect means when the mouse cursor on this labels then change the label colors . To add this customized Colorful label in Blogger/Blogspot follow this simple and easy steps.
How to add customized Colorful label in Blogger:-

• Go To Blogger Dashboard >>Layout
• Click on add a Gadget link
• Choose the "Labels" Widget
• Make setting like this image.

• Click on Save Button

It is the important part of this widget follow carefully:-

• Go to Blogger>>Template
• Click on Edit HTML
• Press keys (Ctrl+F) and find this code
• ]]></b:skin>
• Copy the following code before/above ]]></b:skin>

/* Colorful Cloud Label by www.softwayrko.blogspot.com.Com ---------------- */
.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  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;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
}
.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}

•  Click on Save Template
• Finish