Labels are a very nice way
to organize your content on your website/blog. The default blogger label
doesn’t have much customize option.
In my previous post I have
already shown you how
to customize blogger label and make them Bricks/Box Style with CSS. In this
tutorial I will show you how to customize your blogger label giving a blue
effect with a awesome cool style. This will enhance your labels looks and
attract visitors/readers to force them to click on them. This leads to increase
in pageviews of your blog/website. We will apply this hack using pure CSS3.
NOTE: Before you get started make sure
that your blog has the “Label Widget” present already and set the Display
option to Cloud. Then only you proceed to the next.
Now let’s begin the tutorial.
How to Add Blue Tag Label Style to Blogger?
STEP #1:
Login to Blogger.
STEP #2:
Go to Dashboard>Templates
STEP #3:
Now click on Edit HTML>Proceed
STEP #4:
Find below code:
]]></b:skin>
STEP #5:
Now Copy & Paste the below code above the above code:
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;
}
STEP #6: Now Click on Save button.
So execute steps correctly and you are done. Head to your blog and check
the trick executed. So don't forget us. We will only survive with your
generosity. Like, Share, Follow and Subscribe. If you are facing any problem
with implementing these codes just comment below for help. Stay tuned for more
posts.
{ 0 comments... read them below or add one }
Post a Comment