30 Dec 2014

Animated Labels For Blogger

On In , 2 Comments
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 {
display:inline-block;
padding:6px;
margin: 0 4px 4px 0;
font:11px Arial;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
border-radius:3px;
text-transform: uppercase;
float:left;
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;}

2 comments:

  1. Your blog is really awesome. It really helps me alot. I am also belong to the same field. It would be my pleasure if I help you in anyway. Do visit animation course college.

    ReplyDelete