Animated Labels For Blogger

On In , 1 Comment
Here is another beautiful Label Cloud Widget for you with CSS3 animations. As we have seen before, here is also no need of editing the HTML template. Just add few steps of CSS. That's all!
Animated Labels For Blogger

Step I: Adding the Labels Widget to Your Blog

From your Blog's Dashboard, navigate to Layout --> Add a Gadget --> and select Labels from the list. Select Sorting by Frequency. Don't forget to select Cloud display. Now Save the Gadget.

Configuring Blogger Labels

Step II: Adding CSS

Now go back to your Blog's Dashboard and navigate to Template --> Customise --> Advanced --> Add CSS. Copy-paste the below code and click Apply to Blog. Done!

.label-size {
margin: 0 4px 4px 0;
font:11px Arial;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
text-transform: uppercase;
background-color: #c85853;  /* Change Color*/
-webkit-transform: translateZ(0);
transform: translateZ(0);
-moz-box-shadow:inset 0 1px 0 rgba(200, 88, 83, 1);
-webkit-box-shadow:inset 0 1px 0 rgba(200, 88, 83, 1);
box-shadow:inset 0 1px 0 rgba(200, 88, 83, 1);}

.label-size:before {
content: '';
position: absolute;
pointer-events: none;
border: white solid 2px;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
opacity: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: opacity;
transition-property: opacity;}

.label-size:hover:before, .label-size:focus:before, .label-size:active:before {opacity: 1;}
.label-size a {color: #fff;}

1 comment: