Customized Label Cloud Widget For Blogger

Blogger labels are used for specifying categories of the posts.By using these labels widget in your blog you can differentiate among different types of posts by creating a label.Default blogger labels are not styled well. But don`t worry these blogger labels can be easily customized using a small CSS code In this post.

Customizing Blogger Label Cloud

• Log in to your blogger Dashboard
• Select your Blog
• Select Template Option And click on Edit HTML
• Now search (Ctrl + F) For ]]></b:skin>
• Now Copy (Ctrl + C) the below code and Paste (Ctrl + V) it just above/before ]]></b:skin>

.label-size{
 margin:0;
 padding:0;
 position:relative;
 }
 .label-size a{
text-decoration:none;
 float:left;
 height:18px;
 line-height:18px;
 position:relative;
 margin-bottom: 9px;
 margin-left:10px;
 padding:10px;
  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(top, #eeeeee, #cccccc);
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #333;
  font: bold 12px verdana;
    text-align: center;
  text-shadow: 0 1px 0 #eee;
  }
  .label-size a:hover {
    background-color: #dddddd;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(top, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
        text-shadow: 0 1px 0 #ddd; }
  button.clean-gray:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; }

Enjoy Your New Customized Labels Cloud...
If you face any problem adding this widget in your blog, you can comment here.

---> Do you enjoy this article? Share it with friends/followers and subscribe to this blog now, for you to stay updated with our latest post.

Share This:

Tags:

Widgets

• Prevoius
• Next