Wednesday, 17 April 2013

Change Your Blogger Labels style by using CSS3

How To Do This ??

First you have to make some settings of your label widget. Save your label widget settings as I have set in below image.



  • Now go to Blogger > Template
  • Click on Edit HTML
  • Find below code in your template
]]></b:skin>


Now add below code just above it

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

Now Find,

<b:widget id='Label1' locked='false' .......... </b:widget>


And Replace It With

<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 Save !!!!

Also give remarks in Comments ......





← Blogger OR Google+ →

1 comment:

  1. Avesome Post

    http://www.helpnewbloggers.me/

    ReplyDelete

  • Home
  • About Us
  • Contact Us
  • Sitemap
  • Back To Top ^

    About us

    Shiraz Shakeel is a young boy who is founder and the owner of Cloudspedia. He is 13 years old and living in Pakistan, K.P.K, Peshawar. Now a days, He is studying in 7th grade and running his site..... Continue Reading

    Global Ranking