Styling CSS Cloud Label

Before to apply CSS effects on this widget. We need to add this widget to our blog. If you have already added in your blog, then skip this step. To add this follow the below steps.

Login your blog account

1. Go layout section, add a new widget
2. Select the label widget from the pop window. By default, we can add this widget in two styles, could style and List style.
3. Select could because in this post we only customize could label and click on now save button.

How to customize could label widget in blogger

After the adding could label in your blog. Now we are going to CSS effects in it. Follow the below steps.

1. First of all, select your favorite design from below and click on view code button and copy all CSS code from the appearing pop-up window.
2. Go template and then click edit HTML and after opening the template all code, search here ]]></b:skin>
3. Paste the CSS code copied just above of this tag
4. Click on save template button.

Style 1

Attractive CSS Cloud Label Style For Blogger

.label-size {
    margin: 0 2px 6px 0;
    padding: 3px;
    text-transform: uppercase;
    border: solid 1px #C6C6C6;
    border-radius: 3px;
    float: left;
    text-decoration: none;
    font-size: 10px;
    color: #666;
}

.label-size:hover {
    border: 1px solid #6BB5FF;
    text-decoration: none;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    -moz-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    transform: rotate(7deg);
    filter: progid: DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
    zoom: 1;
}

.label-size a {
    text-transform: uppercase;
    float: left;
    text-decoration: none;
}

.label-size a:hover {
    text-decoration: none;
}

Style 2

/* cloud label by www.bloggersstand.com*/

.label-size-1,
.label-size-2,
.label-size-3,
.label-size-4,
.label-size-5 {
    font-size: 100%;
    filter: alpha(100);
    opacity: 10
}

.cloud-label-widget-content {
    text-align: left
}

.label-size {
    background: #0dd7b4;
    display: block;
    float: left;
    margin: 0 3px 3px 0;
    color: #ffffff;
    font-size: 11px;
    text-transform: uppercase;
}

.label-size a,
.label-size span {
    display: inline-block;
    color: #ffffff !important;
    padding: 6px 8px;
    font-weight: bold;
}

.label-size:hover {
    background: #333333;
}

.label-count {
    white-space: nowrap;
    padding-right: 3px;
    margin-left: -3px;
    background: #333333;
    color: #fff !important;
}

.label-size {
    line-height: 1.2
}