Blogger Label Widget Style #2



Continuing from my recent post about Blogger Label Widget style , I present another CSS3 powered style. It uses :before and :after selectors extensively & cunningly to manipulate the shapes accompanied with CSS3 transform. CSS3 gradients are used for backgrounds. It also highlights the the count besides each label. It was originally designed by Jakob Cosoroaba , I just converted it into Blogger usable .  



Before you get started make sure that your Blog has the Label Widget present already and set the Display option to Cloud and also tick the option to display the count.
Demo
CSS3 Label Style

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{
   display: inline-block;
   padding: 0px 10px;
   height: 29px;
   line-height:29px;
   border-radius: 5px;
   font-weight:bold;
   font-size:12px;
   text-decoration:none;
}

.label-size{
  border: 1px solid #769e42;
  box-shadow: inset 0 1px 0 #c5e59c ;
  background-color: #9ed35a;
  text-shadow: 0px 1px 1px #6ea23b;
  color: #fff;
  background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size:hover{
  background-color: #b7fa66;
  background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
}

.label-size:active{
  background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size{
  display:inline-block;
  border-radius: 5px 0 0 5px;
  border-right-width:0;
  position:relative;
  z-index:5;
  margin-right: 20px;
  margin-bottom: 10px;
}

.label-size:after{
  content: " ";
  width: 22px;
  height: 22px;
  line-height: 18px;
  font-size:25px;
  border-top: 1px solid #769e42;
  border-right: 1px solid #769e42;
  box-shadow: inset 0 1px 0 #c5e59c ;
  background-color: #9ed35a;
  text-shadow: 0px 1px 1px #7eac46;
  border-radius: 3px 7px 3px 0;
  color: #fff;
  background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  position:absolute;
  top: 3px;
  right: -12px;
  z-index:-3;
  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
       -moz-transform: rotate(45deg);  /* FF3.5+ */
        -ms-transform: rotate(45deg);  /* IE9 */
         -o-transform: rotate(45deg);  /* Opera 10.5 */
            transform: rotate(45deg);
               filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                       M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
                 zoom: 1;
}

.label-size:hover:after{
  background-color: #b7fa66;
  background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
}

.label-size:active:after{
  background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size:before{
  content: " ";
  height:5px;
  width:5px;
  display:block;
  position:absolute;
  right:-3px;
  top:11px;
  background-color: #fcfdf5;
  border: 1px solid #83ab52;
  border-radius:5px;
  box-shadow: 0 1px 0 #b2ddd83;
}

.label-size span{
  padding:2px 5px;
  border: 1px solid #9e5c26;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 #f5bf8c;
  background-color: #ed943f;
  text-shadow: 0px 1px 1px #000;
  margin-left: 10px;
  background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
}

#Label1 {height:210px !important;}


Here the height in the Line 130 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.

Will be publishing one more design in the next week and also a tutorial on how to create the Add to Blogger button as asked my many readers . In case you have any problem implementing this in your Blog, feel free to ask .




Written by Prayag Verma

A self proclaimed Blogger Evangelist. He has been blogging for the past 4 years and likes to help people having problems with Blogger . Get more from Prayag on and Twitter

Email Newsletter

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

Post a Comment
utsav said...

nice share...


hope it works

techgod8 said...

Amaizing Tags With CSS

thanks Friend

Syuk Ry said...

nice tutorial..

Pradeep said...

Cool, thanks for the share.

Pradeep said...

It will work for sure.

Jack said...

not work on ie7

The rounded corner and the Circular hole will not work in the IE7

This is supported in all browsers that support CSS3 like Chrome ,Safari ,Firefox ,Opera , IE9

In case you face any problems Utsav feel free to ask

Really great work bro.

Love CSS3 :) This one is really a good share for Bloggers..
CSS3 still requires support on many browsers..
Thanks

Hi Prayag , not working in my blog, please check .

thanks

www.ssbcrack.com

Amazing, this looks better than previous post, i am not a professional but in my opinion widget text colcor should be changes, it does not suit with green, i suggest you to change this into white color, can i do this?
Thanks anyways.

I checked your blog ,There is no Label Widget present in the sidebar

Firstly add a Label widget by going to Layout > Add a Gadget > add the widget named Labels

Set the Display to Cloud and tick the option to show the number of post per label

Also the widget you added , has a link of Stylify Your Blog ,whose address is .co instead of .com in the end ,please fix that too

Also when I saw your comments ,there was bit of a problem with the images , to fix it add the following CSS

.comments .avatar-image-container img {max-width: 40px !important;}

Thanks for appreciating Adnan
The color of the text can be changed by the following CSS

.label-size a , .label-size { color:white !important; }

Thank you so much, both label and comment issues are solved, I need to do modification in labels , I wanted to cut short the labeling and want to keep only few labels, I want to know will changing labels effect SEO ? ?

Also I want to have the commentor's name highlighter like you have in the comment section, the css you gave me did not worked, please suggest.

Also how to change the size and color of the labels , they are taking more space.

In case you are reducing the no. of labels to see any effect in SEO, then there will be none

This is because by default Blogger does not allow indexing of the URL of the type /search (if you observe the URL of Label pages its like /search/label/label-name )in the Blog. So it increasing and decreasing will not effect the SEO a lot.

The only downside can be when you have a very large number of labels , then that can be considered as keyword stuffing , but very large like 100s of them

To remove Labels from post in bulk ,go to Edit Post page , tick the post and click the Label Action dropdown menu and select the label to remove or add (This is possible in Older Interface only)

To remove labels manually you will have to go to each post (Edit) and then remove the label from their

For comment Author highlighting , just add the following CSS


cite.user {
color: #F0F0F0;
text-transform: uppercase;
background-color: #FFE87C;
border: 1px solid #9C1406;
text-align: center;
text-transform: uppercase;
font-size: 14px;
padding: 0px 10px 0px 10px;
text-decoration: none;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
-moz-box-shadow: 2px 2px 4px #666;
-webkit-box-shadow: 2px 2px 4px #666;
box-shadow: 1px 1px 6px #666;
text-shadow: none;
position: relative;
left: -10px;
margin-left: 15px;
}


This is the same code I gave before, it works , i applied it to your blog and checked , Here is a screenshot of it
http://1.bp.blogspot.com/-dVhLlAT_Uu8/T6gWTpX1pOI/AAAAAAAAEhA/ebcTzW_b9Ls/s1600/test.PNG

To change spacing and font size ,add the following CSS

.label-size {
margin-right: 10px !important;
padding: 0px 5px !important;
font-size: 10px !important;
}


To change the background color , you will first have to go here CSS3 Gradients

Select the gradient of your choice and copy the CSS markup , and then add the following CSS

.label-size , .label-size::after { the copied opied CSS }

.label-size {
border: 1px solid #000000 !important;
box-shadow: inset 0 1px 0 #000000 !important;
background-color: #000000 !important;
text-shadow: 0px 1px 1px #000000 !important;
}
.label-size::after {
content: " ";
border-top: 1px solid #000000 !important;
border-right: 1px solid #000000 !important;
box-shadow: inset 0 1px 0 #000000 !important;
background-color: #000000 !important;
text-shadow: 0px 1px 1px #000000 !important;
}


Replace #000000 with the colors of similar shades to the color selected in the CSS3 gradient tool


Make sure to add the !important tag before every ; in the copied CSS

Changing color is a little lengthy process as it requires shades matching and stuff ,so the result might not be very pleasing in the first go

Thank you so much for spending your time for helping me, I am done with the labels but comment Author highlighting is not happening correctly with me , I have applied the css you can check it in my blog, it is still there.

Yes, it worked! thanks

Try using this CSS

.user {
color: #F0F0F0;
text-transform: uppercase;
background-color: #FFE87C;
border: 1px solid #9C1406;
text-align: center;
text-transform: uppercase;
font-size: 14px;
padding: 0px 10px 0px 10px;
text-decoration: none;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
-moz-box-shadow: 2px 2px 4px #666;
-webkit-box-shadow: 2px 2px 4px #666;
box-shadow: 1px 1px 6px #666;
text-shadow: none;
position: relative;
left: -10px;
margin-left: 15px;
}

Hi Prayag , this code is not working either.

Also can you tell me how to reduce the size of label , like you have. Present label size in my blog is very big, I want them to be small in size.

The code is not working because your CSS has a stray } (closing bracket) just above the .user code , remove that single closing brace ( } ) and it will work

