Make Beautiful Blogger Labels Design 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.

How to Design Blogger Labels with CSS3?

To Design blogger labels follow these steps:

• First log-in to your blogger account and select the blog you want to design.
• Go to Template >> Edit HTML.
• 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

• 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. 

Now view your blog and you will see your labels with a new buttons style -:)

Don’t forget to subscribe us via email and sharing this post.

Provided You By: SAHI SOFT