Saturday, January 11, 2014

// // 5 comments

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

Customize Label Widget In Blogger With Beautiful Style CSS3

Just follow These Steps:

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

Customize Label Widget In Blogger With Beautiful Style CSS3

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.

5 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Amazing!!! I like this website so much it's really awesome. I have also gone through your other posts too and they are also very much appreciate able and I m just waiting for your next update to come as I like all your posts.
    Visit My Website:-http://www.longlifecare.net/blog-post-ko-chori-hone-se-kaise-roke/

    ReplyDelete
  3. Hi Tony! That is very Good One.

    ReplyDelete

Confused? Don't hesitate to ask We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows.

Note: Please do not spam. Those type of comments will be deleted upon our review.