Shining Multi Color page loading effect for Blogger

beforeunload loading effect for Blogger

8
data:blog.title
ajax loading

Many blog using page loading effect to makeup the loading time of blog pages. This effect generally hide the page loading delay. If your blog is slower to load then visitors often feel annoy and may leave your site. Eventually they would not return in future. There are many tricks to making your blog faster but beside of this you can adopt this trick to display a loading effect of your blog or website thus your visitors don't feel upset. Previously I has released a simple page loading animation effect for blogger. But I have brought revolutionary changes in this version. You would see the loading effect with multiple shining color effect on this widget. It will definitely change the visitors impression towards your blog. More importantly this widget made with pure CSS and only one loading image has used but it load faster. And I have used same beforeunload trick in this loading effect. To install this just follow the below simple steps.


Step 1 Log in to your Blogger Account and Click on Template  ->

Step 2 Now click on Edit HTML-> Unfold code  

Step 3 Now find ]]></b:skin> by Pressing  Ctrl + F

Step 4 And Paste the below code above ]]></b:skin> 

#BloggerSpiceloader{  position:fixed !important;   position:absolute;   top:0;   right:0;   bottom:0;   left:0;   z-index:9999;   background:#000 url('http://4.bp.blogspot.com/-VJaGKss-2zo/UhnYtLdqJ5I/AAAAAAAAEaE/Ght9Y7tLVYY/s1600/BS+loading.gif') no-repeat 50% 50%;  color:white;  padding:1em 1.2em;  display:none}


Step 5 Now Find this code </body> by pressing  Ctrl + F

Step 6 Copy the code from below and Paste it  Before/above </body>


<script type='text/javascript'>
//<![CDATA[
// Trick by www.bloggerspice.com
$(document.body).append('<div id="BloggerSpiceloader"></div>');
$(window).on("beforeunload", function() {
    $('#BloggerSpiceloader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Step 7 Now simply hit the save button

Your feedback is motivating to go further...I hope you would like it and it will help your visitors to live longer time in your blog.
Shining Multi Color page loading effect for Blogger
4 Stars stars - "Shining Multi Color page loading effect for Blogger" Many blog using page loading effect to makeup the loading time of blog pages. This effect gene...

this is such a nice and useful information for us...i appreciate urs word Free Blogger premium Themes

i applied it on my blog but it show after saving template :: ( More than one widget was found with id: HTML3. Widget IDs should be unique. )

Hi Faisal.. are you talking about this tutorial or any others????

Thanks Karthik..glade to see you here first time.

yes,works perfectly, it's much better, thanks.

Thanks again for commenting. You seems to me regular in my site.

Welcome Phung Huu Long. :up

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *