Add CSS3 Bricks/Box Style Labels To Blogger ~ Shiraz Shakeel

How to Customize Blogger Labels With CSS3

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

Click on Edit HTML

Hit Proceed button

Check Expand Widget Templates checkbox

Find below code in your template

]]></b:skin>

/*CSS3 Bricks Style Labels By http://www.shirazshakeel.blogspot.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.shirazshakeel.blogspot.com */

Now find below code,

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='"widget-content " + data:display + "-label-widget-content"'>
                <b:if cond='data:display == "list"'>
                    <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='"label-size label-size-" + 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.

Hope you have liked it :)

Thanks

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Shiraz Shakeel

Tuesday, 22 January 2013