0
Add Customize Treandy Labels Cloud in Blogger (CSS)


How Navigation Labels Improve SEO

If you think of your website as a map, navigation labels name the streets, features, shopping districts, and even major buildings like libraries and community centers. Does that description sound too expansive for something so humble? Maybe you need to rethink your definition of navigation labels.




Every time you write a post on your blog you have the option to add some Labels to that post.While most Bloggers don't give much thought to the labels they use and some don't add any labels at all they can be very beneficial to your blog in a number of ways, but only if used correctly.Using labels in the correct manner can help your blogs performance in Search, leading to more traffic and labels can be a great way for visitors to navigate your blog keeping them browsing through your archive.So by simply following a few rules and putting some thought into the labels you select you can get more traffic to your blog and increased page views from that traffic.



Tested in> Firefox 4, Safari 4, Chrome 13, Opera 10, IE 8

How to Add Colorful CSS3 Labels Widget in Blogger


  • Go to Blogger >> Layout>>Add Gaget
  • Choose “Labels” Widget.
  • Change Settings Like The Image Below 


Add Customize Treandy Labels Cloud in Blogger (CSS)


  • Go to Blogger >> Template >> Edit HTML
  • Now Find ]]></b:skin> ( Press Ctrl+F button from keyboard to find)
  • Copy and Paste The Following Code Above ]]></b:skin>



/--------BLOGGERPLANET.COM —————- */
.label-size{
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;
color:#666;
}
.label-size: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);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a  {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none;
}

Costimization:

Font-size: 10px; = This is the Font Size of Labels/Tags that is displayed on your blogger. You can easily customize its font with your own choice.

Color: #666; = This will change the Text Color of Labels/Tags that is displayed on your blogger. You can easily customize its font with your own choice. You may generate colors from HEX wheel color generator or use our HTML color generator tool to generate color codes own your desires.



If you have any doubt in your mind, you may ask via comments or contact form.

DON'T FORGET TO "SUBSCRIBE" or"LIKE" FOR FURTHER UPDATES

Comment below, let me know what do you think?

Post a Comment

 
Top