How to Install smooth Loading Effects in a Blogspot Blog
Today we discuss How to Install smooth Loading Effects in a your Blogspot.com Blog
The load effect work when the blog is opened. Also, gives the impression as though our blog gets to loading extremely long. The stacking impact that we have introduced in the blog will hidden after the page is effect loaded completely.
Introducing the stacking effect on the blog page won't affect the stacking speed of your blog, this is on the grounds that the impacts utilized are simply utilizing CSS without embeddings pictures.
There are a few types of loading impacts that will be revised for the id this time, with each CSS & HTML Code. So you can just pick as your desires. OK without flaw,
Installing Loading effects on Blog Pages/ Posts
First thing you have to do just before installing the loading effect is that. Its a good thinking to preview the JQuery version in your blog templates that you use so that the code you apply works fine or not.
If any how the JQuery in your blog template is same as per JQuery version explaining hereafter, you do not have to replace the code. If JQuery is different, than you should replace it with JQuery Library older version 1.7.1 or below to simultaneously run the effect.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>After that our next step is,
~ Open the Blogger Dashboard
~ To Select Theme Click on Edit HTML
~ After that look for the following code </body>or <!--</body>--></body> ( To search Simply press Ctrl+F button to search for it and bingo!!)
~ When you find the above just add code below before this code </body>or<!--</body>--></body>
Our next step is to how to add the Script HTML code below right below the HTML code <body>
Then add the following CSS effect code just before this code </head> or </head><!--<head/>-->
After successfully following the above described step by step guide then Save the Template & see the magic results. You can see just click on result button.
The above described installation way is the same as the steps above, you just have to replace HTML and CSS Codes to replace or use some other loading effects. Without having to re-add the JQuery code. - Tech Online Help
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>Our next step is to how to add the Script HTML code below right below the HTML code <body>
<div id='preloader'>
<svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'>
<circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>
</svg>
</div>Then add the following CSS effect code just before this code </head> or </head><!--<head/>-->
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite}
@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}
.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}
@keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}
@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}
</style>After successfully following the above described step by step guide then Save the Template & see the magic results. You can see just click on result button.
The above described installation way is the same as the steps above, you just have to replace HTML and CSS Codes to replace or use some other loading effects. Without having to re-add the JQuery code. - Tech Online Help
Comments