Also to reduce the size , this is the CSS

.label-size::after {
content: " ";
height: 18px !important;
line-height: 18px !important;
font-size: 25px !important;
top: 0.12em !important;
}

.label-size span {
padding: 1px 3px !important;
margin-left:0px !important;
}

Great work bro.Keep sharing...

Comment highlighter worked but there is some glitch is still present still present please check .

Also the label size is not getting reduced, please check that too.

thank you Prayag

hi i have added both the css label design of yours .now both the designs overlaps .how to rectify it .
my mail id: [email protected]

Son Pham said...

This is just so beautiful

Hi
i have no problems with the first part, but when i aply this style is not working :

http://adriana-sos.blogspot.com.es/

the first part is built in the template i did not notice, and also some css aplied to labels : i removed your codes and still are modified you can take a look.
Is there any easy way to implement this label widget style in my website?

http://adriana-sos.blogspot.com.es/

thanks in advance

i plied this tutorial and worked:
http://www.bloggertrix.com/2012/07/chnage-blogger-label-links-as-brick-box.html


but would prefer yours if posible :D

Jasmine said...

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

Great work bro, but unfortunately this is not working on my blog-www.makeuseofandroid.com (Now I removed the css from my template). I tried adding this widget from many other site too, but nothing worked. I think it should be my template problem. Kindly have a look at my site and give me a fix. I know you can fix this, so thanks in advance :D

Fak3r said...

Good luck