Cara Pasang Animasi Preloader Di Blogger
Cara Pasang Animasi Preloader di Blogger - Sudah usang tidak posting artikel alasannya kesibukan aku yang beberapa hari ini fokus mengurus blog gaming. Oke pribadi saja. Saya akan membagikan tutorial memasang preloader di Blogger. Untuk beberapa template yang berat, butuh waktu usang semoga tampilan web dapat utuh. Terkadang, dalam prosesnya menampilkan tampilan blog yang berantakan. Untuk itulah gunanya Preloader, yaitu menutupi tampilan awal blog yang acak-acakan. Jika tampilan blog sudah termuat seluruhnya, barulah Preloader berhenti.
Dan juga tag jQuery berikut.
Jika blog kau sudah memasang instruksi jQuery, lewati saja tahap ini.
2. Cari tag <body> kemudian letakkan instruksi berikut ini sempurna dibawah tag <body>.
3. Dan yang terakhir, semoga animasi Preloader hilang sesudah halaman blog termuat penuh (seluruhnya, cari tag </body> kemudian letakkan instruksi berikut ini sempurna diatas tag </body>.
4. Selesai. Untuk Demo dapat klik tombol dibawah ini.
Demo
 |
| Tampilan Preloader |
Cara Pasang Animasi Preloader di Blogger
1. Pertama, masuk ke Dashboard blogger > Template > Edit HTML. Cari tag </head> dan letakkan instruksi berikut ini sempurna diatas tag </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:50%;left:49.5%;z-index:1;height:20px;width:20px;transform:translate(-50%,-50%)} [class^="ball-"]{position:absolute;display:block;left:30px;width:6px;height:6px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0} @keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}} .ball-1{z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)} .ball-2{z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)} .ball-3{z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)} .ball-4{z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)} .ball-5{z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)} .ball-6{z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)} .ball-7{z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)} .ball-8{z-index:-8;background-color:#FFEB3B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)} @media screen and (max-width:800px){.spinner{left:43%}} </style>Dan juga tag jQuery berikut.
Jika blog kau sudah memasang instruksi jQuery, lewati saja tahap ini.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>2. Cari tag <body> kemudian letakkan instruksi berikut ini sempurna dibawah tag <body>.
<div id='preloader'> <div class='spinner'> <span class='ball-1'></span> <span class='ball-2'></span> <span class='ball-3'></span> <span class='ball-4'></span> <span class='ball-5'></span> <span class='ball-6'></span> <span class='ball-7'></span> <span class='ball-8'></span> </div> </div>3. Dan yang terakhir, semoga animasi Preloader hilang sesudah halaman blog termuat penuh (seluruhnya, cari tag </body> kemudian letakkan instruksi berikut ini sempurna diatas tag </body>.
<script type='text/javascript'> //<![CDATA[ // Preloader $(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})}); //]]> </script>4. Selesai. Untuk Demo dapat klik tombol dibawah ini.
Demo
