Box Shadow Labels Style For Your Blog

As a blogger, either you are  beginner or expert must have your own taste when going to customize your
blog appearance. No matter the taste you have, most of you probably agree with me that you want always your blog to look different and unique. Not just imitating or copy paste from any other blog owners you like.

When customizing your blog template for example, you may wander or do blog walking from one blog to another to find any codes to embed to your blog.
For you don't want to be bothered with more details in customization / change you usually just use the codes you find and plainly paste to your template. that's not bad but sometimes the result won't be as exactly as you expected.

I'm in fact like other average bloggers with very limited skill on CSS, but I tend to do some modification with the codes I get from other tutorial blog  to suit my taste. Box shadow labels style widget is one of my modification work with widget.

If you may take interest displaying labels widget in box shadow style, give it a try the following codes.

Simply open your blogger / blogspot template editor (Edit HTML), copy the below codes, then paste them
above or  before  ]]></b:skin>   , save your template and done.

.label-size{
margin:0 10px 7px 0;
padding: 4px;
text-transform: capitalize;
border: solid 1px #ddd;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.2);
box-shadow: 0px 0px 5px rgba(0,0,0,.2);
float:left;
text-decoration:none;font-size:14px;color:#666; font-weight:bold;}
.label-size:hover {
border:1px solid #C6C6C6;
text-decoration: none;-moz-transition: all 0.5s ease-out;
-moz-transform: scale(1.1) rotate(-1090deg);
-webkit-transform: scale(1.1) rotate(-1090deg);
-o-transform: scale(1.1) rotate(-1090deg);
-ms-transform: scale(1.1) rotate(-1090deg);
transform: scale(1.1) rotate(-1090deg);
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:capitalize;
float:left;
text-decoration: none;
}.label-size a:hover {
text-decoration: none;
}

If you want to, of course you can have fun modify and customize the codes as expected. :)))