Wednesday, June 13, 2018

How to Add Stylish Cloud Label Widget In Blogger

Hi guys ! 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 the picture below.

LET'S START

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.

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.

You have made it. 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,

Credit to: SoraBloggingTips

Thank you for using my tutorial's ^^ Leave a comment here ! so i can re-visit you!