Cara Membuat Efek Loading Keren dan Ringan di Blog

Kali ini yang akan saya share adalah Cara Membuat Efek Loading Keren dan Ringan di Blog. Efek loading yang akan kita buat sekarang tidak akan membuat blog agan menjadi berat.

Langsung saja simak turitorialnya di bawah ini:

1. 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 agan sudah ada kode jquery, maka agan bisa melewati langkah ini

2. Tambahkan kode CSS di bawah ini tepat 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/AVvXsEh9ajEXdpglExt8EVLHrIscATh6J-bYxeZx-RdIKEUwsIBeXnKA4QYBPPOfbBQHZURBInBxSligLqyIYHVRjIqsi6k4xQoqgggoWrPD_gl-4RZx7gbHgLXGoKYum4xr6OufLFei0tf2fKM/s200/load6.gif') no-repeat 50% 50%;
    color:white;
    padding:1em 1.2em;
    display:none;
    }

NB : Agan bisa mengganti kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9ajEXdpglExt8EVLHrIscATh6J-bYxeZx-RdIKEUwsIBeXnKA4QYBPPOfbBQHZURBInBxSligLqyIYHVRjIqsi6k4xQoqgggoWrPD_gl-4RZx7gbHgLXGoKYum4xr6OufLFei0tf2fKM/s200/load6.gif dengan url gambar yang agan inginkan

3. 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>

4.Save dan selesai.

Maka sekarang akan tampil efek loading di blog agan.

Di bawah ini ada beberapa url gambar yang bisa agan pakai:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8JkHEeG7CHJhqe2zl1KH2mYlssEX6fSr55vZ9cw6X5LopmTjrlzKDPn39Od0OigrMnMPNgzUtSf-VrBzCHf98vkWR3dzZXAK8XrYbwi0lEvZWXCz8ZHFML1s-gQWJ326XpaGYsJQBbhBA/s1600/loading1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS9R9drpSGK_dmcqL8b49FPfBer3QL6KINjcj28L9RfZ-rz_wg2KA7hj3pRNQpuoej-UE6gEueBav6jiFMiSYVUMZuujLn9e1i1Bgs8kMYde_a_RnWWL-uThBJ2mYG7ImJq3MTRM3Lx5Sn/s1600/loading2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjR1xt8cchSrG4iU3jY-HwytBnieljLwdiGm3_7XDkc-gdR52MleUJ2U0vFM9qOsT2pK47N1hRF2chCYwwd80I_Fa6dXh7ygRfP86Fq-shcPSvEa3YzzYLA9MFfeJfRtZOdw1Y-u8LKvPo/s1600/loading3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizWsVx_vHY1Nb6mnPKk8TC89FP1EZRRCdNZ-6zKVyMwkytJ5hYHKYqCipWJPBsQLbaHKRMwRJsxNwM-mMzqbkTsUap6SFjncs9BbnDEmD5GiAMmn0r2O8FdoF0cl8zExmvlLhWx2l04Xx7/s1600/loading4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS3Jx_5aq83UuDqjLD7kj_5_SkbFFcoveV6vW6iYRVzDbaLRxfz4KiRdFe29VGgIB9uuvCQmI5dzaskX4quvfmRBpv6tL-aLPFjge1F9hmyiSlqDZEfZsHrHFqC810JY84H-RchQu9uQnp/s1600/loading5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGvUkZsEeinqf8avoTN9nMAJ18CZr9cQBuTyevpQEjESayis1asr9cH01eJgEoVCpCQJ1OMYqJNpLbV0ByCTMauuB5bWdR3yg8IEB7ISaP0P3ey0RXkso0jpISBaXNkriK9C7YZYQvJ6TJ/s1600/loading6.gif

http://lh6.ggpht.com/_7Y9pl24WpQY/SvWGSQefdKI/AAAAAAAACHU/pXqVd65gbE4/ajax-loader7_thumb%5B1%5D.gif?imgmax=800

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnOa63DDsTwFbKI3-nn3oQYpMguiOLmMwHyTAvTbc3REy-HM7Op66E-okPlhRMiAvJnj6IzdT2HMYH0XqBOTGk3XY2a2tiIwTgXqdC5JLSdFkp8oVJQPRTAhqDnARDmXPf6eMM5oZzoswp/s1600/loading7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkLHtwPLjhsfsj9o6GJYrDq7wJ09aP68xNhS6zkIfoX0g1cHuJYQNzg8GwR-zwsS0TfqmA337L26ov8jxk04LcIYI37Rxv0VxRF_rBYHjuM98h-6toEob33oC1twU3H5txOOLPw_NvPQQk/s1600/loading8.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHpYR7gRdTbBbnsFE2CzWj5enURxivtfvpD-k6IZ8KsDcrbkyRMoGNF5rU8a45l36cix6AJlT2ijoW0Vrb4qNLkM8Q37ADqTfJYNZezEcBN72b5R0oCBsXFh9GzdQz6fLfBu55-VrwateZ/s1600/loading9.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzQuj-6W_5vr1KvMDwhGH-xMwYjjBrUG5pMYpFiBPfGPtshBxzz16YWoq2UkCq8f-3VDDKgBPKI_Q3HS-gD776c3klXGFgH3w7IdukOoe-DXEfhrNa93HQEUM8m-33MXa4BbocudYi-ZBn/s1600/loading10.gif

