Cara Membuat Efek Loading Blog Seperti Kang Ismet!
Selamat datang agan/aganwati di blog tiruan saya. disini saya akan membahas cara membuat efek loading seperti blognya kang ismet. baiklah langsung saja ini dia langkah-langkahnya
- Masuk dulu ke Blogger
- Pilih Template > Edit HTML
- Taruh Kode Dibawah ini diatas kode </style> atau ]]></b:skin> gunakan (ctrl+f)
#page-loader { position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; z-index:999999; background: #303030 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_AnuAfvc7w6hWrWJKeSVbf5SJlL2dO6gSX8Q1H5Jr3gE0rnlTo3v1nO3mfuhYS11l806XlCmph3AgeNFCg9yddi9QL3zK-EhGNs3f6WidDNeMJO4GykNrgnkzgEe-uImzxGdZv1scUYM/s200/load6.gif") no-repeat 50% 50%; padding:1em 1.2em; display:none }
- Masukkan kode dibawah ini diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>Catatan: Kalo Jquery sudah ada di blog agan, langkah ini dilewati saja
- Masukkan kode dibawah ini diatas kode </body>
<script type='text/javascript'> //<![CDATA[ // Menyisipkan markup tabir animasi $(document.body).append('<div id="page-loader"></div>'); // Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain... $(window).on("beforeunload", function() { // ... tampilkan tabir animasi dengan efek `.fadeIn()` $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]> </script>- Setelah itu save selesai dan coba lihat hasilnya
Cukup sekian dan terimakasih. Semoga Bermanfaat!