April 26, 2013
Friday, April 26, 2013
3 comments

Add CSS3 Stylish Brick like Label Box to Your Blog..




In this tutorial we will see how to customize blogger labels and replace it with CSS3 and make them 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 tweak..

So lets begin..

First you have to add Labels Widget to your blog..Have you not added it yet..Then I will Show you How?? 

  1. Go to your 'Blogger Dashboard' and go to 'Layout Section' on your blog..
  2. Click on 'Add Gadget'..
  3. You can see many Gadgets ..Scroll Down and you can find 'Labels' Gadget..
  4. Click on 'Labels' and Save it..
  5. Now you will see Default Blogger Labels in your Blog..

How To Customize Blogger Labels With CSS3?

First we have to edit some settings of our label widget.Save your label widget settings as in Image Below..


After Editing your Label Widget as in above follow these Steps....
  1. Now go to Blogger Dashboard and go to 'Template' Section..
  2. Before Editing Download a copy of your template..
  3. Click on Edit HTML..
  4.  Now Find below code in your template by Using Ctrl+F buttons ....
]]></b:skin>

After Finding it add the below CSS Code above "]]></b:skin>"

/*******************************************
  Labels Widget By MJN Tech
*******************************************/  
 #mjn-labels-w {
        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
    }
/********End*************/

After adding CSS code,,Now Find the below code ..

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

Until the first code below

</b:widget>

After Finding these code.. Now 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='mjn-labels-w'>
                <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>

That's it..Now Save your Template ..and its Done..

Any Problem or Error Comment Below..

Thanks for Visiting..

With regards,

Don't Forget to Subscribe, Share and Join us..

Tagged with :

Manjunath.G (MJN) is a Blogger, web designer and developer .. He has a passion towards Programming , Web designing and also he loves Technology..

3 comments:

 
Toggle Footer
Top