Membuat efek animasi page loading di blog kali 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 kesempatan ini www.spezer.net akan membagikan tutorial cara membuat Animasi Loading Page sederhana di Blogger.

Cara Membuat Efek Loading Page Sederhana di Blogger
Loading Page

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 Efek Loading Blog Sederhana di Blogger


Berikut ini jika kamu ingin memasukannya ke dalam template Blog

1. Di Blog Bloger 😀
2. Pilih menu Template ➔ Edit HTML
3. 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.
4. Letakan kode di bawah ini sebelum atau di atas kode </head> :

<link href="https://cdn.rawgit.com/Brando07/seocips/Html/loading1.css" rel="stylesheet" type="text/css">

5. Letakan kode jQuery di bawah ini tepat sebelum atau di atas </body> :

<script src="https://cdn.rawgit.com/Brando07/seocips/newbe/loading1.js"></script>

6. Letakan kode HTML di bawah ini dibawah <body> :

<div id="loadingHalaman"></div>

7. Save template dan lihat hasilnya.

Berikut ini jika kamu ingin menambahkannya sebagai widget

1. Di Blog kamu 😄
2. Pilih menu Tata Letak  ➜ Tambahkan Gadget.
3. Kemudian pilih widget HTML/JavaScript
4. 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>

5. Save.

Nah, bagaimana tampilan efek loading sederhana ini? berikut demonya:




Bagaimana hasilnya? nah semoga efek loading blog ini bisa menambah cantik tampilan blog kamu.
0 Komentar untuk "Cara Membuat Efek Loading Page Sederhana di Blogger"