Cara Menambahkan Loading Bar Pada Blog

loading bar blogger
MASJUNI.COM - Cara Menambahkan Animasi Loading Pada Web/Blog

Cara menambahkan tanda loading pada blog cukup sederhana hanya dengan menggunakan gambar gif, sedikit kode CSS dan sedikit kode javascript saja.

Kenapa Harus Menambahkan Loading Bar?

Alasanya sederhana, yakni selain sebagai keindahan, dengan menambahkan tanda loading pada blog juga dapat memberikan tanda kepada user anda bahwa konten sedang dimuat.

Apabila anda sebagai seorang publisher Google Adsense, maka dengan menambahkan loading bar juga meningkatkan potensi bahwa user tidak akan melewatkan untuk melihat iklan di blog anda.

Dengan menambahkan loading bar pada blog, maka setiap halaman di situs/blog anda akan terbuka sempurna sampai semua iklan tampil sebelum user dapat membacanya.

Well, langsung aja berikut langka-langkahnya:

1. Siapkan Gambar Gif

Dibawah ini ada beberapa gambar gif yang bisa anda gunakan langsung
loading bar blogger
loading bar blogger

loading bar blogger


Jika anda ingin menggunakan gambar lainnya, anda bisa download dari beberapa situs dibawah ini:

2. Upload Gambar Gif

Setelah memilih gambar gif yang akan anda gunakan, silahkan upload gambar tersebut ke layanan penyimpanan gambar mana saja bebas, asal bisa diakses.

Lebih mudah jika anda upload diblog anda sendiri kemudian copy link gambarnya.

3. Tambahkan kode CSS

Selanjutnya anda perlu menambahkan kode CSS untuk mengatur properti dari gambar gif anda seperti posisi adn lain-lain.

Silahkan copy kode CSS dibawah ini dan tambahkan didalam tag <style> atau tag <b:skin> (untuk platform Blogger)


#loader { 
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background: url("https://2.bp.blogspot.com/-YIkNxVZ0j-g/WfpE8n_XOeI/AAAAAAAACQ4/5QLSs5eOhpUfqI5p9z6nUPPADuPjxJb5ACLcBGAs/s1600/800%2B%25281%2529.gif") 50% 50% no-repeat rgb(255, 255, 255);
 opacity: 0.9; 
}
#loader p { 
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-top: 180px; 
}


untuk mengganti gambarnya, pada bagian background:url (' '); pada kode diatas ganti dengan url gambar yang anda gunakan.

4. Tambahkan Kode HTML

Selanjutnya silahkan tambahkan kode HTML dibawah ini tepat dibawah tag <body> pada file HTML blog/web anda.


<div id="loader">
<p>Loading...</p>
</div>


Anda bisa mengganti tulisan Loading... dengan kata apapun yang anda inginkan.

5. Tambahkan Javascript

Langkah terakhir ialah menambahkan sedikit kode Javascript.
Silahkan copy kode Javascript dibawah ini:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
<script type='text/javascript'>
   $(window).load(function() {
      $( "#loader" ).hide();
   });
</script>


Letakkan kode Javascript ini sebelum tag </body> pada bagian bawah file html anda.

6. Klik Save/Simpan Template


Coba refresh halaman blog anda untuk memastikan Loading Bar Blog yang anda tambahkan sudah bekerja dengan benar.

Sekian Cara Menambahkan Loading Bar Pada Blog.
Semoga bermanfaat :)

Tidak ada komentar:

Posting Komentar