Tag Clouds are used to display all the categories or labels present in a blog. The inherent design of this widget in Blogger is very minimal and has a lot of space for creativity. In this post we will be showing Label Widget designs which you can easily integrate within your blog. We will design our labels like 3D buttons which will be looking attractive more than the default style. CSS3 Gradients and Box-Shadow properties are also used to give more stylish and puppy look to blogger labels. By default blogger comes with strange design they don’t look beautiful. You can customize your Label widget by adding some CSS3 codes. I hope you will like this. It has animated hovering effect and it will not get more space from your sidebar. We can't give you a demo for this tutorial. But you can see preview in description image.
Add it to blogger
1. Go To Blogger Dashboard>> Your blog >> Layout>> Add a Gadget >> Labels.
2. Now make the settings which are shown in the screenshot below.
3. Select the Cloud from the labels display setting.
4. Uncheck the Show number of post per label.
5. save it by pressing orange button.
1. Add Style Sheet for Making it Attractive
1. Go to template editor>> EDIT HTML: (Make a template backup before editing)
2. Find the following code in your HTML.
]]></b:skin>
3. Paste the following CSS code before/above that line:
.Label a{ background: rgb(0,100,180);
background: -moz-linear-gradient(top, rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1)));
background: -webkit-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: -o-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: -ms-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 );
display:inline-block;border: 1px solid #005ca6;padding:0 8px; color:#fff!important; height:28px; line-height:28px; text-transform:capitalize; text-decoration:none;float:left;margin-top:5px; font-size:14px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}
.Label a:hover{color:#000 !important; background:#123d60;}
4. Preview, you should see the button appear under sidebar widget.
5. Click Save if you like what you see.
2. Add second simple style sheet for making your labels attractive
View Preview
1. Go to template editor>> EDIT HTML:
2. Find the following code in your HTML.
]]></b:skin>
3. Paste the following CSS code before/above that line:
.Label a{float:left;padding:5px 8px;margin:2px 2px 0px 0;background-color:#1295C9;color:white;font-size:14px;text-decoration:none;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}
.Label a:hover{background-color:#303030;}
4. Preview, you should see the button appear under sidebar widget.
5. Now save your template And check your blog.
Troubleshooting
1. You can replace active background color with your color. Simply replace the "background-color" code highlighted in yellow with your own color code. check out our color code generator tool or generate color code using adobe Photoshop color picker tool.
2. You can also change hovering background color by changing background color highlighted in red color.
3. You can change animation speed by changing the duration (in seconds) in CSS .4s to .5s or .6s or any value which one you like.
I hope you enjoyed with this new look for your cloud labels. Suggest new features, your feedback and your thoughts on this tricks by leaving a comment and don’t forget to share this page.
