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
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.
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}
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.
This comment has been removed by the author.
ReplyDeletesuper css label.. Nice
ReplyDeleteAmazing!!! 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.
ReplyDeleteVisit My Website:-http://www.longlifecare.net/blog-post-ko-chori-hone-se-kaise-roke/
Hi Tony! That is very Good One.
ReplyDeletethis one very helpfull. thanks sir
ReplyDelete