How to Change Blogger Labels in Grey Style

Here at Techdomz , we keep on posting blogger tutorials to help our blogger friends to make their blog more beautiful and attractive. In this blogger tutorial you will learn how to change default blogger labels design in grey style using a simple CSS code.

So lets see how to change blogger labels in grey bricks style. It will change blogger labels or category in simple grey box with easy CSS styled coding as most of the blogger use on their blogs. It is very simple, beautiful and mostly used style labels. Each category or label shows in grey border color and looks very clear to navigate.

Change Blogger Labels Design in Grey Style

Follow below instructions to convert default blogger labels or category into grey style. Give it a try to give your BlogSpot or Blogger labels more attractive look than before.

1. Go to Blogger Dashboard, then click on Layout tab and click on Add Gadget. Now add Labels gadget and Unchecked “Show Number Of Post Per Label” and click on Save button.

2. Click on Template tab and search ]]></b:skin> by pressing Ctrl + F. Now copy below CSS code and paste the copied code just above/before the ]]></b:skin>.

.list-label-widget-content ul{ list-style-type:none; padding-left:0px !important; display:inline-block !important;}.list-label-widget-content li { display:inline-block; }

 .list-label-widget-content li a {color: #777;font: 9px verdana;text-transform: uppercase;transition: border-color .218s;background:#f4f4f4;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));display: inline-block;text-shadow: 0 1px 0#fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s;background:#f3f3f3;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));border: solid 1px#ccc;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;margin: 0 4px 4px 0;padding: 3px 5px;text-decoration: none;}.list-label-widget-content li a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2pxrgba(0,0,0,0.15);}

3. Thats all you had to do. Simply Save your template now and visit your blog .