Improving the presence of blog like getting awesomeness and proficiency to blog templates and themes is always best. Because there are some causes for this like receiving approval from big advertising corporations such as Google Adsense and BuySellAds. There are many professional templates on the internet which we can use but it might not have uniqueness because they're made for public and everyone can use that. After theme or template, it's also important to have skilled widgets such as Labels or Tags widget, Popular Posts widget, Related Posts etc. If you're sufficient smart in web designing then you can easily take professionalism to your widgets but if not then there are also already ready amazing widgets for you on the internet. I've custom-made label cloud widget for blogger and below I'm going to share it with all.
Step 1. Adding Labels Cloud Widget
- Go To Blogger >> Layout >> Add a Gadget
- Choose "Labels" Widget.
- Make Settings Like The Below Image & "Save" It.
Cloud lable widget has been added to your blog now add some customized css code in blogger template.
Step 2. Customizing Labels Cloud Widget
Now save your template.
You are done :)
Final Words
- 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.CoolBloggerTricks.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}
Now save your template.
You are done :)
Final Words
So this is customized cloud lable, I hape that you'll like it and use it to your blog.
0 comments:
Post a Comment