Customize Animated Loading Effect Page For Blogger
Every Pro blogger wants to make a dynamic customize blog.In Today post I share a important trick to make customize animated page loading effect for blogger. its helps to make your blog defurent from other blogs.Just add a bite of code in template section in your blog. like this picture whenever the visitors will click any link to leave the current page, inspire of the old boring loading it will have animation.
A live demo can be seen on my blog itself. Just click any link here and you could see the change.
How to add animated page loading effect
Just add this HTML and CSS code in above </body> edit template HTML section
===================================================================
<style>
#abt-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/AVvXsEh87y7PWTOg9QMVTN75P4nC1lFWZYxWlUlLE2rPiWyPEVMzr0utcIOuJ_AoAzkTeR65eGRRRFGH27a1wG_StpbreAMZJ4AAmyO3-Hax75E7egjlU9FFqgntNnTKVR05-SH4rebs7NyM2yA/s200/load6.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="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
===================================================================
Now save your template
if you not have instal jquary plugins please add this working this effect properly
You successfully do this........
Thank You.
মন্তব্যসমূহ
একটি মন্তব্য পোস্ট করুন