http://lh5.ggpht.com/_7Y9pl24WpQY/SvWGZ7b8KyI/AAAAAAAACHs/O1Gg535icIo/ajax-loader3_thumb%5B1%5D.gif?imgmax=800

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6L1Cunl11mkVzdgqKJzn62DNUJHJWNzug61P1vcP6JPDUNH5YhxcxZ5k-vZA00rMlpEmV4syD9No_tvoterXr_dkOEmnL3VYFgZwAnWK2iE24NDvaRodh1DsHWpgLbN-uj49BACQ-N4A/s1600/Loader1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqdZ78rrFCAws5S4j0Y81Cb_Gsy045vtl7Zf2g6_LDCTzhnMqRn7PhA75SveG6R3jiFTfkiqJiREGYwz71fDtZGEglDkjfGx56iAQJV7QLT1xnYYvbbJM3U2AxXKKzqNr470Bgqv72YPE/s1600/Loader2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY4VIp-0DRRjIW2gB-_QUKWEtb2-NHJXYlBsIOJ1UHQCcyxcRF4aDq2NZjHCsAr7HzleTDoa0aUzd5MZ-zUydQqCvplCyAUhsm00YqrKojAGQQpS7ILD37gO4-1K_aT_8BdQ064Decd1g/s1600/Loader3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLRpTdl2eAQ1LVKos1TF2haNOYhdcqMw8GjeqRsD9oOorgobh-f8gOISk3zHyyIEt_YEAi3c9PXYP3xVM2XYuBAdsNqHczd7EatNtm8jUetnne74hKcwTQdfm3ORVRCAzEoblmCmQIAwM/s1600/Loading9.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcb8Qz3Ps1hbZ96eNsPz0_QmXcqwVmNccHHv1GkxWKq6jJo-j0d8fc1vTEAU94-EhoRIGwQUqAoG7oyAtUgCoWsxkYJiVB4Zkdlf_WnLW1BHpwzzTyto-ZjSmLqpfGCM7WLjAmess2_1w/s128-no/Loading7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNHjgY-_xS_2GWr43aWKO9ro__kMkUrny-TSzVQs43b15_6l511fIkWN8rIUsmaI2u258yRJVm5oISRDOJU1tYMGFA-L10l0_GMB-F0S9BxHU7QEOgzOJoQDzpkGq9AHxOOJWNmbTKB28/s1600/Loading4.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHS-ERri4LtiH6zubo8eCxAIpuBKWvwMpsTADuLhCU9MLOGGzfp77flwr7J9iFfJWkcTRdwVwOMlquxcX6CwQ8oPr2CxFyKEaToR_LZ8KPvazRNsLlUP6cCRgKOLLlPhkLyFzSej1v8BU/s1600/Loading1.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS7ywus5JuF-BVqVohFjRAhu1B6ROmsQ6w7CDzPrd9vTu_Ruee6v2cCRlMYbC9PhdwlWWimmRHT_JlWxRgoOTBkp4FS4KiNzdQT58YQbQiwqJrtxmodjHn74PnlhSAie2fuBxINkdOw8Y/s1600/Loading2.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcvXXrmVRaKu54bt2RjnLRkPndzaDI2WSZfJz8DrI0jFty4ySKYxui2oHyhyBrGqzMXndvSirFrLM_C0wqvdf-OC4XLNtuHZstuGSu1x_jcuKAzf6yxjND8wt-MsFDc3sg1i0JzIdY8_A/s1600/Loading6.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivZE596tbeI3yx6C1H4luut45dGN7m1p7d5TDt1s4TOxEaBpE9RYgqQfkQquwZK63TVFYz2iPQvmrPIYsHspEJ2NzSvBc_cbssAbKGpzsJVWRfhMvGhReGJxiY5cBCspTZQfl1HJ1kllY/s1600/Loading5.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkoYpL0vLBCKQwXSDneLtB70EAhbmH6zol44BdPjVddJuRYcf-gdp8jJBd0USb4125C3ZsgFrOfwmV6QHg8bsVn93n2OoApylI-cEEMZdlgTTlGMZCH_0GIwiHD_YnPP3IVATtSuNNaTU/w128-h40-no/Loading10.gif

Atau agan bisa mengunjungi website Ajax loading generator online di bawah ini untuk mencari efek gambar yang di inginkan:

Preloaders.net