Design Your Label Widget with Matrix Effects

There are many label designs that has been around the blogosphere, since before be see a lot of colorful labels from other blogs, one example is my previews post designing your labels with 3D buttons that is to give you options of stylish labels.

Today i am sharing a unique and simple design that has a matrix effects,
Animated beautiful flash twitter follow me buttons
Ultimate stylish Numbered page navigation
Accordian table of Contents for blog sitemaps

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.
If you already installed this widgets
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-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
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: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none;
}

I hope you enjoy my share 🙂