How to Add A Stylish Cloud Label Widget In Blogger

Cloud Label is one of official blogger'd=s widget actually they are then only blogging platform providing the widget. Anyway their widget comes with no styling and sometime can give you blog n odd look. Therefore in this post you are going to learn 'How to Add A Stylish Cloud Label Widget' in your blogger blog, This widget helps to grouping your blog content in perfect standard way and also notifying you visitor which post is related to which. On the hand too it also helps to manage your blog bounce rate. Let's go forward and learn how to add this widget to you blog today.

N/B: Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

Step 1: The First thing you need to do is to login into your Blogger account and go to >> Layout >> Add Label Widget From the Layout and put the settings just like show in the picture below.

Step 2: In the template, search for the ]]></b:skin> tag  and just above it paste the following Coding.

.cloud-label-widget-content {
text-align: left
}
.cloud-label-widget-content .label-count {
background: #2b2b2b;
color: #fff!important;
margin-left: -3px;
padding-right: 3px;
white-space: nowrap;
border-radius: 2px;
padding: 1px 4px !important;
font-size: 12px !important;
margin-right: 5px;
}
.cloud-label-widget-content .label-size {
background: #ebebeb;
display: block;
float: left;
font-size: 11px;
margin: 0 5px 5px 0
}
.cloud-label-widget-content .label-size a,
.cloud-label-widget-content .label-size span {
height: 18px !important;
color: #2b2b2b;
display: inline-block;
font-size: 12px;
font-weight: 500!important;
padding: 6px 8px
}
.cloud-label-widget-content .label-size a {
padding: 6px 10px
}
.cloud-label-widget-content .label-size a:hover {
color: #000!important
}
.cloud-label-widget-content .label-size,
.cloud-label-widget-content .label-count {
height: 30px!important;
line-height: 19px!important;
border-radius: 2px
}
.cloud-label-widget-content .label-size:hover {
background: #2b2b2b;
color: #fff!important
}
.cloud-label-widget-content .label-size:hover a {
color: #fff!important
}
.cloud-label-widget-content .label-size:hover span {
background: #ebebeb;
color: #2b2b2b!important;
cursor: pointer
}
.cloud-label-widget-content .label-size-1,
.label-size-2,
.label-size-3,
.label-size-4,
.label-size-5 {
font-size: 100%;
opacity: 10
}

Note that the CSS code only works for Cloud Label Widget and not for list label widget.

Share: