6 Different Style Cloud Label Design for Blogger

Share it Please

"How to add Blogger labels widget in your blog and customize in your css code styles.Check out 6 Different Style Cloud Label Design for Blogger."

If you want to innovate your blog and make more professional so you need to make over your blog style like pro. Blogger labels one of the most important part of any blog because it's categories all post and easy to navigate any users to right topic.

Every pro bloggers must know about back end and front end code of your blog design and basic functions. Blogger Platform very easy to handle their codes and functions. You need to learn basics of css, html, java script and XML codes to handle Blogger Codes section.

Today I gonna discuss about how to add labels widget in your blog and how to customize in your style.

You Can Customized your blogger label so attractive by the using of CSS3 Widget. This widget is styled using CSS gradient color as background and box-shadow properties. If you have some knowledge about CSS3 then you will be able to Customized more attractive and impressive look as your style way.

I am giving you 6 showcasing style by which you can customize your blogger cloud label and note that you must have added cloud labels to your blog before you can customize it.

Now follow the some simple steps to add blogger labels and add custom css codes.

How to Add Label Widget in Blogger Blog

If you want to add this widget in your blogger account blog, you need to follow these instructions -

First Login to your Blogger Account and select to your Blogger Dashboard. Go to Layout option and Click Add Widget Link. Now scroll down to Labels button and click add labels widget.

Now you Configure labels Widgets according to your own.

Write Title for your labels widget name, Show only Selected labels, sorting by Alphabetically or By Frequency, Display labels by List or Cloud and also select Show numbers of post per Labels.

Now Save your widget Configuration and place your label widget in right place in your layout section.

How to add CSS Style Code in Blogger Blog

Now go to Template - Edit HTML Section and Click the button & expand the XML Codes.

Now Search for </b:skin>. Click ► to expand the code.

Copy & paste the following below CSS styles codes just above ]]></b:skin>.

{ All different style css codes below here and choose any one of them css style code and use in your blogger blog.}

and save code.

Blogger Label Style CSS Codes List -

Blogger Label Style 1 [ DEMO ]

.label-size {
line-height: 1.2;
background: #ebebeb;
display: inline-block;
color: #595959;
font-weight: normal;
font-size: 12px;
line-height: 100%;
padding: 6px 12px;
margin: 0 0 10px 5px;
text-decoration: none;
border-radius: 99px;
-moz-border-radius: 99px;
-webkit-border-radius: 99px;
float: left;
}
.label-size a{text-decoration: none;color:#595959;
}
.label-size span {color:#ff6220}
.label-size .label-count {color:#000}
.label-size:hover{
background: #dbdbdb;
color: #595959;
}
.label-size a:hover {text-decoration: none;color:#000;
}

Blogger Label Style 2 [ DEMO ]

.label-size {
line-height: 1.2;
background: #111;
display: inline-block;
font-weight: normal;
font-size: 12px;
line-height: 100%;
padding: 6px 12px;
margin: 0 0 10px 5px;
text-decoration: none;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
float: left;
}
.label-size a{text-decoration: none;color:#ccc;
}
.label-size span {color:#ff6222}
.label-size .label-count {color:#fff}
.label-size:hover{
background: #222;
}
.label-size a:hover {text-decoration: none;color:#fff;
}

Blogger Label Style 3 [ DEMO ]

.label-size {
line-height: 1.2;
background: #ff6220;
display: inline-block;
font-weight: normal;
font-size: 12px;
line-height: 100%;
padding: 6px 12px;
margin: 0 0 10px 5px;
text-decoration: none;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
float: left;
}
.label-size a{text-decoration: none;color:#222;
}
.label-size span {color:#fff}
.label-size .label-count {color:#fff}
.label-size:hover{
background: #ff5220;
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:hover {text-decoration: none;color:#000;
}

Blogger Label Style 4 [ DEMO ]

.label-size {
line-height: 1.2;
background: #3B5998;
display: inline-block;
font-weight: normal;
font-family:"Georgia";
font-size: 14px;
line-height: 100%;
padding: 10px 14px;
margin: 0 0 10px 5px;
text-decoration: none;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
float: left;
}
.label-size a{text-decoration: none;color:#efefef;
}
.label-size span {color:#fff}
.label-size .label-count {color:#fff}
.label-size:hover{
background: #3B5998;
}
.label-size a:hover {text-decoration: none;color:#fff;
}
.label-size a:before {
content: '\2022';
color: #FFFFFF;
margin-right: 4px;
font-size: 15px;
line-height: 13px;
height: 13px;
vertical-align: text-top;
text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}

Blogger Label Style 5 [ DEMO ]

.label-size {
line-height: 1.2;
display: inline-block;
font-weight: normal;
font-family:"Georgia";
font-size: 14px;
line-height: 100%;
padding: 10px 14px;
margin: 0 0 10px 5px;
text-decoration: none;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
float: left;
}
.label-size a{text-decoration: none;color:#efefef;
}
.label-size span {color:#fff}
.label-size .label-count {color:#fff}
.label-size a:hover {text-decoration: none;color:#fff;
}
.label-size-1{
background: #3B5998;
}
.label-size-1:hover{
background: #3B5095;
}
.label-size-2{
background: #00aced;
}
.label-size-2:hover{
background: #00affd;
}
.label-size-3{
background: #dd4b39;
}
.label-size-3:hover{
background: #dd4f29;
}
.label-size-4{
background: #cb2027;
}
.label-size-4:hover{
background: #cb2007;
}
.label-size-5{
background: #3f729b;
}
.label-size-5:hover{
background: #007bb6;
}

Blogger Label Style 6 [ DEMO ]

.label-size {
position:relative;
text-transform: Cpitalize;
text-decoration:none;
font-size:13px;
font-family:Georgia;
color:#fff!important;display:block;
}
.label-size a {
color:#fff!important;
font-weight:bold;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;text-decoration:none;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}
.label-count { display:none; }
.label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.label-size-1 a:hover {background:#16a085;}
.label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.label-size-2 a:hover {background:#2980b9;}
.label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.label-size-3 a:hover {background:#27ae60}
.label-size-4 a {background:#9b59b6;border-bottom:3px solid #6441a5;}
.label-size-4 a:hover {background:#8e44ad}
.label-size-5 a {background:#e74c3c;border-bottom:3px solid #bb0000;}
.label-size-5 a:hover {background:#c0392b}

Bonus Tips

If you want to customize these above css styles code then change color codes, border-radius, border and some other animation codes. if you want looks more professional your blog then learn css3 codes for more advancement.

If you like the these above css styles, please share on social networks and gives your feed backs in below comment section.

If you liked this article, then please subscribe to our YouTube Channel for Blogger video tutorials. You can also find us on Twitter and Google+.

January 13, 2015