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 .
Find me on
nice share...
hope it works
Amaizing Tags With CSS
thanks Friend
nice tutorial..
Cool, thanks for the share.
It will work for sure.
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
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:…
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 lit…
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.
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: reportmetoday@gmail.com
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
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
Good luck