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('http://1.bp.blogspot.com/-A3x2NInRfqY/UDNYY6nM_1I/AAAAAAAACuc/fya2DbnpJhY/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.
Do you like this post? Please link back to this article by copying one of the codes below.
URL Of Post:
HTML Link Code:
BB (forum) link code:
Comments
Post a Comment
Please share your views on this topic with Grace Joseph by leaving a comment.