Mwkhi54l4AT71A9SPj2FMDVTdJ7sCX4vtnoXHfCo
Memasang Efek Preloading Keren di Blogger

Iklan 728x90

Memasang Efek Preloading Keren di Blogger

Ada banyak cara untuk mempercantik, blog sobat contoh nya Memasang Efek Preloading Keren Di Blogger , bagi yang penasaran dengan cara memasang nya ikuti baik baik step di bawah ini

Buka > Blogger > tema > klik edit html
Tambahkan kode ini sebelum </body> atau
&lt;!--</body>--&gt;&lt;/body&gt;

JQuery

<script type='text/javascript'>//<![CDATA[// Preloader$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})}); //]]></script>

Kemudian tambahan kode ini tepat dibawah <head>

HTML

<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>

Selanjutnya tambakan kode CSS ini  sebelum <head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

CSS

<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>


Baca Juga
SHARE
Man
seorang mahasiswa semester akhir yang suka mengumbar senyum, kemesraan, dan kebucinan bersama kucing. sangat menyukai nasi goreng, kota Bandung, dan kamu.

Related Posts

Subscribe to get free updates

2 komentar

Posting Komentar

Komentarmu sangat berarti buat hati saya

Iklan Tengah Post

Iklan 300x250