how to make animation effect for blogger posts ?

Hi friends in this post I am sharing how to make animation effects for blogger posts.Not only with that if you have little knowledge about how to edit blogger template, then you can use anywhere in blogger(i.e) whole sidebar or particular sidebar,footer and more. Another important thing is you don’t need to use any jquery files.Just some css codes .You have seen a lot of blogger templates releasing with animation effects and now it’s your time friends create animate effects for your blogger templates.And you can also remove the very easily without any causing any problem to blogger templates.

Will animate effect in blogger posts cause seo effect bad?

I have also considered this thing.From my knowledge and searches these will not cause any problems to seo. If you feel if animation effects affects seo , as I already said it’s very easy to remove the code in blogger template.

Css3 Fade in left animation code for blogger posts

I have used the fade in left method where most of the sites also using this method . More than that it’s awesome.

/*-Paste the black highlighted code inside .post{}*/
webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; }
/*Pate the yellow highlighted code just below .post{}*/
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.post{
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

Note: Kindly note that in yellow highlighted code
.post{
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}
is very important otherwise animation effect will not work.

How to past the animation code in blogger template?

Login to blogger account .Next goto Template>> click Edit HTML . Click Format template . Click and expand <b:skin></b:skin> .
Now in keyboard press keys CTRL and F at the same time .
Now inside blogger template HTML mode  you can find the search bar.Type in the search field  .post . If you are found .post in blogger’s  template you can place black highlighted like below.



Now just below .post paste the yellow highlighted code just below the .post{} where you added black highlighted code.




That’s all friends .Now save the template and view blog and enjoy to see the animation . You can change 3s to any like 5s or 10s or 13s ,according o your wish.

Also check the animated gif tutorial below,



Also check below link full screen animated demo ,
http://witsub3.blogspot.in/p/blog-page.html

How to use this code for sidebar and other parts of blogger template?

It’s very easy just find id or class of side bar and replace .post with sidebar id or class. For blogger’s default simple blog  template you can copy below code and paste just above ]]></b:skin> .

#sidebar-right-1{
-webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; }
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
#sidebar-right-1{
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

Also check animated demo in full screen for sidebar in below link ,
http://witsub3.blogspot.in/p/fadeineffect-for-blogger-sidebar.html

SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

• 
• 
•