™ Jay Sing ™

Membuat Efek Loading di Blog - Mungkin sobat sering melihat efek loading di beberapa blog. Menurut saya efek loading ini menambah cantik penampilan blog, dan membuat pengunjung mau menunggu karena blog sedang loading.

Untuk membuatnya, silahkan ikuti langkah2 di bawah ini :

Langkah 1 : Tambahkan jQuery pada blog sobat

Simpan kode di bawah ini sebelum </head>

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

Apabila template sobat sudah memiliki jQuery, lewati langkah ini. Harap diperhatikan, tidak boleh ada script jQuery lebih dari satu.
Langkah 2 : Tambahkan CSS

Simpan CSS ini di atas ]]></b:skin>

#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/AVvXsEiZwWJQMyZO62OVUv99g8IICJxIThkIc40fdCAYsKUL-_pBA-c5RplOlZDYJWjDe_KxeBJKGlm7fn7UZjdJLX-zHfXlLPl_Mzgt4__snmxkSE3VCsMq1d-LFNN_bvNxiN_kUmh3C4cjNKI/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%; color:white; padding:1em 1.2em; display:none; }

Untuk merubah warna sesuai dengan blog sobat, silahkan edit warna dan gambar pada kode

background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZwWJQMyZO62OVUv99g8IICJxIThkIc40fdCAYsKUL-_pBA-c5RplOlZDYJWjDe_KxeBJKGlm7fn7UZjdJLX-zHfXlLPl_Mzgt4__snmxkSE3VCsMq1d-LFNN_bvNxiN_kUmh3C4cjNKI/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;

Langkah 3 : Tambahkan JavaScript

Tambahkan kode JavaScript ini di atas </body>

<script type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="page-loader">Loading...</div>'); $(window).on("beforeunload", function() { $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]> </script>

Simpan template...