Add Simple Animated Page Loading Effect to Blogger

We all want to look our blog more attractive and different from other so we used different methods, themes, widgets etc. Today i am introducing animated page loading effect for blogger blogs. When our visitors click any link on our blog then an animated loading screen will show and automatically carry the visitor to the clicked link. This is a great way to impress our visitors and attract them to visit our blog pages more times. Now a days many bloggers using it on their blog to impress their visitors. So today I introduced this widget to all of our readers and show you how you also can add this effect to your blog. So if you like this animated loading effect then start rolling your fingers on the tutorial to add this to your blog.

Steps to Add:

• Login to your Blogger account
• Go to dashboard and move on Layout section
• Click on Add a gadget link and select HTML/JavaScript option
• Copy the below code into HTML box
• Click on the Save button.

<style>
#mbb-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFjVk_Xfv5xUV6MawChGnvuzxD8kMqvjibKANneORBJ0uu_iHnUU14stCD4AEufqSKBy7DF-FR7JsNOfxLuspICmqVvq86n2JLMsmdnsSgqEFWfzBUCHAY8WD6XDmEMrrBgXlgJC_GkA8V/h92/mybloggerbuzz+animation+effect.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style><br /> <script type="text/javascript">
//<![CDATA[
$(document.body).append('<div id="mbb-page-loader"> Loading...</div> ');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#mbb-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

• That's all. You are done!

Here after, your blog visitors will see this page loading effect for every single click on your blogger blog or website. Enjoy!

It's your turn to share your feedback with us through comments till then Peace, Blessings and Happy Animating.

Like the Post? Share with your Friends:-

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Digg
• LinkedIn
• Reddit
• Delicious
• Technorati