Add Beautiful Loading Effect In Blogger!

Hello Bloggers Again! You Must Have Read The Last Post Which Was About News Ticker But Now A New Widget Is There For You Which Is Loading Effect!
You must have found many loading effect in many posts across the world but in them only few work in which this effect is also included!
In This effect  i have used the most popular jquery effect which is fade out effect through which our loading image gets faded out ( disappeared ) after certain interval of time. So lets start adding this awesome effect in blogger-

What Is Loading Effect?

Loading effect is used by many bloggers to show the loading icon and progress on this blog.Loading effect helps users to determine that the site is currently loading and they don't go anywhere else as due to eye caching effect!

 Will This Effect My Page Loading Speed?

No, this loading effect consists of only one image with is less than 15 KB and some magical code which is in Bytes! So No Tension Of Page Speed And That's Why I Have Used It Too!

How Does This Effect Work?

After reading until here this question might have glowed in your mind so let me explain you-

Actually The Effect Consists Of An Awesome Loading Image With A Magical Jquery Code Which Fade's Out The Image After certain interval of time.I got this code by searching many hours on the internet and that's how you are able to read this post! Ha Ha :)

Adding Loading Effect In Blogger-

1- Go To Blogger Then Go To Layout

2- Find A Place To Insert This Widget. Recommended Place- Above All Posts.

3-After choosing the place Click Add A Gadget >> HTML/Javascript

4- Paste This Code In The Box-

<!--NgLoader Starts-->

<script type="text/javascript">

$(function() {

setTimeout(function() { $("#ngloader").fadeOut(1500); }, 5000)

$('#btnclick').click(function() {

$('#testdiv').show();

setTimeout(function() { $("#ngloader").fadeOut(1500); }, 5000)

})

})

</script>

<div id='ngloader'>

<center><img src='http://ngnetwork.96.lt/ngloader.gif' height='100px' width='100px' title='Loading...'/><center></div>

<!--NgLoader Ends-->

Replace http://ngnetwork.96.lt/ngloader.gif with any other loading image and 5000 with the loading time. 1000 Value Stands For 1 Second So For More Than 5 Second Increase The Value Form 5000 To Upper Value.

5- Finally Save The Widget And Enjoy The Awesome Loader!

FROM THE AUTHOR:

So this was an amazing widget which will let you show an awesome loading image with fade out effect! Share Your Thoughts Through Comments And Don't Forget To Subscribe!