This Css code is a script that will show a loading effect every time when the visitors click the link inside your blog. so before you add this effect on your own blog, make sure to take a look of this loading effect by clicking on the below demo button.
If you like this effect and want to install it in your blog, then follow the below simple steps carefully to add this Css Page Loading Effect to your blogger blog.
How to install css page loading effect?
Visit to your blogger dashboard - Login
Now go to the "Template" section and then click on the "Edit html" button.
In template editor find the below code by pressing "Ctrl + F" key together from your keyboard.
</body>After that copy the below code and paste it just before </body>.
<style type='text/css'>
#loading{
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWSj3mv2OfjXGDKef1sw33ZCkw7Ijb6SS1NMpoMFuDG7g6gfF8AZjMOEMfDLrmcp-9fz0P18_2xndFalbfHM2QiUTujyrgIZ3TY7qM5_rq6CY4M7nkLPBPZE1X037JwPSoMpixJeQP4L23/s1600/Preloader_1.gif') no-repeat 50% 50%;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="loading">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#loading').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>
Now click on the orange save template button to apply the changes.
Note-you can change the highlighted image URL with any image URL.
That's it! I hope you like this page loading effect! Stay tuned for more cool effects! Thanks for reading @Prince
0 Comment to "Add Css Page Loading Effect On Your Blog"
Post a Comment