Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogger

Cara Menciptakan Animasi Loading Pada Blog Memakai Css.

Cara Membuat Animasi Loading Pada Blog Menggunakan CSS.  Nah jumpa lagi dengan mamang, pada arikel kali ini aku akan membagikan cara untuk menciptakan animasi efek loading pada blog. Efek loading ialah efek yang akan berfungsi menciptakan blog memunculkan sebuah animasi dikala blog belum final di muat suatu page. Biasanya akan muncul dikala teman berpindah dari page, pola dikala teman berada di Homepage, kemudian teman mengklik sebuah artikel lainnya maka akan muncul sebuah efek loading yang keren pada blog sobat. Tapi animasi loading ini juga sanggup di atur hanya di bab Homepage saja.


Kelebihan dari animasi loading blog ini adalah, menciptakan tampilan blog kita terkesan berkelas dan tampak elegan gituh heee.
Kekuranggnnya ialah menciptakan pengunjung menjadi usang menunggu alasannya menunggu animasi loading final memuat kontent dan pengunjung akan meninggalkan blog teman alasannya terlalu lama,

Capcus, bagi teman yang ingin menerapkan animasi loading blog ini sangatlah mudah, jadi eksklusif saja simak baik-baik tutorialnya

Cara Membuat Animasi Loading Pada Blog Menggunakan CSS


1. Silahkan masuk ke Dashboard Blog
2. Setelah itu Klik Template/Tema > Klik Edit HTML 
3. Copy arahan dibawah ini kemudian tambahkan diatas arahan </head> atau </header>

4. Berikutnya Tambahkan arahan dibawah ini, letakkan arahan sempurna dibawah <body> 
 
<div id='kang-iyan'> <div class='loader-container' id='page-loader'> <div class='loading-wrapper'> <div class='loader-animation' id='loader-animation'> <span class='loader'><span class='loader-inner'></span></span> </div> <div class='loader-name' id='loader-name'> <strong>WELCOME</strong> </div> <strong><p class='loader-job' id='loader-job'>Mohon Tunggu Sebentar</p></strong> </div></div></div>

5. Tambahkan arahan dibawah ini dan letakan sempurna diatas kode </body>
 
<script src='https://rawgit.com/Txmvp/Animation/master/main.js' type='text/javascript'></script>

6. Done, Buat yang mau animasinya hanya tampil dikala di Homepage saja maka tambakan arahan ini <b:if cond='data:blog.url == data:blog.homepageUrl'> pada arahan script nomer 4
Contohnya menyerupai ini :
 
<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='kang-iyan'> <div class='loader-container' id='page-loader'> <div class='loading-wrapper'> <div class='loader-animation' id='loader-animation'> <span class='loader'><span class='loader-inner'></span></span> </div> <div class='loader-name' id='loader-name'> <strong>WELCOME</strong> </div> <strong><p class='loader-job' id='loader-job'>Mohon Tunggu Sebentar</p></strong> </div></div></div> </b:if>

Tampilan loading hanya akan tampil dibagian Homepage saja kalau memakai tag khusus menyerupai diatas.

Nah gimana sobat, tutorial kali ini sangat mudahkan, agar dengan adanya artikel kali ini sanggup menambah wawasan dan ilmu pengetahuan gres lagi heee. Oiya special thanks lagi buatnya kang Iyan yang sudah membua scriptnya hee. Mungkin itu saja, agar bermanfaat guys

Anda mungkin menyukai postingan ini :