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.
Steps to add this widget in Blogger
First login to your Blogger Dashboard and navigate to Template → backup your template→ click edit HTML →. Press Ctrl+F to find </body>
Now Paste the below Script code just above/before the </body>.
HTML
<style>
#Blogging-Bee {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheieTgdarCHsFelqSJgfFaJb1x0YNxWr6UDi1c9elOJY_jpe1rOJuwRrqnP4JEFe9LriA1B_F8-7ZJOCNACFU_beirmu4KDAvyIjG43fDT7CZHOnLJ9V5K_WDomUnKcom2m5ES_JSB8lc/s200/load6.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="Blogging-Bee">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#Blogging-Bee').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
Save Your Template and see it live on your blog.
Configuration/Settings
You can change the loading image with your own. To do so..
change the image link with your own. in CSS highlighted with green background.
Below is the list of Ajax loading genrator. If you want to change loading GIF image with your own image then Kindly visit below websites.
http://www.ajaxload.info/
http://loadergenerator.com/
http://www.loadinfo.net/
http://www.chimply.com/Generator
http://www.webscriptlab.com/index.php
change the image link with your own. in CSS highlighted with green background.
Below is the list of Ajax loading genrator. If you want to change loading GIF image with your own image then Kindly visit below websites.
http://www.ajaxload.info/
http://loadergenerator.com/
http://www.loadinfo.net/
http://www.chimply.com/Generator
http://www.webscriptlab.com/index.php
Enjoy!...
Animated Page Loading Effect For Blogger - Nulledmania >>>>> Download Now
ReplyDelete>>>>> Download Full
Animated Page Loading Effect For Blogger - Nulledmania >>>>> Download LINK
>>>>> Download Now
Animated Page Loading Effect For Blogger - Nulledmania >>>>> Download Full
>>>>> Download LINK