Change Blogger Labels to Cute Black Color CSS Buttons

Blogger blogs can be customized or colorized more beautifully than your expectations. You may have seen many blogger users who have decorated their blogs with numerous colors and fancy styles. This all is done by using beautiful CSS tricks. If you are familiar with CSS then it won't be difficult for you to change your simple blogspot blog to a dynamic colorful room. However, if you don't have extensive knowledge of CSS then don't worry , because this is 2013 and you have the power of thousands of free resources available on the internet. You can just use Google for finding free resources. There are thousands of designers & blogs out there who have provided A to Z resources for free. We are one of them, and we've also decided to provide you specific widgets & resources for decorating your blogger blogs. And today we have a great widget for you which will easily change your Blogger Labels to beautiful buttons. Let's see it how? 

CSS3 Beautiful Black Color Label Widget

This widget is very easy to install on your blogger blog, you don't need to add any script etc to your HTML. Just you'll need to copy & paste some CSS codes inside the css section of your blog, and you'll see a beautiful Labels widget with black color buttons. Now let's start how to do it..

Steps are easy to follow:

• Go to Blogger >> Template >> Edit HTML
• Now find ... tag which will appear after tag
• If you can't find this tag just see below image for example

In above picture you can clearly see the ... tag which is holding all the CSS styles of your blog, so just click the arrow at left side for expanding the codes inside tag, and after expanding the codes just copy & paste the following code before tag or after tag:

#Label1 a{float:left;
height:18px;
line-height:18px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:10px;
padding:5px;
background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
color:#fff;
text-decoration:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;}
#Label1 a:hover{fbackground: rgb(73,192,240); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(73,192,240,1) 0%, rgba(44,175,227,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,192,240,1)), color-stop(100%,rgba(44,175,227,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */}
.label-size{line-height:1.5;align:left;}
.h2head-text {margin:-40px 10px 8px 55px;color:#666666;font-family:arial;font-size:13px;}
#Label1{width:320px;;border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #D8D8D8;}

Just save your template and you are all done. Now view your blog and check the label links widget in the sidebar, that would be looking same like this picture:

This is the same widget we are using on this blog, and this widget is super fast to load, because only CSS codes are used. If you haven't yet added the Labels widget then first go to Layout >> add a Gadget and Add the labels widget.

Need Help?

If you need any help regarding this widget or any other issue in your blogger blog then kindly use the comment form below and post your question. Take care till next tutorial.