How To Add Stylish Labels Widget In Blogger?

Also Read

How To Add Beautiful Labels Widget In Blogger?

Are you using your Blogger labels in a correct way to sort your content properly? In this article we will find what are labels in blogger and how to use labels widget in blogger. In this article you will come to know how to add stylish labels widget in blogger also.

Categories, tags and labels all the three are same and their main task is to sort your article. Labels are mostly for your site visitors for better navigation and not really for search engines. By arranging right label right way your visitors can pick the right content that they are interested in.

 

What Are Labels In Blogger?

Labels are known as blog categories. For instance, about us, contact with us are pages that you add it in your menu bar. So visitors are familiar with your blog what things you offer and so on. Labels are connected pages that show a few related blog contents.

For instance, you running a cooking blog and you are posting about "how to make a pizza" and you are arranging it with three labels like cooking, broiler and pizza. Again you are posting one more content about "how to make French fries" and you are arranging it with fry container, French fries and cooking. So if your visitors have any desire to go deeper into cooking they will use the label cooking which contains two posts.

 

Why Using Blog Labels is Important on Blogger?

Blogger has an element that permits to add blog labels into explicit categories. You might have used it inconsistently when making a post. Some blogger might use many tags and use handfuls for each post, that is an error for writhing a blog.

 

How Many Labels In Blogger Are Recommended?

This question really depends on your blog's theme. In Blogger you have just a single choice that is labels. You can have as many labels for your site, yet sort your article with not multiple labels and not multiple words per label. Never have a label without any posts in it.

For better reader's experience you can show your labels in both menu tabs and in sidebar. Show your main blog labels in your menu tab that has covered most articles. Show labels in sidebars that has less subjects in it.

 

Labels In Search Engine Optimization

Labels are just for visitors and not so much for web crawlers. So use labels perfectly to sort your article and never spam your keywords. As a matter of fact you labels are obstructed in your robots.txt so you don't have to think about Search Engine Optimization (SEO).

How Do I Add Stylish Labels On Blogger?

Step 1: 

Go to blogger dashboard.

Step 2: 

Click Layout >Add a Gadget >Labels.

Step 3:

Save the gadget on your favorite place. 

Step 4:

Click Theme >Edit HTML.

Step 5:

Click anywhere in the code area.

Step 6:

Press Ctrl+F and search for </head>.

Step 7:

Copy any of the below code and paste it above </head>.

Here are the codes.

Code 1:

<style> .Label li { background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent; border: 1px solid; border-radius: 6px 6px 6px 6px; float: left; font-size: 116%; list-style: none outside none; margin: 2px; padding: 4px; transition: all 0.3s ease 0s; } .Label a { color: #fff; text-decoration: none; } .Label li:hover { transform: rotate(351deg) scale(1.7); } </style>

Code 2:

<style> .Label li:hover { transform: rotate(5deg); } .Label li { border: 1px solid; border-radius: 6px 6px 6px 6px; color: #000000 !important; float: left; font-size: 116%; list-style: none outside none; margin: 2px; padding: 4px; transition: all 0.3s ease 0s; } .Label a { color: #000; text-decoration: none; } </style>

Code 3:

<style> .Label li { background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent; border: 1px solid; border-radius: 6px 6px 6px 6px; float: left; font-size: 116%; list-style: none outside none; margin: 2px; padding: 4px; transition: all 0.3s ease 0s; } .Label li:hover { transform: rotate(5deg); } .Label a { color: #fff; text-decoration: none; } </style>

Code 4:

<style> .Label li:before { background-image: -moz-linear-gradient(center top , #1E5799 0%, #207CCA 100%); border-bottom: 1px solid #145091; border-left: 1px solid #145091; content: ""; height: 1.39em; left: -0.69em; position: absolute; top: 0.2em; transform: rotate(45deg); width: 1.3em; z-index: 1; } .Label li:after { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #3F6893; border-radius: 4.167em 4.167em 4.167em 4.167em; box-shadow: 0 1px 0 #B5D8FF; content: ""; height: 0.5em; left: -0.083em; position: absolute; top: 0.667em; width: 0.5em; z-index: 9999; } .Label li { background-image: -moz-linear-gradient(center top , #1E5799, #207CCA); border-bottom: 1px solid #145091; border-radius: 0 0.25em 0.25em 0; border-right: 1px solid #145091; border-top: 1px solid #145091; box-shadow: 0 1px 0 #CCE4FF inset, 0 1px 1px rgba(0, 0, 0, 0.1); color: #996633; float: left; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 0.75em; font-weight: bold; list-style: none outside none; margin: 0 0 7px 20px; padding: 0.417em 0.417em 0.417em 0.917em; position: relative; text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); z-index: 1; } </style>

Code 5:

<style> .Label li { background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent; border: 1px solid; border-radius: 6px 6px 6px 6px; float: left; font-size: 116%; list-style: none outside none; margin: 2px; padding: 4px; transition: all 0.3s ease 0s; } .Label li:hover { transform: rotate(351deg) scale(1.7); } .Label a { color: #fff; text-decoration: none; } </style>

Step 8:

Save theme.

You are done.

Conclusion

Hope you have successfully added these codes on your blog. If you like this way to add stylish labels widget in blogger, please share it to your friends.