You know you can change your all blog design as you like. its possible you can change all design of your blog with CSS . you divide you blog header in 2 parts and you can also change your blog footer color and design with CSS same as my blog. And I know Everyone love himself blog and it try to make it more beautiful and professional. I have all tips about how to make design of blog as you like and I have also amazing tips how to make your blog design SEO friendly. But today I will tell you one best and amazing tip of CSS. This is design your blog labels style with CSS.
Labels means you can add links our tags in sidebar. But they didn’t look like good . So you need to customize labels style with CSS. I add below two pictures of design labels because you see here how to look you blog when you Apply this style. You also check this style in my blog I also add this beautiful and simple code in my blog.
Picture No:1
Picture No:2
Don’t forget to check this: add Flying Letters with Mouse Pointer
Ok so let start procedure….
Design Labels with CSS3
You design your blog labels by following these simple steps
1. Log in to you account and go to Dashboard
2. Go To Template and Click Edit HTML>>Proceed
3. Find ]]></b:skin> Using [Ctrl + F ]
4. Now Copy Below Code Using [Ctrl +C ] and just Paste Using[Ctrl + V ] above/before ]]></b:skin>
.cloud-label-widget-content span a{margin:0 2px 6px 0;padding: 3px;text-transform: uppercase;border: solid 1px #6666FF;border-radius: 5px;float:left;text-decoration: none;font-size:10px;}.cloud-label-widget-content span a:hover {border:1px solid #FF0099;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); }
5.After pasting this code you Simply Click on Save Template.
Add a Labels Widget in Layout
If you didn’t add label widget in your blog so simply go to Blog Layout and Click Add Gadget and one popup window will appear same as below picture…
Scroll down and you see Labels button Click on it. Same as below picture.
When you click on the labelsbutton then you will see some sitting and then you first select “All labels” 2nd “Alphabetically” and 3rd “Cloud” and also un-check the check-box which write” Show number of posts per label” Same below Picture.
If you add already label code so its ok you only go to layout and simply edit labels widget do all setting same as above Picture.
I hope you like this post. If you have any problem to related this topic so write below comment. I give answer in 24 hours and also Subscribe My E-mail Updates.
