cara membuat Animasi Loading Page sederhana di Blog
Ok sobat pada kesempatan ini seocips akan membagikan cara membuat Animasi Loading Page sederhana di Blogspot. Untuk membuat efek animasi page loading di blog ini kita tidak akan menggunakan banyak kode, jadi tidak akan terlalu memberatkan load page Blog kamu. Dengan menambahkan efek animasi loading seperti ini, dapat mempercantik tampilan blog ketika ada pengunjung yang mampir ke blog kamu.

Pada waktu yang lalu seocips juga telah membagikan efek loading blog menggunakan CSS keyframe, tapi agak sulit juga dalam pembuatannya, jika tertarik yang lebih mudah cara membuat atau cara memasang di blogspot kamu dapat mencoba:
  1. Pulse Loading Animation
  2. Bounce Loading Animation
  3. Animasi Loading page jam dan tanggal
  4. Dark Style Loading Animation
Nah, bagaimana tampilan efek loading sederhana ini? berikut demonya:


Efek loading ini akan muncul setiap kali link pada blog di klik (pada saat berpindah halaman dan masih di blog itu) maka animasi ini akan muncul. Bagaimana, tertarik ingin memasangnya? Berikut adalah langkah-langkahnya.

Cara membuat Loading Blog Sederhana (1)

Berikut ini jika kamu ingin memasukannya ke dalam template Blog.
Langkah-1 : Login Blogger, Klik menu Template => Edit HTML
Langkah-2 : Simpan kode external jQuery library di bawah ini, tepat sebelum tag </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Kode jQuery library hanya bisa di pasang satu kali saja, jika kamu sudah memasang kode seperti ini lewati saja langkah ini.
Langkah-3 : Copy kode di bawah ini, setelah itu paste tepat sebelum atau diatas kode </head> :
<link href="https://cdn.rawgit.com/Brando07/seocips/Html/loading1.css" rel="stylesheet" type="text/css">
Langkah-4 : Setelah itu simpan kode jQuery di bawah ini tepat sebelum atau di atas </body> :
<script src="https://cdn.rawgit.com/Brando07/seocips/newbe/loading1.js"></script>
Langkah-5 : Copy kode HTML di bawah ini, setelah itu paste tepat setelah tag <body> :
<div id="loadingHalaman"></div>
Save template dan lihat hasilnya.

Cara membuat Loading Blog Sederhana (2)

Berikut ini jika kamu ingin menambahkannya sebagai widget.
Langkah-1 : Login Blogger, Klik menu Tata Letak = > Tambahkan Gadget => HTML/JavaScript dan masukan kode dibawah ini:
<link href="https://cdn.rawgit.com/Brando07/seocips/Html/loading1.css" rel="stylesheet" type="text/css"></link>
 <script src="https://cdn.rawgit.com/Brando07/seocips/newbe/loading1.js"></script>
<div id="loadingHalaman">
</div>
Langkah-2. Save.
Bagaimana hasilnya? nah semoga efek loading blog ini bisa menambah cantik tampilan blog kamu.
1 Komentar untuk "Cara Membuat Loading Page Animasi Sederhana di Blog"