Cara menambahkan efek animasi loading yang ringan dan keren

Advertisement

Pada keempatan sebelumnya Rite Experience sharing tentang Cara Modifikasi Scroll bar dengan CSS3.

Nah , pada kesempatan ini Blog Rite Experience akan sharing lag tentang tutorial blog yaitu Cara menambahkan efek animasi loading yang ringan dan keren.Mungkin sobat blogger akan menggunakannya untuk mempercantik blog biar banyak pengunjung yang tertarik.

yaudah tak usah nunggu waktu lama lagi , Begini caranya :

  

• Tambahkan Jquery Di bawah ini atas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> 

NB : Jika Di Blog Sobat Sudah tertanam Jquery Sebaiknya lw\ewatkan saja langkah ini, di karenakan di blog hanya boleh ada satu jquery :D

• Tambahkan Kode CSS Di Bawah ini Di Atas Kode  ]]></b:skin> atau </style>

     #page-loader {
    position:fixed !important;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:9999;
    background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4hR9DB1yF0oj-RiauHdBzuDdDOb_roDq1nFf7-xKmHcKvrLUCAXxvzWmluHH4jagI5ROAYInHyS-dBieMnsE_Nhf1jcLMNYWFWJaL5OgZwzMWbVXYlE2yWGGhiPJHc-GxjMlwpKmqJEM/s200/load6.gif') no-repeat 50% 50%;
    color:white;
    padding:1em 1.2em;
    display:none;
    }

NB : Ganti  Yang Berwarna Merah dengan url gambar sobat !

• Terakhir tambahkan Javascript dibawah ini 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(6000).fadeOut(1000);
    });
    //]]>
    </script>

• Tinggal di simpan deh template nya.
  
  
  Beberapa URL Gambar yang bisa sobat pakai :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTHYIvRT3pnr_thgxpv5FpJqAumQcjgsVbrh-ZDJiFcysAkuMwC_Joh-wmiNWPVnghAj-9RwJgpd22H9mT0qkChdxgrlYEztvFrlnilbiaGdn6bWWlVYBx85A_kGgbk7MHehKTBwR081P/s1600/loading1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU5G-_OrMeUPPyS54BpnreINmqVIvJZpoUee2PTnRqHy-BPcJsufoE41OVrQyTxZeVEBLiEq4mP2g00eBCUfBnDsNk0vaE7uyVR2CzW7j5kTSaO4H16VXuQdrkmZoA-U_5ma-8O2J0eN0w/s1600/loading2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmSdbfJPCF-hTOoU-ZCHxsoSUF2p764C1Ldj0wI-LtkhouWdLP7pu2S4MKGgPcvM4EGQzd5g6NHfvpbHeJufBcJ6oWYGdIW7XYq-iQqRNLkodquTKHHDuKfdRri55C5jTyFQSBvmC64wwi/s1600/loading3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpJf63D-q-Wk3lT9TpRfS90li7rPsWXwTx1baKsTmwlkYvrvs9fzC9NA_mshV8assBpM5Hs4b0dA5PjahIiq1djUOMAdceJ5zIsbQW1zOL9L5JZyy06WKzmF8R6UvZq1NGvnscKHTGpaZh/s1600/loading4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg-38859xkUAj4vcC2SpZ4YSBCJdVvwStJohSUZ5w6XRKso3hJFO3mcekd3zPQmcMrvCvqIxadYl9pa71bervjkSVKINfuuvLnBA9-KRa8hvjzqg5q2L00zPhCU0Bm7TZUHqk-T1gwt_c8/s1600/loading5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRlbfti2RNY-3BsImNSSQGDrzVPAlPHq8Hg-iInqcj3-hsjx-2RuGi3wvmAGzV8AlRHHv4CKzogRumBuTGuq5lBEfJkQ_ULJ10dHAV2wzRfp8bAY1jLUaGI2FVEhzbxE-ZpnFbEYjrv1IO/s1600/loading6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQoB7aG0kuENcZ3YnBBt5g2FlLuEtC31VB9FP3KxK5-V_3_y_7UUgfbkvWiI7Rcvr_8tUozeONw1wwQUQViATgsDYAVvj-pvMLx0LXhLjiztdxyDgvZfRqRrgr_mIrlmtkQ8sFai57JpNH/s1600/loading7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5vRJf0dDAGkgDbdj9Zy7dthVIDu-KWqdyILSJT-JxDG2jqaw6d_FmAb9coFJiPR9QqHK33rgMnEQ75688us60fTc9zA8Rb55hql2ZukrLPGvruEOd0J6o1mbZg8qrvhunKxKdGU15p2Db/s1600/loading8.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8zYoUWl2LJ9vqtnSIDz12oiUFpk64OX51YO8uHcAf-b59CTmBmXir56AG0teHSHX7uOpahOAY8TV3iary_VeR5xTM2C5p8dbhVhRJdVIO_abwxpsth9a_ZmecS7_cX-hl9KL_3q9Ykxbj/s1600/loading9.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJqpHfRPMgMeH5F-SSrxsSOq9-OSZSg2WyPlL5FrZbyVnMlMhq3IieV98qBESl4jgipdxae5qXKPEQo4BNstMrYBybqJ7xOhqpzADidTmi_UExXoWCegdsp4XB_LCV4Vm2eP1prGzMV2-5/s1600/loading10.gif

Sekian Dulu Dari Saya, Jika ada yang di tanyakan silahkan bertanya dikomentar !