Use of CSS To Change Blogger Labels to Cute Black Colour

Blogger blogs will be made-to-order or colorized a lot of superbly than your expectations. you'll have seen several blogger users United Nations agency have embellished their blogs with varied colours and fancy designs. This all is finished by victimization lovely CSS tricks. If you're accustomed to CSS then it will not be troublesome for you to alter your straightforward diaryspot blog to a dynamic colourful space. However, if you do not have in depth information of CSS then don't be concerned , as a result of this can be 2013 and you've got the ability of thousands of free resources accessible on the net. you'll simply use Google for locating free resources. There area unit thousands of designers & blogs out there United Nations agency have provided A to Z resources at no cost. we have a tendency to area unit one among them, and we've additionally set to supply you specific widgets resources for decorating your blogger blogs. And nowadays we've a good gismo for you which ones can simply modification your Blogger.

This contrivance is incredibly straight forward to put in on your journalger blog, you do not ought to add any script etc to your HTML. simply you'll have to repeat paste some CSS codes within the css section of your journal, and you will see a pretty Labels contrivance with black color buttons. currently let's begin the way to do it?

Let's Add It

Go to Blogger >> Template >> Edit HTML
Now find <b:skin>...</b:skin> tag which will appear after <head> tag
If you can't find this tag just see below image for example.

Now, before this tag </b:skin> add the following CSS code.

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

This is identical gizmo we have a tendency to area unit mistreatment on this diary, and this gizmo is super quick to load, as a result of solely CSS codes area unit used. If you haven't nonetheless intercalary the Labels Layout >> add a Gadget and Add the labels widget

Need Help?

If you wish any facilitate relating to this gizmo or the other issue in your diaryger blog then kindly use the comment kind below and post your question. lookout until next tutorial.

Sunday, 1 September 2013