Thursday, 19 July 2012

Add CSS3 Bricks/Box Style Labels To Blogger



In this tutorial 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.

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.



  1. Now go to Blogger Dashboard > Template
  2. Download a copy of your template
  3. Click on Edit HTML
  4. Hit Proceed button
  5. Check Expand Widget Templates checkbox
  6. 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,

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

find it until

</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.

Hope you have liked it :)


37 Comments : Read Them Below Or Add One

  1. This comment has been removed by the author.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. We are focusing on what they can do for you as targeted woman.cheap stun guns Women are more at risk. Statistics show that most violence is done by men, and most have a preference of a female target. Because, most but not all females are the physically weaker sex, stun gun flashlightsand these men that are hoping to do violence, commonly want a weaker adversary. Someone they can control and dominate. With a non-lethal weapon you can reduce the risk that you will be viciously beaten or killed when walking to your car at night, K95 stun gunor taking an evening walk in your once safe neighborhood.

    ReplyDelete
  5. Cool blog. Check out my "free psychic reading" blog.
    The best sitedata

    ReplyDelete
  6. Nice Labnol like Labels widget.

    Regards,
    Navneet
    www.techravers.com

    ReplyDelete
  7. I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles.
    tutor

    ReplyDelete
  8. like Matthew answered I'm surprised that any body can earn $5411 in a few weeks on the internet. have you seen this webpage http://Run19.com

    ReplyDelete
  9. my classmate's mother-in-law makes $72/hr on the computer. She has been laid off for nine months but last month her income was $15013 just working on the computer for a few hours. Here's the site to read more http://www.taz3.com

    ReplyDelete
  10. Nice widget dude ! Suite in my blog with beautiful colours

    ReplyDelete
  11. How to use it in WordPress..??

    ReplyDelete
  12. i like this widget the good thing is its pure css doesnt affect the page loading time....thank you

    ReplyDelete
  13. The mentioned aspects in this very post was very much helpful in knowing the usability of add css3 bricks box style labels to bloggers with it's relative entities.[url=http://pepdeal.com/]website templates[/url]

    ReplyDelete
  14. For More Visit

    www.shirazshakeel.blogspot.com

    ReplyDelete
  15. Very nice, i'll have to try it first on my dummy blog before I attempt it on my real blog.

    ReplyDelete
  16. ohh thanks for this one but its not good with Arabic later

    ReplyDelete
  17. Really nice and its still working..
    Regards
    Problogbooster

    ReplyDelete
  18. Imperial Valley RealtorIs really good. I love your website! Thank you so much for sharing and imparting.

    ReplyDelete
  19. This comment has been removed by the author.

    ReplyDelete
  20. The author of this article is well written very vivid.

    First Time Mortgage

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Really impressive, Rahul!
      Amit sir sure creates lovely widgets and every body loves to have 'em on their blogs. However, as many of you out there must have noticed, labnol has now changed it's labels widget. And the new one is better than this. Awesome black buttons that becomes more dark when hovered on. Here's a tutorial on how to implement the new ones ;)

      http://www.techsperia.com/2013/08/new-labnol-style-labels-widget-for.html

      Regards,
      Raj Mehta

      Delete
  22. hi
    Rahul
    in my blog 2 blogposts
    how to remove?

    ReplyDelete
    Replies
    1. http://filestored.blogspot.in/

      this is my blog

      Delete
  23. nice your site thanks for sharing love you all teme good work keep it up
    Facebook Hacking Softwares

    ReplyDelete
  24. Keep sharing ideas .... Your valuable ideas will help newbies to grew up into professionals..... This ideas will make newbies to become more efficient in the field... So share more and more......!!! Make Money , Blogging Tips

    ReplyDelete
  25. This comment has been removed by the author.

    ReplyDelete

If you want to be informed about any replies then click on "Subscribe by email" (present below of comment box).PLEASE DO NOT SPAM