Cara Membuat Animasi Loading Pada Blog Menggunakan CSS.

Konten []

Cara Membuat Animasi Loading Pada Blog Menggunakan CSS. Nah Sobat Mamang jumpa lagi dengan mamang, pada arikel kali ini saya akan membagikan cara untuk membuat animasi efek loading pada blog. Efek loading adalah efek yang akan berfungsi membuat blog memunculkan sebuah animasi ketika blog belum selesai di muat suatu page. Biasanya akan muncul ketika sobat berpindah dari page, contoh ketika sobat berada di Homepage, lalu sobat mengklik sebuah artikel lainnya maka akan muncul sebuah efek loading yang keren pada blog sobat. Tapi animasi loading ini juga bisa di atur hanya di bagian Homepage saja.

Kelebihan dari animasi loading blog ini adalah, membuat tampilan blog kita terkesan berkelas dan tampak elegan gituh heee.
Kekuranggnnya adalah membuat pengunjung menjadi lama menunggu karena menunggu animasi loading selesai memuat kontent dan pengunjung akan meninggalkan blog sobat karena terlalu lama,

Capcus, bagi sobat yang ingin menerapkan animasi loading blog ini sangatlah mudah, jadi langsung 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 kode dibawah ini lalu tambahkan diatas kode </head> atau </header>

4. Berikutnya Tambahkan kode dibawah ini, letakkan kode tepat 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 kode dibawah ini dan letakan tepat 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 ketika di Homepage saja maka tambakan kode ini <b:if cond='data:blog.url == data:blog.homepageUrl'> pada kode script nomer 4
Contohnya seperti 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 jika menggunakan tag khusus seperti diatas.

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

Cara Membuat Animasi Loading Pada Blog Menggunakan CSS

More posts

Belum Ada Komentar