Sunday, November 1, 2015
Add jQuery Animated Page Loading Effect to Blogger Blog
Another stylish widget for blogger is the jQuery animated page loading effect for blogger blogs which you can use to enhance your blog's design. The loading effect is seen when loading or reloading any page on the blog. It lets your visitor know when the page is still loading Below are the steps on how to add a jQuery animated page loading effect to your blogger blog/website. Here's the demo.
Also Read: Scrolling popular post widget for Blogger
Square Popular Posts Blogger Widget with Rotating Effect
Sliding Recent Post Widget For Blogger
How to Add 'Link to This Post Widget' For Blogger
How to Add Read More Attribution Links to Copied Text in Blogger
You can edit the page loading effect image by changing the Image URL in the code above.
Also Read: Scrolling popular post widget for Blogger
Square Popular Posts Blogger Widget with Rotating Effect
Sliding Recent Post Widget For Blogger
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
- Next, search for the tag </body> in your template.
- Copy the following code and paste 'above' </body>.
<style>
#nbl-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/AVvXsEgrs2oC4noaCLtrcRK5C_RyKbz4HG5gb8bVU_hXV_btdNxDw5R9BLFO0ZI4N7VybUfxdij_M3BRrBSYz-agjVjvzVzgCWrHVABmBx7b7oR-ojwAF6vQRHFJsq8BhVNDTSwAjxeJlini8kE/s1600/Page-loading-effect-blogger.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
opacity: 0.5;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="nbl-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#nbl-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
- Save your template.
How to Add 'Link to This Post Widget' For Blogger
How to Add Read More Attribution Links to Copied Text in Blogger
You can edit the page loading effect image by changing the Image URL in the code above.
