» » Add Animated Page Loading Effect In Blogger Blog

07:51
A+ A-
Hello readers, welcome back to know our latest tricks in blogging. Now I'm going to introduce, how to add page loading effect in blogger blog. Every blogger think that their blog should be different from others, also that they want to make their blog as more user friendly and massive. This widget is introduced for these kind of bloggers only. The function of this animated page loading effect widget is at a single click, it exit from the current page and visualizing effect shown to visitors. Then it goes to next linked page. 

This is simple and looking very cool. Most of bloggers using this kind of widgets to impress their visitors to stay them in their blog pages. It is helpful to make our blog as special one compared to other blogs of our competitors. Let me introduce that how to add this animated page loading effect in blogger blog.

Steps To Add this Animated Page Loading Effect In Blogger


  • Login to your Blogger account
  • Go to dashboard and move on Layout section
  • Click on Add a gadget link and select HTML/JavaScript option
  • Copy the below code into HTML box
  • Click on the Save button.
style>
#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1p-_yxF4VEKYtzowDv9P9hVZWfp6xeO6kuDHjq7MQsReL3cNGcBv8JDnqXaYZaSZ-2aJcVfJAAq69G7ljCUS1iribaIxVu2LDbISN7rXCRPkL9VXhufljVcB54HQw_3WeGDCBfHPXptV/h92/trickstoo+animation+effect.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style><br /> <script type="text/javascript">
//<![CDATA[
$(document.body).append('<div id="abt-page-loader"> Loading...</div> ');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Share to:

 
Top