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.
How to Choose correct labels?
Decide at most 10-20 labels for your entire blog and always link new posts to them. Take an example of labels used by Blogger Planet blog. Since I frequently write on widgets, templates, blogging tips and SEO tips therefore I have chosen these keywords for letting my users know what categories do the blog offers for healthy reading. You can take an idea by looking at all keywords I used in my label cloud.
How to Add Animated Style Labels Widget in Blogger
- Go to Blogger >> Layout>>Add Gaget
- Choose “Labels” Widget.
- Change Settings Like The Image Below
- 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;
padding:0;
position:relative;
}
.label-size a{
text-decoration:none;
float:left;
height:18px;
line-height:18px;
position:relative;
margin-bottom: 9px;
margin-left:10px;
padding:10px;
background-color: #eeeeee;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
background-image: linear-gradient(top, #eeeeee, #cccccc);
border: 1px solid #ccc;
border-bottom: 1px solid #bbb;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #333;
font: bold 12px verdana;
text-align: center;
text-shadow: 0 1px 0 #eee;
}
.label-size a:hover {
background-color: #dddddd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
background-image: linear-gradient(top, #dddddd, #bbbbbb);
border: 1px solid #bbb;
border-bottom: 1px solid #999;
text-shadow: 0 1px 0 #ddd; }
button.clean-gray:active {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; }
Costimization:
Font-size: bold 12px; = This is the Font Size of Labels/Tags that is displayed on your blog You can easily customize its font with your own choice.Color: #eeeeee; = 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
TAGS:>
label widget for blogger,blogger label widget,free custom labels,colorful labels,label widget for blogger,blogger label widget,free custom labels,colorful labels,label widget for , label widget,free custom labels,colorful labels,label widget for ,blogger label widget,free custom labels,colorful labels,label widget for ,blogger label widget,free custom labels,colorful labels,label widget for ,blogger label widget,free custom labels,colorful labels,
Post a Comment