Animated Page Loading Effect for Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="text-align: justify;"> <div class="akash" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmfnbe1hjBno1ux3wh1l05nioNAopQaIR66QESva44VauMYT1uAJfYdAqa8jzXnOuhV3wt8ix0J8lQWc92kgiqrJB5T7GHRna19F0xap6lQnWTq_G7_mqNwW-Yx5nhIbqWyXXAaGMHahIh/s1600/Page+Loading.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmfnbe1hjBno1ux3wh1l05nioNAopQaIR66QESva44VauMYT1uAJfYdAqa8jzXnOuhV3wt8ix0J8lQWc92kgiqrJB5T7GHRna19F0xap6lQnWTq_G7_mqNwW-Yx5nhIbqWyXXAaGMHahIh/s320/Page+Loading.png" width="320" /></a></div> Every blogger wants his blog to look best among his competitors blogs. This widget will add a bit more chunks of awesomeness in your blog.</div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> The concept of this widget is simple. This is more or less like Exit Effect we add in Microsoft Powerpoint's Custom Animation. Just like that whenever the visitors will click any link to leave the current page, inspite of the old boring loading it will have animation.</div> <div style="text-align: justify;"> </div> <br /> <ins style="border: none; display: inline-table; height: 90px; margin: 0; padding: 0; position: relative; visibility: visible; width: 728px;"></ins><br /> <div style="text-align: justify;"> A live demo can be seen on my blog itself. Just click any link here and you could see the change.</div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> To add this effect to your blog do the following things.</div> <h4 style="text-align: left;"> </h4> <h4 style="text-align: left;"> <span style="color: red;">Adding the HTML and Script</span></h4> Add the below given code just above <b></body></b>.<br /> <blockquote class="tr_bq"> <style><br /> #abt-page-loader {<br />         position: fixed!important;<br />         top: 0;<br />         right: 0;<br />         bottom: 0;<br />         left: 0;<br />         z-index: 9999;<br />         background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS6B8LHBb1zbPeyYj0RvfX6gpWboycyB1J4eUKHIjcG5R47YIGMUKykcma9K9IH_XeApc3x7qNdK-NiqPx3-Tgwz9mmzKy_c9Cka8GbWgfx1nNnQMeoFBIGQn-I8WkLYOBg_PrnVUWrRM/s200/load6.gif') no-repeat 50% 30%;<br />         color: #FFF;<br />         display: none;<br />         font: 0/0 a;<br />         text-shadow: none;<br />         padding: 1em 1.2em;<br /> }<br /> </style> <br /> <script type='text/javascript'><br /> //<![CDATA[<br /> $(document.body).append('<div id="abt-page-loader">Loading...</div>');<br /> $(window).on("beforeunload", function() {<br />     // ... Show the Animation `.fadeIn()`<br />     $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);<br /> });<br /> //]]><br /> </script></blockquote> <br /> After adding this code, save the template.<br /> <br /> You are done now. Now you and your visitors can see this awesome and cool Animated Page Loading Effect in you blogger blog.</div>

Animated Page Loading Effect for Blogger

Every blogger wants his blog to look best among his competitors blogs. This widget will add a bit more chunks of awesomeness in your bl...

Read more »