How To Customize Blogger Labels With CSS3

Here we will see how to customize blogger labels with CSS3 and make them bricks or box style.We will apply this hack with using of pure CSS3 and will replace some existing code with new code in your template.These css3 bricks/box labels really attract readers.I am also using these bricks/box style label on this blog,you can see demo at right sidebar of this blog.Now lets see how to apply this hack.

First we have to edit some settings of our label widget.Save your label widget settings as I have set in below image.

Now go to Blogger Dashboard > Template

Download a copy of your template

Click on Edit HTML

Hit Proceed button

Check Expand Widget Templates checkbox

Find below code in your template

]]></b:skin>

add below CSS code just above it,

/*CSS3 Bricks Style Labels By http://www.helperblogger.com/ */

#textwidget {

    color: #666;

    font-size: 0.925em;

    font-style: italic;

    line-height: 1.6em

}

 

a.tag {

    color: #777;

    font: 9px verdana;

    text-transform: uppercase;

    transition: border-color .218s;

    background: #f4f4f4;

    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

    display: inline-block;

    text-shadow: 0 1px 0 #fff;

    -webkit-transition: border-color .218s;

    -moz-transition: border .218s;

    -o-transition: border-color .218s;

    transition: border-color .218s;

    background: #f3f3f3;

    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

    background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

    border: solid 1px #ccc;

    border-radius: 2px;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    margin: 0 4px 4px 0;

    padding: 3px 5px;

    text-decoration: none

}

 

a.tag:hover {

    color: #333;

    border-color: #999;

    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);

    box-shadow: 0 1px 2px rgba(0,0,0,0.15)

}

 

a.tag:active {

    color: #000;

    border-color: #444

}

 

.slides {

    font-size: 85%;

    line-height: 130%;

    overflow: hidden;

    padding: 0;

    margin: 30px 0 10px;

    border-bottom: 1px solid #000

}

/*CSS3 Bricks Style Labels By http://www.helperblogger.com/ */

Now find below code,

1

<b:widget id='Label1' locked='false'

find it until

1

</b:widget>

replace code from <b:widget id='Label1' locked='false'......... 

to 

</b:widget> with below code,

<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>

    <b:includable id='main'>

        <b:if cond='data:title'>

            <h2>

                <data:title/>

            </h2>

        </b:if>

        <div class='textwidget'>

            <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

                <b:if cond='data:display == &quot;list&quot;'>

                    <ul>

                        <b:loop values='data:labels' var='label'>

                            <li>

                                <b:if cond='data:blog.url == data:label.url'>

                                    <span expr:dir='data:blog.languageDirection'>

                                        <data:label.name/>

                                    </span>

                                    <b:else/>

                                    <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

                                </b:if>

                                <b:if cond='data:showFreqNumbers'>

                                    <span dir='ltr'>(

                                        <data:label.count/>)</span>

                                </b:if>

                            </li>

                        </b:loop>

                    </ul>

                    <b:else/>

                    <b:loop values='data:labels' var='label'>

                        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>

                            <b:if cond='data:blog.url == data:label.url'>

                                <span expr:dir='data:blog.languageDirection'>

                                    <data:label.name/>

                                </span>

                                <b:else/>

                                <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

                            </b:if>

                            <b:if cond='data:showFreqNumbers'>

                                <span class='label-count' dir='ltr'>(

                                    <data:label.count/>)</span>

                            </b:if>

                        </span>

                    </b:loop>

                </b:if>

                <b:include name='quickedit' />

            </div>

        </div>

    </b:includable>

</b:widget>

Now take a preview and save your template.

Thats it, Now Enjoy Your Blog!!!

PRASHANT KUMAR