ADD PAGE LOADING ANIMATED EFFECT IN BLOGGER TEMPLATE - Rexblog

Showing actionable and animated page loader with image or CSS until the web page loads completely on any website included Blogger keep patient visitors or users with little entertainment. But searching on Google, you can see a lot of articles are available with large number of code what will bad impact on your website. For better search engine optimization it is harmful.

Disadvantage: Blogger Layout option may not appear properly.

This article will help you about how to show animated and spinner page loader on your Blog or website STEP-BY-STEP withLESS CODE.

Though it is based on Blogger platform, you can apply this method on different platform manually.

STEP-1: Add HTML and JavaScript
Go to Blogger Dashboard and Theme option. Then Edit HTML to enable in edit mode. Now search for (Ctrl + F) <body and replace with the following code.

<Body Onload='MyFunctionLoader()' Style='Margin:0'><Div Id='Blogger-Loader'/>
<Div Style='Display:none' Id='HiddenPage' Class='Animate-Bottom'> <Script>
Window.Onload = Function ShowPage() {
Document.GetElementById('Blogger-Loader').Style.Display = 'None';
Document.GetElementById('HiddenPage').Style.Display = 'Block'; }
</Script>

If you don’t want to loss the necessary attributes within<body> tag, put onlyonload='myFunctionLoader()' style='margin:0' as attributes.
If you save your HTML under theme it will show error that ending </div> not found before</body> tag.

Error Parsing XML, Line 3602, Column 3: The Element Type "Div" Must Be Terminated By The Matching End-Tag "</Div>".

Yes. You have to add </div> tag just before </body tag. You will get this <body> tag after scrolling down at the end of your HTML.
STEP-2: Add CSS
Put the following CSS on your Blogger HTML. To find available CSS space search for ]]></b:skin>and paste the copied CSS before it.

#Blogger-Loader { Position: Absolute; Left: 50%; Top: 50%; Z-Index: 1; Width: 150px; Height: 150px; Margin: -75px 0 0 -75px; Border: 16px Solid #191919; Border-Radius: 50%; Border-Top: 16px Solid #C33737; Width: 120px; Height: 120px; Animation: Spin 2s Linear Infinite; }
@Keyframes Spin { 0% { Transform: Rotate(0deg); } 100% { Transform: Rotate(360deg); } }< .Animate-Bottom { Position: Relative; Animation-Name: Animatebottom; Animation-Duration: 1s }
@Keyframes Animatebottom { From{ Bottom:-100px; Opacity:0 } To{ Bottom:0; Opacity:1 } }
#HiddenPage { Display: None; }

STEP-3: Save your Blogger template and reload your blog. You can see the change you wanted to show visitors. This page loading preview will be shown on every loads, not only homepage loading.

See the demo here:

See the Pen rexblog.me css preloader by rexblog.me (@rexblog) on CodePen.

Rate This Article

Thanks for reading: ADD PAGE LOADING ANIMATED EFFECT IN BLOGGER TEMPLATE - Rexblog, Stay tune to get latest Blogging Tips.

TheBloggerJet

ADD PAGE LOADING ANIMATED EFFECT IN BLOGGER TEMPLATE - Rexblog

Post a Comment