Customize Label Widget In Blogger With Beautiful Style CSS3

Today i am going to share how to customize label widget in blogger with beautiful style.

You may also read my previous articles to make your blogger stylify.

Read This: Multi colored random posts Widget for Blogger

Read This: Add Multipul Related Post Widget & LinkWithin For Blogger

Just follow These Steps:

• Go To Blogger >> Layout >> Add a Gadget
• Choose "Labels" Widget.
• Make Settings Like The Below Image & "Save" It.

Now the widget has been added into the blog and let's customize the label cloud widget.

Step 2. Customizing Labels Cloud Widget

• Go To Blogger >> Template >> Backup Your Template
• Click Edit HTMl and Find For ]]></b:skin>
• Copy and Paste The Following Code Above ]]></b:skin>

/* Flat UI Labels Cloud By Www.Tonyisright.blogspot.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}

You have done.

Final Words

Now you have done i you enjoy this article please share this with your friends and stay tuned more interesting articles ae waiting for you if you need any help please feel free to contact us or leave a comment below will reply will be highly appreciate thanks.

Read More