Label Widget Style for Blogger

label blogger
Labels are a nice way to organize your content on the blog. It makes grouping posts easier and gives your blog a more systematic look. The default Label gadget provided by Blogger has some customization options but doesn't provide much control over the Design aspect. Today I will by sharing a CSS3 powered design for the Default Label gadget. I came across them on WebDesignTuts+ and thought that a similar style for Blogger Labels would also look pretty amazing. 


Before you get started make sure that your Blog has the Label Widget present already and set the Display option to Cloud. 

Demo

Tagtastic Tag Cloud 

label style blogger


This design by Luke Spoor has some clever use of CSS3 transformations and :before & :after selectors. For the backgrounds it uses CSS Gradients. 


 To add this Label Style to your blog, you can use the one click installer


Or you can add it manually

To do that just add the following CSS to your Blog 
.label-size {
    float:left;
    margin:0 0 7px 20px;
    position:relative;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:0.75em;
    font-weight:bold;
    text-decoration:none;
    color:#996633;
    text-shadow:0px 1px 0px rgba(255,255,255,.4);
    padding:0.417em 0.417em 0.417em 0.917em;
    border-top:1px solid #d99d38;
    border-right:1px solid #d99d38;
    border-bottom:1px solid #d99d38;
    -webkit-border-radius:0 0.25em 0.25em 0;
    -moz-border-radius:0 0.25em 0.25em 0;
    border-radius:0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow:
        inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow:
        inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow:
        inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
 
    z-index:100;
}

.label-size:before {
    content:'';
    width:1.30em;
    height:1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position:absolute;
    left:-0.69em;
    top:.2em;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
    border-left:1px solid #d99d38;
    border-bottom:1px solid #d99d38;
    -webkit-border-radius:0 0 0 0.25em;
    -moz-border-radius:0 0 0 0.25em;
    border-radius:0 0 0 0.25em;
    z-index:1;
}

.label-size:after {
    content:'';
    width:0.5em;
    height:0.5em;
    background:#fff;
    -webkit-border-radius:4.167em;
    -moz-border-radius:4.167em;
    border-radius:4.167em;
    border:1px solid #d99d38;
    -webkit-box-shadow:0 1px 0 #faeaba;
    -moz-box-shadow:0 1px 0 #faeaba;
    box-shadow:0 1px 0 #faeaba;
    position:absolute;
    top:0.667em;
    left:-0.083em;
    z-index:9999;
}
.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color:#e1b160;
}
 
.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color:#e1b160;
}
#Label1 {height:210px !important;}


Here the height in the Line 98 of the CSS above has to be adjusted according to the number of Labels your blog has . If this is not done then the Labels might overlap with other widgets.

Hope you liked the Label Design, will be publishing more of these designs soon. In case you have any problem implementing these on your Blog, feel free to ask .

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Tuesday, May 01, 2012
Post a Comment
Unknown said...

iam waiting for it since it appeared on your blog

May 2, 2012 at 12:54 AM Delete
AMMAR said...

Hey Prayag Verma,
I was looking for this for me new blog and finally landed to your blog :) can you tell me how i can also get "Add To Blogger" button (1 Click Widget installer for Blogger?)

May 2, 2012 at 1:07 AM Delete

I will do a post about it soon

May 2, 2012 at 1:12 AM Delete

Was a bit delayed ,but have released it now. Will be releasing other Label Designs Soon too

May 2, 2012 at 1:19 AM Delete

Not working here. Still the old style is here. I pasted css befor ]]>

Add to blogger is not working. If i add through it, it shows only text.

May 2, 2012 at 1:58 AM Delete

I checked your blog , couldn't find the CSS for this design in your blog, Please add it ,then only can I help

The Add to Blogger button is working perfectly fine , the link is visible because rest is CSS

May 2, 2012 at 2:12 AM Delete
iTeching said...

baba too good so much of coding you have done really nice check out on our blog some color issue Plz help to resolve.

May 2, 2012 at 4:39 AM Delete
Unknown said...

I install it! It's very easy install and pretty it! But on my category it's too long! :(

May 2, 2012 at 6:37 AM Delete

another nice tutorial sir
Thanks :)

May 2, 2012 at 7:24 AM Delete

You can change the height of the widget to make them fit, To do that search for #Label1 in the widget code and change the height value to make it fit your needs. You can save some space by removing the count of each label

In case #Label1 doesn't effect the height you can change it to #Label2

May 2, 2012 at 9:14 AM Delete

Please explain a bit more about your problem , I checked your blog and everything looks fine.

May 2, 2012 at 9:22 AM Delete
Navneet said...

problem is that it looks dull.... the links are not visible clearly...!

May 2, 2012 at 10:34 AM Delete

Just add the following CSS

#footer-wrap a:link, #footer-wrap a:visited {color: black !important;}

May 2, 2012 at 11:10 AM Delete

Thank you.. Looks clean, I'll give it a try today :)

May 3, 2012 at 6:54 AM Delete

Added , but it is showing your blog link only.

May 3, 2012 at 7:44 AM Delete

Just add the following CSS, it will fix the font-size issue

.label-size {
line-height: 1.0 !important;
font-size: 0.85em !important;
}

May 3, 2012 at 11:13 AM Delete

The blog link is appearing because the rest is CSS , If you want you can remove it or embed the CSS in the template itself as directed in the second procedure

May 3, 2012 at 11:16 AM Delete
Unknown said...

Really Nice widget looking for such style of widget for my lable.

May 4, 2012 at 5:47 AM Delete
Utsav said...

not working in my blog pls help

May 4, 2012 at 7:24 AM Delete

I checked your blog Utsav , you are using the Flash Cloud variant of the Label widget . Install the Normal Label Cloud as provided by Blogger and then add this CSS

May 4, 2012 at 9:26 AM Delete
Pradeep said...

I too want that 1 click installer for me.

May 5, 2012 at 3:00 AM Delete
Unknown said...

Sir I already have added labels three times of which I have made 3 drop down menus,,If I will add labels one more time and add css above for which label category it will work?,,my blog http://www.jobsonchoice.com

May 17, 2012 at 3:44 AM Delete

This will not work in the DropDown list , you will have to add the default Label widget and set Display option to Cloud

May 17, 2012 at 4:58 AM Delete

Thanx for the great idea.

June 16, 2012 at 8:42 PM Delete

Thanx for the great idea.

June 16, 2012 at 8:42 PM Delete
Saurabh said...

Having a problem with this. See my post at

http://www.hacktricks.in/2012/06/remove-facebook-timeline-disable-chatbar.html

when you click on the image, it is shown in the light box, but the labels still appear on the screen.

July 3, 2012 at 7:59 AM Delete
Saurabh said...

Also see screenshot here

https://dl.dropbox.com/u/37248667/scr.png

July 3, 2012 at 8:02 AM Delete

Add the following CSS

.label-size , #SYB-Bar-Container { z-index: 1 !important ;}

This will also make the Sticky Scrolling Bar to hide when the lightbox is opened

July 3, 2012 at 8:17 AM Delete
itti said...

I would say : Woww! Its a nice Label widget. Just added on my Blogger Blog. Thanks you very much for sharing this nice stuff.

August 1, 2012 at 1:21 AM Delete
Anonymous said...

Add SLIDING TAGS in your blog, see tutorial here
http://bit.ly/TbvgWg

October 12, 2012 at 4:55 AM Delete