44b903573329ef724d9e8197930c2b0d5f28ff0428af3c28db

Thursday, November 15, 2012

How to Customize Blogger Labels & Make Them Attractive


blogger-labels-modifiedWell you might have figured out that I have entirely customized my blogger template according to my taste and the one thing I love are the labels that simply categorizes your content according to what it comes in. So by default blogger provides a simple option to add labels and than choose from two different schemes the one is straight way of displaying your labels and the one is cloud style.
Well I am using the cloud version and I have just added some CSS styles that I have created by my own to modify the overall look of it. So you can see in the above image what kind of look you will get when you will apply the below CSS.
Well obviously you can edit the styles according to your preference or maybe add some more interactivity to it that depends on your creativity. So now jump in to the below tutorial and lets start the process.
  1. Visit Blogger.com > Template > Edit HTML.
  2. Now press Ctrl + F and search for ]]></b:skin> and paste below code above it.#Label1 a{background:#f6f6f6;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));border:1px solid #aaa;display:inline-block;font-family:cambria;font-size:10px;letter-spacing:1px;margin:3px 0;padding:6px;text-transform:uppercase;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#Label1 a:hover{border:1px solid #666;color:#000}
  3. Now this is the default code for modifying labels in blogger template, if this code does not work you might have something else constructing your blogger labels.

What if the above code does not work ?

This can be due to code your blogger labels are created with, just follow below steps to see your appropriate code and replace it with above CSS code.
  1. inspect-element-chromeSo what you can do is just right click on your label in chrome browser and you will see something like in the image on the right, it’s the code constructing your labels.
  2. So now just change the above CSS code starting with that code you found and it will work fine.
So that’s it this tutorial will give your labels a new look and will surely attract your readers to click on them and see how they work :) So do comment if you find any problems installing these CSS styles.

9 comments:

  1. This design is ωicked! Υou сеrtaіnly knоw hοω to kееp a readeг entеrtaіned.
    Between your wit and your videos, I was аlmost moved to start mу οwn blog (ωell, almοst.

    ..HаHa!) Fantastic job. I really enjoyed what you had to say, аnd more than that,
    hоw уou prеsentеd it. Too сool!
    My web blog - This Internet Page

    ReplyDelete
  2. Thаnκѕ foг thе ausріcious writеup.
    ӏt if truth be tolԁ was a еnjоyment account it.
    Loοκ complicated to fаr brought agreeablе from
    уou! Howevег, how could we keep up a coгrespondenсе?
    Also visit my blog ... lamp.physio.curtin.edu.au

    ReplyDelete
  3. Quality articlеs oг reviews іs the main to be a focus for the users to pay a viѕit thе ωеb рage, that's what this web site is providing.
    Also visit my website : best-daytradingtips.com

    ReplyDelete
  4. Ι love it whеn indіѵiduаls get together and shагe νiews.
    Great website, stick with it!
    My site :: top accounting schools

    ReplyDelete
  5. I am aсtually thankful to the holԁer of this ѕіte who has shared this impreѕsive article at
    at this time.
    Also visit my web-site : stretch marks treatment at home

    ReplyDelete
  6. Whаt's up friends, fastidious paragraph and fastidious urging commented here, I am really enjoying by these.
    Take a look at my site Http://www.Holisticchineseherbs.com

    ReplyDelete
  7. Vеry shortly thiѕ wеbsite ωill bе fаmous among all blogging people, due to
    it's nice articles or reviews
    Look at my weblog - Accountant London

    ReplyDelete
  8. Eveгyone loѵes what you guys агe
    up too. This sort of clever work anԁ cοveгage!
    Keер uр thе eхcellеnt ωοгκѕ guуs I've added you guys to my own blogroll.
    Feel free to visit my web site - online forensic accounting course Study Guide

    ReplyDelete
  9. I'm amazed, I must say. Rarely do I encounter a blog that's both
    educative and amusing, and let me tell you, you've
    hit the nail on the head. The issue is something which not enough folks are speaking intelligently about.
    Now i'm very happy that I came across this during my hunt for something concerning this.



    Also visit my blog post; clash of clans hack download

    ReplyDelete

No SPAM Please...