Cara Membuat Animasi Loading di Blogger




Cara Membuat Animasi Loading di Blogger

Cara Membuat Animasi Loading di Blogger


Kembali lagi saya pada pagi ini untuk share sedikit penjelasan mengenai Cara Membuat Animasi Loading di Blogger. Nah pengertian dari page loading yaitu adalah salah satu fitur berguna untuk menampilkan sebuah efek loading ketika pada saat perpindahan page, perpindahan page/halaman blog yang mana akan menampilkan sebuah gambar animasi loading.

Dengan anda membuat halaman animasi loading di blog anda, maka akan terlihat blog anda semakin keren, cantik dan sangat menarik untuk di lihat. Pada saat anda memasang efek animasi loading ini anda tidak perlu khawatir  seperti waktu perpindahan halaman blog anda, untuk masalah mengenai akan memberat kan blog anda, tentu efek animasi ini tidak akan memberat kan loading blog kesayangan anda.

Jika anda ingin membuatnya maka anda bisa membaca artikel yang saya buat ini hingga selesai, dan di bawah ini cara untuk membuat efek animasi halaman loading tersebut.

Cara Membuat Animasi Loading di Blogger

  1. Pertama , anda terlebih dahulu login di akun blogger milik anda
  2. Masuk pada bagian editor template , caranya pilih Menu Template ==> Edit HTML.
  3. Temukan kode ]]></b:skin> (cara cepat tekan CTRL+F)
  4. Jika sudah ketemu salin kode di bawah ini tepat di atas kode ]]></b:skin>
    page-loader {
    position:fixed !important;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:999999;
    background: #000 url("URL IMAGE") no-repeat 50% 50%;
    padding:1em 1.2em;
    display:none
    }
  5. Penjelasan Script diatas 
    Pada body Background disisipkan kode'<div id="page-loader"></div>
    ketika akan berpindah ke halaman lain page loader ditampilkan dengan efek fadein dengan waktu 1000detik, dilakukan penundaan 8000detik, dan kemudian diakhiri dengan efek fadeout 1000detik.
  6. Jika sudah, maka langkah selanjutnya
  7. Anda cari kode </body>
  8. Kemudian anda salin kode di bawah ini dan di paste kan tepat di atas kode </body>
    <script type='text/javascript'>
    //<![CDATA[
    $(document.body).append('<div id="page-loader"></div>');
    $(window).on("beforeunload", function() {
    $('#page-loader').fadeIn(1000).delay(8000).fadeOut(1000);
    });
    //]]>
    </script>
  9. Jangan lupa klik simpan template, dan lihat hasilnya. Taraaa sudah berhasil.
  10. Keterangan
    Background  dapat diganti menyesuaikan kondisi blog sobat. URL Image adalah tempat menyimpan URL image, apabila anda memiliki kategori gambar sendiri, kemudian menguploudnya lalu anda terapkan. Setelah semuanya selesai di terapkan lalu simpan template dan lihat hasilnya.
Efek Animasi Loading Halaman .Gif

Di bawah ini ada beberapa efek animasi loading page. Anda bisa memilih salah satu efek animasi loading page yang sudah tersedia di bawah ini.


http://4.bp.blogspot.com/-Swt685lt6ys/VA16rHry5eI/AAAAAAAADZY/IpcXMen9Baw/s1600/loading3%2B(1).gif





http://3.bp.blogspot.com/-eOUGOXRvaAw/VA16rbVNP0I/AAAAAAAADZQ/7vyE8vSu9oE/s1600/loading7%2B(1).gif



http://1.bp.blogspot.com/-IiLv-ImK560/VA16kvSVJQI/AAAAAAAADX4/4iEBuCyqSQY/s1600/Loading3.GIF


http://3.bp.blogspot.com/-uQAf8glZH6U/VA16o7gn9SI/AAAAAAAADYs/MiVYc4q4VYw/s1600/Loading8.GIF




http://2.bp.blogspot.com/-gPwCiVWVA0E/VA16sbLarKI/AAAAAAAADZg/53_r4Hiy0Bo/s1600/loading9%2B(1).gif




http://3.bp.blogspot.com/-RGDTwjwFAfI/VA16nTy73yI/AAAAAAAADYY/2Q_bv6PSZpk/s1600/Loading6.GIF

http://1.bp.blogspot.com/-GbiMJDnzg6Y/VA16nNujPAI/AAAAAAAADYU/-8FLWN8gGX0/s1600/Loading5.GIF


http://4.bp.blogspot.com/-oXnJb-Hf8yg/VA16mCcCwtI/AAAAAAAADYM/L-6mkDGWBd8/s1600/Loading4.GIF



http://3.bp.blogspot.com/-KuPPWeIiKEk/VA16pu4vxVI/AAAAAAAADY4/DORC4PejW6k/s1600/loading1%2B(1).gif

http://1.bp.blogspot.com/-yw93SfO7HUg/VA16kPJrEMI/AAAAAAAADX0/zA_AYKGrLpk/s1600/Loading1.GIF


http://3.bp.blogspot.com/-7ijf80PfNiE/VA16qe_bMvI/AAAAAAAADZI/UOFV0ortsc8/s1600/loading2%2B(1).gif


http://4.bp.blogspot.com/-RNEaIW8mfwM/VA16kh4jw_I/AAAAAAAADYA/8BzQLvaNjXs/s1600/Loading2.GIF



http://4.bp.blogspot.com/-39XJmVYPlVw/VA16p37GXCI/AAAAAAAADZA/josfLBxhobs/s1600/loading10.gif



http://2.bp.blogspot.com/-EPaWBo-HO5Y/VA16pR-LyzI/AAAAAAAADYw/9J60a2EkJlI/s1600/Loading9.GIF


Jika anda ingin mencari efek animasi loading bisa kunjungi disini 

mungkin sampai disini dulu tutorial penjelasan saya pada pagi ini, selamat mencoba dan berhasil, jika ada yang kurang jelas yang ingin di sampaikan, silahkan klik tombol komentar. Sampai ketemu lagi di artikel selanjutnya. terimakasih

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect