HOT!Buy Ready-Made Authority WebsitesClick Here

Making Blogger Professional, Important Updates !!

Hello SoraBloggingTips Readers, If you are reading this, then we would like to appreciate your efforts for being supportive. We know its har...

How to Add Stylish Cloud Label Widget In Blogger


Cloud Label is a official blogger widget and provided by them only, So today we are going to learn How to Add Stylish Cloud Label Widget In Blogger, This widget will help you to categories your blog content in perfect and standard way. it also helps to manage your blog bounce rate in control.
Lets move further and see How to Add Stylish Cloud Label Widget In Blogger. You can check a live preview of the Author Box widget by clicking the button below.

Let's Start Step-1 ( Adding The Widget

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

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 same as the picture below.

Step-2 ( Styling ) 

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

/* ######## Cloud Label Widget By Sorabloggingtips.com ######################### */
.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 :- The following Css only works for Cloud Label Widget if you put the setting for List label it will not work properly.

Conclusion

Congrats !! You have made it. now you have learned that How to Add Stylish Cloud Label Widget In Blogger. Visit your blog and check the awesome widget live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us. Arrivederci !! (Goodbye in Italian).
How to Add Stylish Cloud Label Widget In Blogger How to Add Stylish Cloud Label Widget In Blogger Reviewed by SoraBloggingTips on December 14, 2016 Rating: 5

3 comments:

  1. this stylish cloud label widget did not work for my blog
    http://www.excelive.com

    ReplyDelete
    Replies
    1. Your template already has a custom label design.

      Delete

Note : -We have stopped giving support to free version users, please read this article Making Blogger Professional, Important Updates !!. If You Are Facing Any Problem While Setting Up The Free Theme, Then We Recommend You To Read Our FAQ(Frequently Asked Question) Page.