Hello Guys,Today inwards this tutorial nosotros are going to explicate How to Add CSS Animation Effect On page Loading.Any hint what nosotros are going to explore? Let me say you lot , this clit a fast 1 on plant alongside on webpage charge effect.When the visitor volition become to adjacent page this loading upshot volition hold upward acitve in addition to on enshroud it volition exhibit beautifully loading upshot unless in addition to until page is non fully loading the loading ikon volition continue buffering in addition to when its loading your page volition hold upward display in addition to the loading CSS upshot animation volition hold upward fade out.When the webpage is loaded fully of your blogger template it volition automatically stop.So if you lot desire to endeavour this trick on your website or spider web log simply follow the steps mentioned below.
How to install Blogger Page loading animation upshot on template
installation steps:
Step 1. Log inwards to your Blogger delineate organization human relationship in addition to Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4. Copy the below CSS code in addition to glue it simply earlier the ]]></b:skin> or </style> tag.
#cssonload {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidPoqpptHE66r7gZ-2CfkV8d1pL8NV4ohn48gT5ht83TEQ6l0XpZQdATNi2vTVA7xJB-c5doxYWUydXfi1xG_YMW5ht1vVPLfLKGG38aONz24JJFE0miC7XdUTpOaXo77TeqJWlK5WKMvJ/s1600/bloggersstand+cssonload+gif+image.gif) no-repeat center;background-color:rgba(0,0,0,0.36);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;}Step 5. Now Search for <body> tag in addition to add together the next below tag simply below <body>.
<div id='cssonload'/>Step 6. Now Search for closing </body> tag in addition to add together the next below jquery code simply inwards a higher house </body>.
<script type='text/javascript'>Step 7. Now Save your Template..Done !
//<![CDATA[
// CSSOnLoad By www.Bloggersstand.com
$(window).bind("load",function(){$("#cssonload").fadeOut(1e3)});
//]]>
</script>
No comments:
Post a Comment