Label Tag Style #2 Widget for Blogger:Digital Tech Inspiration

I present you another CSS3 style label tag. In my previous post I have shown you a similar style for label Blue Tag Label Style for blogger. In this post I am showcasing a related

pattern quite similar to my previous post with a different style.

Labels are a very nice way to organize your content on your website/blog. The default blogger label doesn’t have much customize option.

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 Label Tag 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:

<span style="font-size: 15px;">.label-size {

    float:left;

    margin:0 0 7px 20px;

    position:relative;

    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-size:0.75em;

    font-weight:bold;

    text-decoration:none;

    color:#996633;

    text-shadow:0px 1px 0px rgba(255,255,255,.4);

    padding:0.417em 0.417em 0.417em 0.917em;

    border-top:1px solid #d99d38;

    border-right:1px solid #d99d38;

    border-bottom:1px solid #d99d38;

    -webkit-border-radius:0 0.25em 0.25em 0;

    -moz-border-radius:0 0.25em 0.25em 0;

    border-radius:0 0.25em 0.25em 0;

    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');

    -webkit-box-shadow:

        inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    -moz-box-shadow:

        inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    box-shadow:

        inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    z-index:100;

.label-size:before {

    content:'';

    width:1.30em;

    height:1.39em;

    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');

    position:absolute;

    left:-0.69em;

    top:.2em;

    -webkit-transform:rotate(45deg);

    -moz-transform:rotate(45deg);

    -o-transform:rotate(45deg);

    transform:rotate(45deg);

    border-left:1px solid #d99d38;

    border-bottom:1px solid #d99d38;

    -webkit-border-radius:0 0 0 0.25em;

    -moz-border-radius:0 0 0 0.25em;

    border-radius:0 0 0 0.25em;

    z-index:1;

.label-size:after {

    content:'';

    width:0.5em;

    height:0.5em;

    background:#fff;

    -webkit-border-radius:4.167em;

    -moz-border-radius:4.167em;

    border-radius:4.167em;

    border:1px solid #d99d38;

    -webkit-box-shadow:0 1px 0 #faeaba;

    -moz-box-shadow:0 1px 0 #faeaba;

    box-shadow:0 1px 0 #faeaba;

    position:absolute;

    top:0.667em;

    left:-0.083em;

    z-index:9999;

.label-size:hover {

    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');

    border-color:#e1b160;

.label-size:hover:before {

    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');

    border-color:#e1b160;

#Label1 {height:210px !important;}

</span>

STEP #6: Here above in RED HIGHLIGHTED has to be adjusted according to the number of Labels in your blog. If this is not done then the Labels might overlap with other widgets.

STEP #7: 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.