Add Elegant Animated Page Loading Effect for Blogger

Elegant Animated Page Loading Effect for Blogger

Every blogger wants his/her blog to look more elegant and beautiful among its competitors. In my personal experienced even if they say that "content is the king", the blog design has also a big impact to the visitors, like me. When I visit a blog and it has an ugly design and not pleasant to my eyes, I will find another blog to read the same article. The more awesomeness design you add to your blog the more the visitors you will get. 

Look at the design of this blog its elegant and simple, too much design will also make your blog ugly, remember the quote "Simplicity is Beauty". Be artistic in designing your blog even if you are not an artist, do your best!, and you will harvest the fruit of what you've done.

This Elegant Animated Page Loading Effect for Blogger is a script that will show a loading effect every time the visitors click the link inside your blog.  You can change the loading effect with your own custom page loading effect design, to make your blog more elegant and presentable to visitors.

How to Add the Elegant Animated Page Loading Effect to your Blogger Template

Stop losing your valuable visitors design your blog now! follow the steps below.

Step 1: Login to your blogger account and goto Template and click the EDIT HTML button

Step 2: Click inside the codes and press Ctrl+F then type </body> and hit Enter

Step 3: Copy this Elegant Animated Page Loading Effect Script below and paste it just above the </body>. and click the Save Template button

<!-- Animated Page Loading Effect for Blogger Start -->
<style>
#abt-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq_VS9SKauud9CkB00e59u6eXNKb0tgq-kUpK1fWLnBI9Vj99PSkGLIA04ESt9XaOlCtxSkZdmMKPIEG3O3Qv1lRyq58aKtavw3A_ylIR7Efo-2gScy8_NctZ6r0OCdDHOd4ZOqJWMun0/s200/load6.gif&#39;) no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
<!-- Animated Page Loading Effect for Blogger End -->

Related Posts

Anti AdBlock Script For Blogger

Disable Content Selection Except Blockqoute Using CSS

Floating Social Media Buttons Like Share Tweets Widget for Blogger

Conclusion: After adding This Elegant Animated Page Loading Effect script will improve your blog appearance, and it can also help your visitors to decide to comeback again and read your articles due to the pleasant design of your blog.