Make your label widget in blogger look stylish

Website design has always been a great
challenge for bloggers. We spend hours and
hours for searching a perfect template and on
its design. Okay, say you found a perfect
template, but remember not any template is
perfect, you've to make customizations. After
you found a template, now its time to add
some important widgets, such as a popular
posts widget, subscription boxes, label cloud,
etc. After adding all these widgets, it's
important to give them a professional look. If
you're a web designer then you can easily
customize them, but if not, then don't worry
there are hundreds of tutorials available on the
internet. So, today in this article we'll show
you that how to customize labels cloud widget
in blogger. Label Cloud is a widget provided by
blogger, which is used to display labels on
your blog. Simply labels are tags or categories
which we use for categorizing our posts under
different groups. You can easily customize
Label cloud widget using CSS. Today when I
came to update Blogolect, I thought to share
something new and I started customizing my
label cloud widget on a demo blog. After
making some customizations, I created a new
labels design using some simple CSS codes and
transitions too. This widget shows a beautiful
and smooth transition on hover and I hope this
widget will give a professional look to your
blog.
First and foremost log in to your Blogger
Account and go to Template >> Click Edit
HTML >> Click inside the code area, use Ctrl
+F and search for the ]]></b:skin> tag
Now copy(Ctrl+C) the below code and paste
(Ctrl+V) it just above/before the ]]></b:skin>
tag
/*--- Custom Label Cloud With CSS3 By
Blogolect.com --- */
.Label a{
background:#000;
padding:0 20px;
color:#fff!important;
height:32px;
font-size:14px;
text-transform:uppercase;
text-decoration:none;
line-height:32px;
padding-left:20px;
float:left;
border:none !important;
margin-left:5px;
margin-top:5px;
-webkit-transition:all .4s ease-in-out;-moz-
transition:all .4s ease-in-out;-ms-
transition:all .4s ease-in-out;-o-
transition:all .4s ease-in-out;transition:all .4s
ease-in-out;
}
.Label a:hover{
color:#000 !important;
background:#00cc00; }
/*--- Custom Label Cloud With CSS3 By
Blogolect.com --- */
Hit the Save Template button and you're
done!
Congratulations: You've successfully
customized your label cloud widget in blogger.

FROM THE AUTHORS DESK:
Feel free to drop your commenys and dont forget to subscribe to us via email.

Posted by Kaesy Nwosu on Friday, October 24, 2014 - Rating: 4.5

Title : Make your label widget in blogger look stylish
Description : Website design has always been a great challenge for bloggers. We spend hours and hours for searching a perfect template and on its desig...

Tweet