Add Simple Animated Page Loading Effect to Blogger | FREE GADGET TECHNOLOGY FREE GADGET TECHNOLOGY : Add Simple Animated Page Loading Effect to Blogger
Contact Us:

If You Have Any Problem, Wanna Help, Wanna Write Guest Post, Find Any Error Or Want To Give Us Feedback, Just Feel Free To Contact Us. We Will Reply You Soon.

Name: *


Email: *

Message: *


Skillblogger

LiveZilla Live Help

Monday, 3 February 2014

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:-

Team SB
Posted By: Team SB

0 comments:

POST A COMMENT

Contact Us

Name

Email *

Message *

Premium Blogger Templates
 

Latest post

Enter your email address:

Delivered by FeedBurner

Copyright © . Free Gadget TechnologyBlogger. All Rights Reserved.
Designed by :-