smartify me

Hello guys may be this is my first post related to blogger.lets see how to get an animated page loading effect in your blog,its pretty simple.

• Goto your blogger dashboard =>Template ( i suggest you take a backup of your template before furthur editing it so even if you mess up with something you can simply restore it back ) click Edit HTML
• Now find the " </body> "  tag using cntrl+f
• paste the below code just before the </body> tag

<style>
#sm-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#2B5797 url(' http://s6.postimg.org/bd18fx72l/image_533211.gif ') 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="sm-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#sm-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

• Thats it you are done it would give you the same effect as in my blog.but incase you want to really customize it,continue reading further
• First the background color or the masking color which is '#2B5797' a shade of blue for my blog if it doesn't suit you you can replace the color code which is in bold to any hex code you like.you can get the hex codes from hex color code tables.
• Next the loading gif animation which is kind of progress bar like looking gif for mine you can get your own gifs from Chimply ( ya thats a cute name )
• Host them at PostImg,copy the direct link and replace the highlighted url with that of yours