0
Stylish Yellow Customized Labels Widget for Blogger



Stylish Yellow Customized Labels Widget for Blogger











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 Stylish Yellow Customized Labels Widget in Blogger


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

Stylish Yellow Customized Labels Widget for Blogger


  • 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 { float: left; margin: 0 0 7px 20px; position: relative; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.75em; font-weight: bold; text-decoration: none; color: #996633; text-shadow: 0px 1px 0px rgba(255,255,255,.4); padding: 0.417em 0.417em 0.417em 0.917em; border-top: 1px solid #d99d38; border-right: 1px solid #d99d38; border-bottom: 1px solid #d99d38; -webkit-border-radius: 0 0.25em 0.25em 0; -moz-border-radius: 0 0.25em 0.25em 0; border-radius: 0 0.25em 0.25em 0; background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47'); -webkit-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); z-index: 1; } 


.label-size:before { content: ''; width: 1.30em; height: 1.39em; background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47'); position: absolute; left: -0.69em; top: .2em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-left: 1px solid #d99d38; border-bottom: 1px solid #d99d38; -webkit-border-radius: 0 0 0 0.25em; -moz-border-radius: 0 0 0 0.25em; border-radius: 0 0 0 0.25em; z-index: 1; }


 .label-size:after { content: ''; width: 0.5em; height: 0.5em; background: #fff; -webkit-border-radius: 4.167em; -moz-border-radius: 4.167em; border-radius: 4.167em; border: 1px solid #d99d38; -webkit-box-shadow: 0 1px 0 #faeaba; -moz-box-shadow: 0 1px 0 #faeaba; box-shadow: 0 1px 0 #faeaba; position: absolute; top: 0.667em; left: -0.083em; z-index: 9999; } #Label1 { height: 210px; } 


.label-size:hover { background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c'); border-color: #e1b160; }


 .label-size:hover:before { background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c'); border-color: #e1b160; } 

Costimization:

Font-size: 0.75em; = 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: #996633; = 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 blogger,blogger label widget,free custom labels,colorful labels,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 blogger,blogger label widget,free custom labels,colorful labels,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 blogger,blogger label widget,label widget for blogger,blogger label widget,label widget for blogger,blogger label widget

Comment below, let me know what do you think?

Post a Comment

 
Top