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

Post a Comment
Unknown said...

iam waiting for it since it appeared on your blog

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?)

I will do a post about it soon

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

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.

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

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.

Unknown said...

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

another nice tutorial sir
Thanks :)

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

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

Navneet said...

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

Just add the following CSS

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

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

Added , but it is showing your blog link only.

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

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

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

Unknown said...

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

Utsav said...

not working in my blog pls help

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

Pradeep said...

I too want that 1 click installer for me.

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

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

Thanx for the great idea.

Thanx for the great idea.

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.

Saurabh said...

Also see screenshot here

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

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

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.

Anonymous said...

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