3 Attractive CSS Cloud Label Styles For Blogger

In this post, we are going to learn how to customize label or category widget. Like popular post widget this also the blogger default widget which we can add from widget section. This widget helps us to categorize the blog posts and help the visitors to pick their favorite post from different categories, so this a handy widget and you can use it as a navigation menu. So this every important to customize this widget professionally, but the blogger default template doesn’t have effective style for it, but we can see different styles in blogger custom template different designer apply different styles for this category widget. If you aren’t satisfy from your blog’s label design don’t worry, today I bring different stylish design for you, select a style from below and apply to your blog easily.

How to add Cloud Label widget in blogger

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
• Go layout section, add a new widget
• Select the label widget from the pop window. By default, we can add this widget in two styles, could style and List style.
• Select could because in this post we only customize could label and click on now save button.

How to customize cloud label widget in blogger

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

• 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.
• Go template and then click edit HTML and after opening the template, search ]]></b:skin> tag
• Paste the CSS code copied just above of this tag
• Click on save template button.

Now view your blog and check the results, hopefully, it will be working on your blog.

Css3 Beautiful Category Widget For Blogger

.label-size a { margin: 0 2px 6px 0; padding: 8px; border: solid 5px #32E097; border-radius: 3px; float: left; color: #FFF; background-color: #E52C79; font-family: Raleway; font-size: 18px !important; text-decoration: none !important; word-spacing: 8px; } .label-size span { margin: 0 2px 6px 0; padding: 8px; border: solid 1px #C6C6C6; border-radius: 3px; float: left; color: #FFF; background-color: #932CE5 !important; font-family: Raleway; font-size: 18px !important; text-decoration: none !important; font-weight: bold; word-spacing: 8px; } .label-size a:hover { margin: 0 2px 6px 0; padding: 8px; border: solid 5px #32E097; border-radius: 3px; float: left; color: #FFF; background-color: #D22CE5; font-family: Raleway; font-size: 18px !important; text-decoration: none !important; word-spacing: 8px; zoom: 1; }

Colorful Cloud Label Style For Blogger

.sidebar .label-size { position:relative; text-transform: uppercase; text-decoration:none; font-size:13px; font-family:Open Sans; color:#fff!important; } .sidebar .label-size a { color:#fff!important; font-weight:bold; padding:8px 10px; margin:0 6px 6px 0; float:left; display:block; -moz-transition: all 0.4s ; -o-transition: all 0.4s; -webkit-transition: all 0.4s ; -ms-transition: all 0.4s ; transition: all 0.4s ; } .sidebar .label-size-1 a {background:#BC951A;border-bottom:3px solid #BC761A;} .sidebar .label-size-1 a:hover {background:#BC761A;} .sidebar .label-size-2 a {background:#E73C69;border-bottom:3px solid #226693;} .sidebar .label-size-2 a:hover {background:#2980b9;} .sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;} .sidebar .label-size-3 a:hover {background:#27ae60} .sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;} .sidebar .label-size-4 a:hover {background:#8e44ad} .sidebar .label-size-5 a {background:#E73C69;border-bottom:3px solid #922C20;} .sidebar .label-size-5 a:hover {background:#c0392b}

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; }