Top Posts Tagged with #fade in effect tutorial

“Fade In” effect when you open the theme

(To read the Portuguese version of this tutorial click here)

In this tutorial I'll teach you how to make that "fade in" effect, that makes the theme start appearing smoothly when you open the blog. It's very easy to put and if you're interested just keep reading.

Don't forget to like and/or reblog this post later, if it end up being useful to you.

For begginers:

Go to the Customize page of your blog and click in "Edit HTML" to open the code of your theme.

In the following steps I will talk about some codes that you'll need to find in your theme code (like </head>, <body> and some others). To find them more easily click in any part of the HTML of your theme (just to "focus/select" the code window) and then press CTRL+F (this command is for Windows, but if you use another operational system it must be someting very similar). This command will open a search bar, like this:

And then, through this search bar, you can search for the codes that you need to find.

HTML:

Put this exactly after/below <body> in the code of your theme:

And put this exactly before/above </body>:

</div>

Scripts:

If you don't have the JQuery library applied in the code of your theme, you'll need to apply it. So copy this and paste after <head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Then paste this righ after/below the JQuery code:

And done!

Like or reblog this post if it was useful to you;

In case of any doubt or if you find a error in the tutorial/code, contact me here.

Trending Tags

Last Seen Tags

#fade in effect tutorial

Trending Tags

Last Seen Tags

#fade in effect tutorial