Recommended Article for you : get unlimited Freecharge Trick revealed

Customize Labels Widget with Stylish Cool Effects

Customize Labels Widget with Stylish Cool Effects
Labels widget displays list of the categories of posts. Creating labels helps to categorize the posts in groups. So it helps visitors to see the posts under a category. Default blogger Labels widget is not so Stylish. Don't worry, here I am sharing some cool interesting labels widget styles for you. This Labels widget can style using simple CSS codes. To do this follow the steps..



  •  Sign In to Blogger Dashboard
  • Go to Template -> Edit HTML
  • Find ]]></b:skin> and copy the code of label style you like above ]]></b:skin>
  • Save Template

 Black Forest Theme Labels with animated Scaling

.Label li {
        background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;
        border: 1px solid;
        border-radius: 6px 6px 6px 6px;
        float: left;
        font-size: 116%;
        list-style: none outside none;
        margin: 2px;
        padding: 4px;
        transition: all 0.3s ease 0s;
    }
.Label li:hover {
    transform: rotate(351deg) scale(1.7);
}

Yellow Customized labels Widget


    .Label li:before {

        background-image: -moz-linear-gradient(left top , #FEDA71, #FEBA47);

        border-bottom: 1px solid #D99D38;

        border-left: 1px solid #D99D38;

        content: "";

        height: 1.39em;

        left: -0.69em;

        position: absolute;

        top: 0.2em;

        transform: rotate(45deg);

        width: 1.3em;

        z-index: 1;

    }

    .Label li:after {

        background: none repeat scroll 0 0 #FFFFFF;

        border: 1px solid #D99D38;

        border-radius: 4.167em 4.167em 4.167em 4.167em;

        box-shadow: 0 1px 0 #FAEABA;

        content: "";

        height: 0.5em;

        left: -0.083em;

        position: absolute;

        top: 0.667em;

        width: 0.5em;

        z-index: 9999;

    }

    .Label li {

        background-image: -moz-linear-gradient(center top , #FEDA71, #FEBA47);

        border-bottom: 1px solid #D99D38;

        border-radius: 0 0.25em 0.25em 0;

        border-right: 1px solid #D99D38;

        border-top: 1px solid #D99D38;

        box-shadow: 0 1px 0 #FAEABA inset, 0 1px 1px rgba(0, 0, 0, 0.1);

        color: #996633;

        float: left;

        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;

        font-size: 0.75em;

        font-weight: bold;

        list-style: none outside none;

        margin: 0 0 7px 20px;

        padding: 0.417em 0.417em 0.417em 0.917em;

        position: relative;

        text-decoration: none;

        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);

        z-index: 1;

    }

Blue Customized Labels Widget


    .Label li:before {

        background-image: -moz-linear-gradient(center top , #1E5799 0%, #207CCA 100%);

        border-bottom: 1px solid #145091;

        border-left: 1px solid #145091;

        content: "";

        height: 1.39em;

        left: -0.69em;

        position: absolute;

        top: 0.2em;

        transform: rotate(45deg);

        width: 1.3em;

        z-index: 1;

    }

    .Label li:after {

        background: none repeat scroll 0 0 #FFFFFF;

        border: 1px solid #3F6893;

        border-radius: 4.167em 4.167em 4.167em 4.167em;

        box-shadow: 0 1px 0 #B5D8FF;

        content: "";

        height: 0.5em;

        left: -0.083em;

        position: absolute;

        top: 0.667em;

        width: 0.5em;

        z-index: 9999;

    }

    .Label li {

        background-image: -moz-linear-gradient(center top , #1E5799, #207CCA);

        border-bottom: 1px solid #145091;

        border-radius: 0 0.25em 0.25em 0;

        border-right: 1px solid #145091;

        border-top: 1px solid #145091;

        box-shadow: 0 1px 0 #CCE4FF inset, 0 1px 1px rgba(0, 0, 0, 0.1);

        color: #996633;

        float: left;

        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;

        font-size: 0.75em;

        font-weight: bold;

        list-style: none outside none;

        margin: 0 0 7px 20px;

        padding: 0.417em 0.417em 0.417em 0.917em;

        position: relative;

        text-decoration: none;

        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);

        z-index: 1;

    }

 Black Forest Theme Label like NetOops Blog Labels


    .Label li {

        background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;

        border: 1px solid;

        border-radius: 6px 6px 6px 6px;

        float: left;

        font-size: 116%;

        list-style: none outside none;

        margin: 2px;

        padding: 4px;

        transition: all 0.3s ease 0s;

    }

    .Label li:hover {

        transform: rotate(5deg);

    }

Skeleton Theme for Labels Widget

.Label a {
    color: #000000;
    text-decoration: none;
}
.Label li {
    border: 1px solid #000;
    border-radius: 6px 6px 6px 6px;
    color: #000000 !important;
    float: left;
    font-size: 116%;
    list-style: none outside none;
    margin: 2px;
    padding: 4px;
    transition: all 0.3s ease 0s;
}

Skeleton Theme with Painting Hover Effect

 
.Label a:hover
{
text-shadow:5px 5px 5px #dcdcdc;
background:orange;
border:1px solid orange;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
}

Leaf theme for Labels Widget


.Label a {
     -moz-border-bottom-colors: none;
     -moz-border-left-colors: none;
     -moz-border-right-colors: none;
     -moz-border-top-colors: none;
     background-color: #7FBF4D;
     background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
     border-bottom-right-radius: 30px;
     border-color: #63A62F #63A62F #5B992B;
     border-image: none;
     border-style: solid;
     border-top-left-radius: 30px;
     border-width: 1px;
     box-shadow: 0px 1px 0px 0px #96CA6D inset;
     color: #FFFFFF;
     float: left;
     font: 14px verdana;
     height: 18px;
     margin-bottom: 9px;
     margin-left: 10px;
     padding: 10px;
     position: relative;
     text-decoration: none;
     transition: all 0.5s ease-in-out 0s;
}

.Label a:hover {
     background: none repeat scroll 0% 0% orange;
     border-radius: 0px 30px 0px 30px;
     border: 1px solid orange;
     text-shadow: 5px 5px 5px #DCDCDC;
}

.Label {
     margin: 0px;
     padding: 0px;
     position: relative;
}
Close [x]

41 comments :

  1. The case tecnological tricks have been already involved in almost all the spheres of people's life. Education is quite prominent concerning this issue: students gadgets.

    ReplyDelete
  2. very nice post! thanks for this! :)

    ReplyDelete
    Replies
    1. Thanks.. keep visiting for more exciting widgets and tricks

      Delete
    2. Doesn't work. Every guy I visit and try to add his code all I get is crap.

      Delete
    3. This trip is working when if we selected list label not cloud label. I check it. you can check this on my blog

      Delete
  3. I tried to add this widget to my site http://www.makeuseofandroid.com. But unfortunately it doesn't shows any styling change. I know i must be my template problem, I try this one from many other sites too. But nothing is changed. Please help me.

    ReplyDelete
  4. awesome i love them ill defenitly use it on my blog
    redessocialesydescargas.com

    ReplyDelete
  5. How do I pay you back master!!!

    All other tricks failed to change my label font. All I wanted was to increase my label list font, and what have I got? A cool leaf styled list which animates and changes colour when hovered over!!!

    Thank you a lot!!

    ReplyDelete
  6. Awesome collection i use one of them for my blog
    http://techshout-bd.blogspot.com/

    ReplyDelete
  7. Guyz this does not work when your Tags are in "cloud" mode - you have to go to Dashboard > Edit the "Labels" widget option "Display" to "list" not to "cloud". Hope it works for you - for me it works just perfect. Thanks the author of this blog - helped me a lot!

    ReplyDelete
    Replies
    1. Gee! Thanks so much Elizabet! And i was trying to figure out what i did wrong!

      Delete
  8. http://blackmemorys.blogspot.com

    nice tutoriyal

    ReplyDelete
  9. Yes., you must set the label widget to be in "list" mode. Get the ID of your Label esp if you have more than one and use it this way: #Label1 instead of .Label as seen in the code. The first one with scaling effect not working unless you make some changes to the code. I did that and now working fine on my blog.

    ReplyDelete
  10. Wow! Its Working on my blog.www.thecinesizzlers.com,Thank you for sharing with us

    ReplyDelete
  11. Hello ! I recently Added 'Blue Customized Labels Widget' to my blogbhartiyacomics.blogspot.in Can I Increase the size of this widget and the font to 16px. If Yes then how ? ptraj2000@gmail.com

    ReplyDelete
  12. Yahoo :D , I tried on my site : http://riku2indonesianshare.blogspot.com/
    Thanks friend

    ReplyDelete
  13. im very happy about u r widgets.Im following and learning widgets on your blog.im especially very much impressed about label widget.

    Im not familiar about html codes, please provide me ?How to change Label Colour in Leaf Type Widget" i like change colour into pure yellow color,also tell me where to i insert that color in the widget

    Am very much thankful if u provide me solution

    Thanks and Regards

    ReplyDelete
    Replies
    1. Change color in following code,change #FFFFFF to color you want ,color codes are here
      http://netoopsblog.blogspot.com/2012/02/find-color-code-online-tool-blogger.html
      .Label a {
      -moz-border-bottom-colors: none;
      -moz-border-left-colors: none;
      -moz-border-right-colors: none;
      -moz-border-top-colors: none;
      background-color: #7FBF4D;
      background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
      border-bottom-right-radius: 30px;
      border-color: #63A62F #63A62F #5B992B;
      border-image: none;
      border-style: solid;
      border-top-left-radius: 30px;
      border-width: 1px;
      box-shadow: 0px 1px 0px 0px #96CA6D inset;
      color: #FFFFFF;
      float: left;
      font: 14px verdana;
      height: 18px;
      margin-bottom: 9px;
      margin-left: 10px;
      padding: 10px;
      position: relative;
      text-decoration: none;
      transition: all 0.5s ease-in-out 0s;
      }

      Delete
  14. Thanks http://fresherslikes.blogspot.in/

    ReplyDelete
  15. any of above change is not working in my blog...
    http://fresherslikes.blogspot.in/

    ReplyDelete
  16. Nice tutorial and post, thank my friend
    Check my blog http://fe-blogger.blogspot.com/

    ReplyDelete
  17. Nice post and good for you frend
    chek now my Widget
    http://fe-blogger.blogspot.com/2013/11/custum-widget-popolars-posts-animation.html

    ReplyDelete
  18. Nice Blog Jani Can You Give My The Templates For My MoviesBlog......

    ReplyDelete
  19. Thank you so much for your nice widget :-bd

    ReplyDelete
  20. hello sir..... mai jab koi bhi code paste kr raha hun aur save karta hun to wo pura code mere blog ke top pr likh jata hai , mai kya karun, mai simpal temlate use kar raha hun.....

    ReplyDelete
  21. How can we limit the number of tags in blogger tag cloud

    ReplyDelete
  22. Thanks a lot , 2 minute work and such a nice look my blog got :)

    Regards
    www.udzial.com
    Udzial Means Share

    ReplyDelete
  23. is it possible to customized newsreel widget?...it appears no thumbnails in the default setting,, only the title and snippet . can you help putting a thumbnail image like we usually see in post..thanks..i bookmarked your page because it is very helpful..thanks..

    ReplyDelete
  24. Awesome Article !!!
    If you want to learn about Blogger so click on the link below. Here we provide Basic To Professional Blogger Training........... Thanks !!!!

    http://www.bloggeroll.com/

    ReplyDelete

  25. Hi friends, good opportunity to win movie tickets, gifts from amazon and cash back from paytym, download the free mobile recharge app and share with friends and keep it for getting recharge regularly.
    . Click here: https://goo.gl/ojsJ7c

    ReplyDelete
  26. Friends try this link : https://goo.gl/ojsJ7c . It provides free recharges instantly. I tried and got rs 24 without facing any complications

    ReplyDelete

Ask your thoughts to us,We are happy to help you.


1.Please don't Spam
2.We strictly recommend to Click on Subscribe to email