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

KATEGORI


HIBURAN


  • RCTI












  • VIDEO

    Iklan Semua Halaman

    Cara Membuat Animasi Loading di Blogger

    Monday, 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