Customize Blogger Labels With CSS3 - Helper Blogger

Blogger Widgets | Templates | Tutorials

Latest

Friday, 27 July 2012

Customize Blogger Labels With CSS3


Previously I shared bricks/box style labels for blogger and many of you found it great so that today I am sharing another beautiful CSS3 labels style for blogger.This label hack can be easily applied to your labels by just adding some CSS code in to your blog.This labels and created by Stylifyyourblog and I have reshared them on Helper Blogger,Now lets see how to apply this label hack.

How To Apply This Label Hack?

Important -  Before applying this label hack set your label style to Cloud.

You can also apply this hack by using below one click installer.





OR

apply this hack manually by adding below CSS code just above/before ]]></b:skin> tag in your template,

.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}

.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}

.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}

#Label1 {
    height: 210px;
}

.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

Finally save your template and you are done.

If you are getting any problem then feel free to ask it to me :)

55 comments:

  1. Nice CSS3 Effect Pro ...
    Thanks For The Post ...
    How To Get Money

    ReplyDelete
  2. Very helpful! Is there any way to customize the labels to include pictures?

    ReplyDelete
  3. 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
  4. Hello, I got you by Google search.

    I experience so good to study your web page on helperblogger.com. Now a times it web page has become differ well-known & required web page for all the individuals.I think that it web page is one of the primary needs of person & is type for important any growth. Actually I like this web page. Because here involved so efficient details. It may help me about relevant issue. I suggest it & like to share a entertainment blog that's bridging the gap between you, your friends and other people who want to get the latest indian hindi songs.

    Thanks for sharing

    ReplyDelete
  5. Thanks lot.... http://shanzone.blogspot.com/

    ReplyDelete
  6. I was verу happy to unсover thіs web site. I need tο to thank you for your time just for this ωonderful read!! I ԁefinitelу liked eνery part of it and і alѕo hаvе yоu booκ-maгked to cheсk οut new ѕtuff on your wеbsite. Feel free to surf my web blog what's android

    ReplyDelete
  7. its nice
    but can you tell me how to add "Add to Blogger"
    plzzzzzzzzzzzz

    ReplyDelete
  8. Nice Labels widget .

    Regards,
    Navneet
    www.techravers.com

    ReplyDelete
  9. just as Margaret implied I am inspired that any one able to earn $6613 in four weeks on the internet. did you see this site http://Run19.com

    ReplyDelete
  10. my friend's step-sister makes $87/hour on the internet. She has been out of work for 7 months but last month her paycheck was $15298 just working on the internet for a few hours. Read more on this site http://www.taz3.com

    ReplyDelete
  11. So this is how it works?! Thank you for posting! I remember i've also seen stuff like this at web designer ny.

    ReplyDelete
  12. How can I use this code to a wordpress site ? No ]]> tag is there. So I take help of a css adder plugin but not working for me... plz help.

    ReplyDelete
  13. This is very nice article.I also use this to my Best Movie Torrents Blog.

    ReplyDelete
  14. great label my dear thanks

    http://shayri-ki-duniya.blogspot.in/

    ReplyDelete
  15. Hey Prince, you free? Let's play 8 Ball Pool Multiplayer. I'm waiting - https://apps.facebook.com/livepool/?ct=r7gVU&cui=1016097787

    ReplyDelete
  16. wow, that's a nice idea for adding blogger label with css3...
    thank's for your information, I Like It

    ReplyDelete
  17. want make money online for free ,you can visit my site http://ectheme.blogspot.com/
    or contact me with howaves@gmail.com i will teach you step by step

    ReplyDelete
  18. Awesome post.Actually i was looking for it for many days,forunately found here.Also your content and design is great.

    http://crackednfull.blogspot.in/
    http://technocrazepro.blogspot.in/

    ReplyDelete
  19. Hi sir how are you today?
    i shear my blog all people, there are many many information about on helperblogger.com it is very difficult post of google search, Web design company long island was founded by our group of expert web developers who work together with our specialized associates who are confirmed effective in on the internet marketing, SEO, SEM and multiple different on the internet marketing techniques.
    A Billion Thanks Only For You.

    ReplyDelete
  20. Thanks I permite to copy and try that code www.how-to-o.com

    ReplyDelete
  21. not work with my blog www.24blogger.com

    ReplyDelete
  22. Awesome....>!!

    http://techgblog.blogspot.in/

    ReplyDelete
  23. http://fullypcgamesz.blogspot.com/ Free Download Software

    ReplyDelete
  24. http://fullypcgamesz.blogspot.com/2013/04/windows-7-free-download-full-version-crack-patch-newwindow2013-full-window-key-latest-window7-ultimate-google.com-facebook.com-blogger.com-yahoo.com-gmail.com-window7.html

    ReplyDelete
  25. How can i change the color to green my blog is tweak-guru.blogspot.com

    ReplyDelete
  26. saya sudah memasang ini dan sangat bagus

    http://rudicyber4rtcrew.blogspot.com/2013/03/saatnya-total-action.html
    http://rudicraft.blogspot.com/
    http://rudiseo.blogspot.com

    ReplyDelete
  27. you can check the demo on http://www.pskjobs.com

    ReplyDelete
  28. You have some really good posts and I feel I would be a good asset. If you ever want to take some of the load off, I'd absolutely love to write some material for your blog in exchange for a link back to mine. Please blast me an email if interested. Regards!

    ReplyDelete
  29. Will try this.Thanks, this is some good information that might come in handy later on.


    Infoproductkillerreview

    ReplyDelete
  30. You have some really good posts. Thanks

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

    ReplyDelete
  32. Excellent and decent post. I found this much informative, as to what I was exactly searching for. Thanks for such post and please keep it up. Wow, this is pretty interesting. Inspiring, as well. Thanks for sharing such inspiring experience with us. Great blog, congrats.!
    http://www.innomaxmedia.org/website-redesign-service-singapore.php

    ReplyDelete
  33. this trick is not working

    www.googleservices.co.in

    ReplyDelete
  34. I added it my blog.It is good.My blog have beautiful tings >> www.Lapcool.info

    ReplyDelete
  35. hello brother how this error here after past this code
    Error parsing XML, line 743, column 7: The element type "b:skin" must be terminated by the matching end-tag "".

    ReplyDelete
  36. I know for beautiful web design CSS language is very important. Without CSS language can not think a beautiful look web design . And now this time CSS3 is update version of CSS language . Thanks for Sharing CSS3 coding.

    Texaso

    ReplyDelete
  37. helped me to improve a lot... Am new to the world of internet and its wide oppurtunities... I want to spread myself over the internet… I belive you will be helping me to make change in my career.... Make Money , Blogging Tips

    ReplyDelete
  38. I have applied it to my website www.samplequestionpaper.com But i don't know how to change color of the labels. please help admin

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM