Subscribe for FREE Updates.

Sunday, 17 March 2013

Widgets

Customize Blogger Labels With CSS3

Customize Blogger Labels With CSS3
In My previous tutorial I sheared a beautiful subscriber widget and now  today I am sharing beautiful css3 label style for blogger or websites. You can easily apply this label style in to your blog. If you have not added labels in your blog first add into your blog.







How can you add labels in bloggers blog?

  •  Click on blog title in which you want to add This Subscriber box.
  •  Go to layout and then click on Add a Gadget.
  •  Select label and set your label style to cloud and hit save. 
Customize Blogger Labels

Customization:


  • First go to your blogger template
  • Click on edit and check expand widget box
  • Then click ctrl+f and find ]]></b:skin>
  • Just above it paste the below code.
 /*----- KH LABEL STYLE  START-----*/
.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}
/*----- KH LABEL STYLE  END-----*/



Note: if you want to change the color of your label chose your color and replaces it with #0089e0 And changing shadow effect then change this one #004977

Finally save your template you are done.

Shakeel Asghar ADMIN
Posted By: Shakeel Asghar

Shakeel Asghar is the owner and founder of kutebkhana.blogspot.com. I love to blogging, Design Blogger template, Web Developing and Designing.i like to learn and share tips with you.

Do you Like this story..?

Get Free Email Updates Daily!

Follow us!

1 Responses to “Customize Blogger Labels With CSS3”

ali imran said...
8 March 2016 at 01:14

SEtup your favorite Wordpress and theme customization on https://www.fiverr.com/alianzwebs/setup-wordpress-theme-websites-as-demo


Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. If you have a problem check first the comments, maybe you will find the solution there.


Regards,
Shakeel Asghar

Are you Awesome? Legend has it that Awesome people can and will share this post!
Customize Blogger Labels With CSS3