How To Create A Loading Effect On Blogger

If you want to create the effect of loading on the blog as the blog that I use, in fact in the SEO rules loading effect on the blog does not provide added value (remember in terms of SEO) but loading the blog has another function that is busting saturation point visitors who come to visit bhlog we.

Due to the nature of this widget in the form of images .gif, therefore we also have to prepare well for the smooth image of our website at the end of this tutorial I will give some examples of loading images with the format .Gif is not too large and would make loading a blog.

Preview 

okay immediately we will begin, first make sure that your blog is the jquery suport. If not copy and insert the following script before the </ head>

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> 

if you already have it then ignore it

The next step copy and paste the CSS code just above the code]]> </ b: skin> or </ style>

 #page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5DBdZo_mhRDE_2R9YBwgaSjxEuKejWMuedhloOjjilR49mqCGkT-C5Zk-VxW7Km4c0_I4QvU0ycKMGbkagrC9jqqSKmxylQfdMDpuGnYooodnbT1Md83E_l4ojZ14MPsg-KTAwau9xpc/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
} 

I note the yellow block, that's where the image url will we can change.

 

 <script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script> 

Now you just save the template to see the results finished ^ _ ^

 Sample Image Loading Blog

Share this

Anonymous