Hello Friends as you know Blogger will provide very simple label widget. But you can apply custom label widget with the help of some CSS coding. Show now I am going to share you a beautiful CSS labels style for blogger. With the help of this tricks you can easily apply for your blogger blog labels widget by just adding some simple CSS codes into your blog. Blogger Tag Clouds are used to show all the categories or labels present in a blog. By default blogger comes with simple design they do not look beautiful. But we designed our labels widget like CSS buttons, which will be looking attractive more than the default blogger labels cloud widget style.
This Label is looks Like below Image.
You Just Follow the Steps
- Go To >> Blogger.com >> Dashboard >> Template >> Edit HTML
- Search for Bellow Tag in Your Blogger Template Using Ctrl+F
|
]]></b:skin>
|
- After Finding This Code Copy Below Given CSS Code And Paste Above the ]]></b:skin>.
|
/*-----
Custom Labels Cloud-----*/
.label-size
{
position:relative;
margin:0;
padding:0;
}
.label-size
a
{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom:9px;
margin-left:20px;
background:#2aa4cf;
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;
padding:0
10px 0 12px;
}
.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;
}
|
- Save Your Template
Next Follow Some Simple Steps How Customize it.
Now You have to go to Dashboard > Layout > Edit the "Labels" widget option and set "cloud" mode.
Finally Open Your Blog and see your Label is now change as stylish Cloud widget..,,,,
If You Like This Post Then Please Like My Facebook Fan Page..
I am a Part Time Blogger. By Education i am a Computer Engineer, who Loves Technology, Software, Programming, Tips and Tricks, Social Media. You can Follow me on Facebook| Twitter | Linked In To stay tuned with the topics you love to read from me.
.jpg)
.jpg)
.jpg){kind=logo}
0 comments:
Post a Comment
If you have any doubt kindly let me know