Cara Membuat Animasi Loading di Blogger Cara Membuat Animasi Loading di Blogger - mizipediacom mizipediacom: Cara Membuat Animasi Loading di Blogger










KATEGORI

LIVE TV

Iklan Semua Halaman

Cara Membuat Animasi Loading di Blogger

Senin, 17 April 2017



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
Lihat Juga