 |
| How to Install Preloading Effect on Blogger |
There are many ways to beautify your blog, one of them is by Installing the Cool Preloading Effect on this Blogger. For those who are curious, see the tips below.
The workings of the Preloading Effect in Blogger are transitions that will appear automatically when loading pages on the blog and will disappear after the page is fully loaded.
The Preloading effect that I will share will not affect the speed of the blog because it is very light pure CSS and SVG without images.
The following are steps to follow to Install the Preloading Effect.
Installing the Cool Preloading Effect on Blogger:
Before adding the code that I will share this, the code will run well in jQuery library version 1.7.1.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>If you already have added a jquery library please replace that with the above version.
Now follow these steps:
- Go to Blogger Dashboard
- Go to Theme/Template Section
- Click Edit HTML
- Now Search for </head>
To search </head> in the blogger template section press Ctrl+F and then type the term to search and press enter.
Copy the code provided below and paste it just above the </head> tag.
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
- Now Search for <body>
HTML:
- Now copy any CSS & HTML code from the loader style provided below and paste them after <body> tag.
<div id='preloader'>CSS:
<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>
<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>
- Save Theme/Template
After saving the theme now go and have a look on your website you will see animation like below.
See the Pen Memasang Efek Preloading Keren di Blogger by Arlina Design (@arlinadesign) on CodePen.
More styles Of Loader:
As i have told you below is the list of some other styles of loaders you can choose any that you like. You just have to copy the CSS & HTML code of that loader style instead of the above and jquery code will be the same for all.
HTML:
<div id='preloader'>CSS:
<div id='container' class='spinner'>
<div id='dot'></div>
<div class='step' id='s1'></div>
<div class='step' id='s2'></div>
<div class='step' id='s3'></div>
</div>
</div>
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%}
#dot{background:#FFF;border-radius:50%;width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:dot .6s ease-in-out infinite}
@-webkit-keyframes dot{0%{transform:scale(1,.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1,1)}50%{bottom:100px}46%{transform:scale(1,1)}80%{transform:scale(.7,1.2)}90%{transform:scale(.7,1.2)}100%{transform:scale(1,.7)}}
.step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0}
@-webkit-keyframes anim{0%{opacity:0;top:0;right:0}50%{opacity:1}100%{top:90px;right:90px;opacity:0}}
#s1{animation:anim 1.8s linear infinite}
#s2{animation:anim 1.8s linear infinite -.6s}
#s3{animation:anim 1.8s linear infinite -1.2s}
</style>
0 Comments: