Helf India

How to use colorful labels in Blogger | Step By Step

Hello, friends I always try to teach something better for all of us, so today in this post “How to use colorful labels in Blogger | Step By Step”, we will learn about a new feature of blogger which is on changing the color of label (tag) in a Blogger Blog.

If those labels are colored then the eyes of our readers cannot ignore it, so today in this article, I am teaching you how to use colorful labels in Blogger Blog.

How to use colorful labels in Blogger  Step By Step

If you think that your visitors will like the colorful label, then you too can use colorful labels in your blog.

Creating a widget template for Blogger is not a difficult task, just once you learn the coding of blogger, it is very easy for you.

So friends, try this method once, this method has been very useful in increasing the traffic of our blog.

Designing a blog with suitable and attractive colors makes our blog looks more professional and beautiful, and readers are much interested in reading.

Note: Don’t use colors that are too bright, as it might hurt our eyes.

If you also want to add a category widget in your blogger blog, read this: How to add Category Widget in Blogger? Step by Step Guide

How to use Colorful Label in Blogger?

 

For making the labels of your blog colorful you need to simply follow my step by step guide mentioned below.

Step 1:

1. Go to your Blogger Dashboard >> Layout of your blog.

2. Click on Add a Widget, just at the section where you want to use colorful labels.

3. Now a popup window will open, click on “Labels” in it.

How to add colorful labels in Blogger Blog

  1. Tick on Cloud.
  2. Now click on the Save button.

Step 2:

1. Now go to the Template >> Edit HTML of the blog.

2. By clicking anywhere inside the html box, then click on Ctrl + F button and search for ]]> </ b: skin>.

3. Now paste this below mentioned code above ]]></ b: skin>.

/* css color label start by OHMH.IN*/

.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
  }

.sidebar .label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
}
.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#1831E8;border-bottom:3px solid #0724FC;}
.sidebar .label-size-4 a:hover {background:#040B44}
.sidebar .label-size-5 a {background:#EC29CC;border-bottom:3px solid #FD06D5;}
.sidebar .label-size-5 a:hover {background:#6C045B}
/* css color label end by OHMH.IN*/

Copy the code and paste it above ]]> </ b: skin>.

Friends, if you are not understanding the coding properly, then please do refer to the image below.

How to change color of labels in Blogger

4. Finally click on Save Template.

Now your complete settings are been made, now you can open your blog and check the look of the labels.

If you still have any kind of problem-related to blogging or any other queries, then do let me know in the comment, I will be happy to assist you.

Also, Read Our Other Posts:

I hope now you can change the label color of your blog with the help of our post “How to use colorful labels in Blogger | Step By Step”, if so, then do share this post on social media.

Somehow, for someone on social media, it will be helpful.

Leave a Comment

Your email address will not be published. Required fields are marked *