Add CSS3 Animation Effects to Blogger Thumbnails

In Today's Post , i will provide best widgets for blogger which give your template best look. In the previous post we give Best Blogger Templates. As we know that Blogger is now one of the most power full CMS Platform. Blogger Provides free Widgets as Like blogger provide Free templates.But Now we have some mind blowing blogger widgets for you. First we have to know about Blogger Widgets. The Slide Bar Plugins installed on Your blog is also known as Blogger Widget. Simply says that the meaning of widgets or plugins are same. In wordpress we use Plugin as name of every widget we use in blogger. Any How !!! , The given Widgets are explained line by line below and you need to know about every widget before installing on your blog. So My request is to Read Every Widget Explanation Before Adding into your blogger blog.We also Explain Every Widget That How to install It into your blog.Our Promise to you is that we will teach you properly. Complete Blogging Training Courses are Available in Our Blogger LAB. You Will Learn Complete Installation Of templates , Editing of Templates , Widgets And Much More..

Information About Wow Widget:

Wow is complete JAVA Script Plugin , Which is used for different animation effects in blogger.it is used every where in the world very easily.This plugin contain 55 round about different animation effects.

• Go to blogger dashboard
• Click on Template tab and then Click on Edit HTML Button.
• Now press Ctrl+F , and search </body> Tag in your blogger template.
• Then Copy the below script code and paste into the above section of </body> Tag.

Java Script Code Below

Download Code Here

• Litle Done !!! , Now after paste the above code then search for the /]]></b:skin> tag in your blogger template editor section.
• Now once again copy the below CSS Code and paste it just above the /]]></b:skin>  TAG.

CSS Code !!!!

/*!Animate.css - http://daneden.me/animate Licensed under the MIT license -http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden*/ .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s} @-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);-ms-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);-ms-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);-ms-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown} @-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);-ms-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);-ms-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp} @-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}

That's All Done !!! 

You have successfully installled the Wow Blogger Widget to your blog. I Hope you like our post. If you face any problem related this post then contact us. And if you like this post then share with your facebook friends , google + profile and other social networks. Thanks For That.

Thanks For Reading Our Post !!!!

Post Tags : Add CSS3 Animation Effects , Blogger Widget , Blogger Thumbnails , Widgets For blogger.