Thursday , 4 January 2018

Customize Blogger Labels Links with CSS3

Designing Blogger blogs is now becoming easier. You can design any of your blog part with rocking CSS3 codes. Every part of your blog has different CSS properties, located in head section; so you can change them any time. Today we will design the labels in blogger. Blogger labels are the links or tags which we can add to our sidebar for easy user navigation. By default they don’t look beautiful. So we need to add some CSS codes to our style sheet to make them looking attractive. We will design our labels like buttons which will be looking more attractive than the default style

Example Picture

Designing blogger labels

How to Design Blogger Labels with CSS3?

To design blogger labels follow these steps:

  1. First log-in to your blogger account and select the blog you want to design.
  2. Go to Template >> Edit HTML
  3. By using CTRL+F key find this code ]]></b:skin>

Now just above/before the code you’ve found at step 3 paste the following CSS3 codes.

.cloud-label-widget-content span a{margin:0 2px 6px 0;padding: 3px;text-transform: uppercase;border: solid 1px #C6C6C6;border-radius: 3px;float:left;text-decoration: none;font-size:10px;}.cloud-label-widget-content span a:hover {border:1px solid #6BB5FF;text-decoration: none;-moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out;-moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); }

After having pasted this code save your template.

How to Add a Label Widget

4. Now if you’ve already added a label widget then its ok, just make this setting.
Where it says “Display” There are two options List & Cloud, from those two options list and cloud select the cloud option and also un-check the check box which says “Show number of posts per label”[see the picture for example]

Blogger labels styles

In case if you haven’t added a label widget yet then just go to Blog Layout >> Add a Gadget Click it>> and a pop up window will appear, scroll down and you will see a widget labels; so just click the Add + button and you will see the setting for labels as you are told above at step 4. Make correct setting as showing in above picture and save the widget. 

After saving the gadget, you just need to view your blog in a new window in order to see the effect. It’s very simple trick for blogger users and can easily be used. You can even change the color of the links and the backgrounds according to your needs. However, if you face any difficulty while adding this small widget to your blog then let me know by posting your comment below the post. I’ll try to answer your question and resolve your problem.

Have a nice day and happy blogging 🙂

About Abdul Wali

Abdul Wali is a Web Developer, SEO Consultant and Online Instructor working online for last 6 years on the internet and managing several successful websites. You can contact him via Email or follow him on Facebook. Also add him on .

  • Farooq

    Salam Sir ye work nhi kr raha e plz videos me btain,.,.,. thnx

    • w/salam, brother I’ll try to create a video tutorial for it.

  • assalam-o-Alaikum bahi jan …mujhe adsense sa al payment lil b chuki ha mager aj kal earning nahi ho rahi or visitor a raha ha mere blog par..ap bta sakta ha kiya problem ho sakti ha ya..please dear wali bahi tell me…

    • w/salam,
      earning k lye traffic/visitors aur original content ka hona lazmi ha, agar ap continously new content publish kar rahe hai, tu lazmi traffic ma izafa hoga aur traffic/visitors ma izafa hoga tu earning bhi bahegi.

  • Aslam o Alikum
    Brother Apka Blog Blogger per Delete hone k bad apne apna kaam itni jaldi recover ker liya hai mein bohat khush hn

    • w/salam,
      brother ya aap ki duain hai, aur dosri bat ya ka mehnat aur lagan se namumkin ko bhi mumkin banaya ja sakta ha. aur ham ne apni bharpor mehnat ki jis se ya possible hoa.

  • assalamo alaikum bhai blogger ke blog pe folder kaise bnate hai aur data kaise upload karte hai khuda hafiz

    • w/salam, brother blogger k blog ma folder nahi banta.

  • Nice post.. Really helped on my blog..!!!

  • Wonderfull Wali Khan your have done a great job I love Your All posts these are really qualitative work and Best of luck for future.