How to add Floating and Fade in effects in blogger post/page/theme/template

How to add Floating and Fade in effect in blogger post

In this article, we will add fading and floating effect using CSS, JS, JQUERY in blogspot.
It is very simple. Please Follow there step.

1. Adding jquery script to your blogger.

Skip this is already added a jquery script to your blog. 
To add jquery script, just go to this link and copy the jquery script code. You may copy for minified version.
For now I am giving you the reference script, you can also use it. 
Add this code just before the closing body tag in edit theme. OR add it just end of the post in html.

2. Adding CSS

Add the following code in the top html of your post or add it just before closing head tag in edit theme html.

3. Adding the JS and Jquery
Add the following code just after the jquery script you have add earlier.

4. How to use?

You can get reference from the code and preview given below.

hk-fade : compulsory to use in every element. 
fadeInRight : Fade from right
fadeInLeftt : Fade from left
fadeInBottom : Fade from bottom
fadeInTop : Fade from top
floating: floating effect

Preview(Refresh the page to see the preview of following text.)

Adding Fade in Effect in blogger post

  1. Heading
  2. Sub-heading
  3. Paragraph
  4. Paragraph
  5. Paragraph
  6. Paragraph
  7. Paragraph
  8. Paragraph
  9. Paragraph
  10. Paragraph
  11. Paragraph
  12. Paragraph
  13. Paragraph
  14. Paragraph
  15. Paragraph
If you are having any query or need help in installation. You can contact.

Related posts