. Cara membuat animasi loading page di blogger menggunakan CSS - Webo-lovers

Cara membuat animasi loading page di blogger menggunakan CSS


Gambar animasi loading page


webo-lovers.xyz - Memiliki tampilan blog yang keren memang menjadi daya tarik sendiri bagi para pengunjung, Apalagi saat mereka sedang dalam tahap loading blog menampilkan animasi loading yang keren, pasti mereka akan lebih betah menunggu saat terjadi loading lama karena masalah jaringan atau yang lainya. Maka dari itu anda perlu menambahkan animasi loading page di blog anda untuk memperindah blog anda.

Animasi loading page bisa anda buat menggunakan CSS, Sebagai contoh silahkan anda coba berpindah ke artikel lain di blog ini, maka akan ada animasi loading yang menghiasi. Animasi loading yang biasa digunakan adalah gambar bergerak atau gambar berformat gif.

Sekilas tentang CSS, Mungkin beberapa dari anda belum tahu apa itu CSS. Ya jadi CSS adalah singkatan dari Cascading Style Sheet dan berfungsi untuk mengatur tampilan elemen bahasa pemrograman markup seperti HTML, Dan PHP. Pada intinya Css berfungsi untuk mengatur tampilan suatu halaman atau aplikasi.

Buat anda yang ingin membut animasi loading page di blog anda saya akan berikan tutorialnya. Anda juga tidak perlu repot-repot mencari gambar animasi loading gif, karena saya sudah menyedikan beberapa gambar animasi loading gif yang bisa anda gunakan.

Perlu anda ketahui juga, Animasi loading page ini tidak akan berpengaruh terhadap kecepatan blog anda karena hanya menggunakan css. Animasi loading ini hanya mengisi halaman anda saat loading, daripada dibiarkan blank mending di pasang animasi buat agar lebih keren.

Cara membuat animasi loading page di blogger menggunakan CSS


Oke temen-temen kita langsung saja ke tutorialnya, Silahkan siapkan teks editor yang akan digunakan untuk menampung kode-kode yang saya berikan sebelum di pasang di template blog anda.

  • Langkah pertama silahkan copy kode di bawah ini ke teks editor anda:
<style type='text/css'>
.loading {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('https://raw.githubusercontent.com/mastamvan/backup/loadinghalaman/efek-loading-blog-sederhana.gif') 50% 50% no-repeat rgb(249,249,249);
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".loading").fadeOut("slow");
})
</script>
  • Jika sudah silahkan ganti kode link gambar animasi yang sudah saya beri warna merah , ganti dengan ganti dengan link gambar animasi yang ingin temen-temen gunakan. Anda bisa memilih gambar animasi yang ingin anda gunakan pada bagian bawah artikel ini, silahkan pilih sesuka hati temen-temen. 
ganti kode https://raw.githubusercontent.com/mastamvan/backup/loadinghalaman/efek-loading-blog-sederhana.gif dengan kode gambar animasi yang akan anda gunakan 
  • Jika sudah silahkan copy code yang ada di teks editor temen-temen

  • Kemudian masuk ke dashboard blogger anda, lalu buka menu Template>Edit HTML, Cari kode </head> lalu paste kode yang sudah anda copy diatasnya. Anda bisa menekan tombol CTRL=F kemudian ketik </head> maka anda akan diarahkan langsung ke bagian </head>.
  • langkah selanjutnya silahkan cari kode <body> kemudian copy dan paste kode dibawahnya.
<div class="loading"></div>

  • Jika sudah silahkan save template anda, untuk menghindari gagal save silahkan anda tekan tombol save sebanyak 2 kali.
  • Lalu cek apakah penerapan animasi loading page sudah berhasil atau belum dengan cara membuka blog anda dan coba berpindah artikel.




Nah dibawah ini adalah beberapa animasi loading yang bisa anda gunakan untuk dipasang di blog anda. Saya ambil dari beberapa situs tempat penyedia animasi loading, anda juga bisa mencari sendiri di slgoogle





Berikut adalah animasi loading page terbaik yang sudah saya pilih khusus buat anda.



Note : Untuk  mendapatkan url gambar yang akan anda gunakan untuk animasi loading page blog anda silahkan klik gambar-gambar animasi dibawah ini lalu copy link di bagian sidebar




















Demikian artikel tentang cara membuat animasi loading page menggunakan css, semoga bisa berguna dan bermanfaat. jika ada pertanyaan atau saran silahkan cantumkan di kolom komentar.
logo
Kecepatan Sebuah Website Adalah Prioritas Kami.
  • Facebook
  • WhatsApp
  • Instagram
  • Subscribe Our Newsletter

    Related Posts

    Buka Komentar
    Tutup Komentar

    0 Response to "Cara membuat animasi loading page di blogger menggunakan CSS"

    Post a Comment

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel