Add Page Loading Effect in Blogger Blogs with jQuery

After a longtime we want to share a great and useful template customization article on All Blog Things for blogger blogs. This is a page loading effect with jQuery and it is also a animated page loader. You can make customization in it for better use. As you can see on Google Dynamic Views Templates for blogspot blogs. A Page loading effect appears before loading content. That is what we want to show you "How you can add a lazy page loading effect in your blogger blog with your own choice of loading image".
Add Page Loading Effect in Blogger Blogs with jQuery
You might got my point! NO? read below and try it, than tell me what are you thinking about this amazing and crazy trick. First read about features of this loader.

Features of Page Loading Effects

  1. It will don't ruin your blog's SEO. Because! This is a SEO friendly plugin with no first time appearing.
  2. It comes with easy editing. Means no encrypted coding so you can change loader image etc.
  3. It is a cross-browser plugin. It means this will work on all internet browsers.
  4. It will make your bounce rate at low rate. Because your visitor will visit your blog again and again "Surely"
  5. It will detect devices, so you don't have to worry about mobiles visitors.

How to Add Loading Effects in Blogger?

Here's my fastest tutorial for adding laziest page loader in blogger blogs. Do the following steps accordingly and get a boost of pro-vines on your blog.

1. Go to your Blogger dashboard select your desired blog
2. Navigate to Template and than click on Edit HTML button
3. Click anywhere in coding and press Ctrl + F a search bar will appear
4. Now search </head> tag in your template and just above it paste below line of coding
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
5. Now search for </body> tag and above/before it paste below coding.
<style>
    #ABT-Page-Loding-Effect {
            position: fixed!important;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 9999;
            background:#000000 url('http://4.bp.blogspot.com/-ikwt7NU4_RM/VWmmN3PTwJI/AAAAAAAAFiQ/ripWVV-afL4/s1600/Custom-loader-ABT.gif') no-repeat 51% 31%;
            color: #FFFFFF;
            display: none;
            font: 0/0 a;
            text-shadow: none;
            padding: 1.0em 1.3em;
            opacity: 0.5;}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    $(document.body).append('<div id="ABT-Page-Loding-Effect">Loading...</div>');
    $(window).on("beforeunload", function() {
        // ... Show the Animation `.fadeIn()`
        $('#ABT-Page-Loding-Effect').fadeIn(1000).delay(6000).fadeOut(1000);
    });
    //]]>
    </script>
Customizations: You can customize it as any way you want. You can change loader image by replacing Bold link from above coding. If your loading effect not appears on your blog than try to avoid 4th step.
  • Freebie: Get 10+ Page loading effect Images and try them on your blog free of cost. Download Now

Final words

This is our first and final page loading effect article. Hope you have enjoyed. Keep blogging and support us we will do amazing things in blogging era.

COMMENTS

BLOGGER: 3
Loading...

Subscribe to our Newsletter

Get Free Tips and Guides to Make Money Online!

Name

2016,13,2017,7,2018,18,2019,1,Adsense,8,Advertising,4,Affiliate Marketing,5,Alexa,1,Alternatives,2,Android,1,Announcements,1,Apps,6,Ask Me,8,Back linking,9,Backup,1,Bing,1,Black Friday,1,Blockquote,1,Blog Names,4,Blogging,25,Blogging Mistakes,6,Books,1,Branding Ideas,1,Business Tips,15,Career Advice,1,Case Study,6,Content Marketing,21,CSS,4,Customization,20,Digital Marketing,6,Domains,6,Downloads,1,eCommerce,2,Email Marketing,4,Entrepreneurship,14,Essay Writing,1,Event Blogging,2,Exclusive,38,Facebook,7,Facts,2,Featured Snippet,1,Finance Tips,1,Forums,2,Freebies,3,Freelancing,4,Giveaways,1,Google,11,Google Adwords,1,Guest Contributions,89,Health Tips,2,Hosting,9,How To,133,Ideas,4,Images,1,Influencer Marketing,2,Info graphic,21,Inspiration,4,Instagram Marketing,1,Interviews,4,Jobs,3,Keywords Research,1,Make Money,53,Motivation,1,Newbie's Guide,80,News,28,NLB,9,Offline Business Ideas,2,Page Rank,4,Paid Reviews,1,PayPal,1,Pictorial,2,Posts,5,PSD Files,1,Quotes and Sayings,39,Reddit Marketing,1,Referral Earning,6,Relationship Tips,1,Review & Guide,14,Roundups,3,Save Money,1,Self Improvement,2,Selling,1,SEO,48,SMO,4,SMS - Messages,1,Social Media,19,Social Media Marketing,5,Sponsors,5,Startups,1,Technology,2,Templates,8,Tips and Tricks,56,Tools,5,Tops and Lists,52,Traffic,15,Twitter,2,Video Marketing,1,Viral,2,Vlogging,4,Web Designing,10,Widgets,24,Wishes and Greetings,1,WordPress,11,Work at Home,6,Writing,30,YouTube,2,
ltr
item
AllBlogThings.com - Make Money Online, Blogging, Digital Marketing: Add Page Loading Effect in Blogger Blogs with jQuery
Add Page Loading Effect in Blogger Blogs with jQuery
This is a page loading effect with jQuery and it is also a animated page loader. You can make customization in it for better use. As you can see on Google Dynamic Views Templates for blogspot blogs. A Page loading effect appears before loading content. That is what we want to show you "How you can add a lazy page loading effect in your blogger blog with your own choice of loading image".
http://2.bp.blogspot.com/-Tmr1Cztt2G0/VWmo2CL3WHI/AAAAAAAAFik/j0o6DlRnNKI/s1600/Add%2BPage%2BLoading%2BEffect%2Bin%2BBlogger%2BBlogs%2Bwith%2BjQuery.png
http://2.bp.blogspot.com/-Tmr1Cztt2G0/VWmo2CL3WHI/AAAAAAAAFik/j0o6DlRnNKI/s72-c/Add%2BPage%2BLoading%2BEffect%2Bin%2BBlogger%2BBlogs%2Bwith%2BjQuery.png
AllBlogThings.com - Make Money Online, Blogging, Digital Marketing
https://www.allblogthings.com/2015/05/add-page-loading-effect-in-blogger.html
https://www.allblogthings.com/
https://www.allblogthings.com/
https://www.allblogthings.com/2015/05/add-page-loading-effect-in-blogger.html
true
8869657471256965778
UTF-8
Viewing All Posts Bad, Try Again VIEW ALL Read More Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED! LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back To Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Just now About 1 minute ago $$1$$ minutes ago 1 hour ago About $$1$$ hours ago Yesterday About $$1$$ days ago About $$1$$ weeks ago More than some weeks ago Followers Follow PREMIUM and Locked Please share to unlock this content Copy All Code Select All Code All coding here were copied to your clip-board If You can't copy the coding or text here, please press CTRL+C or CMD+C with Mac to copy now