Customize Blogger Labels Links with CSS3 free

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

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]

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