Pindah Halaman Dengan Efek Loading

23.57 Gusti Ardias Riantono 0 Comments

Pindah Halaman Dengan Efek Loading - Selamat malam sobat, saya mau berbagi ilmu tentang blogger. Sobat tau blognya +Kang Ismet? bagus ya? tau efek loading yang ada di blog tersebut? jika belum tau coba deh main-main di blognya. Nah kalau kalian sudah tau dan ingin memakai efek loading seperti itu yuk mari ikuti lebih dalam, lebih nyenyak lagi lho seperti di hipnotis ya? hehe

Pindah Halaman Dengan Efek Loading

Oke, siap ya untuk mengikuti langkah-langkah pemasangan efek loading ini. Yuk sekarang buka dashboard blog kalian dan menuju edit HTML pada menu template.

Jika sudah ikuti langkah pertama ini, Salin kode dibawah ini kemudian sisipkan di atas ]]></b:skin> atau </style>
#page-loader { position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; z-index:999999; background: #303030 url("http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif") no-repeat 50% 50%; padding:1em 1.2em; display:none }
Langkah kedua, salin dan sisipkan kode dibawah ini tepat diatas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
#info: Jika di blog kalian sudah terdapat jQuery kalian lewati tahap kedua ini ya.
Langkah ketiga, Salin dan sisipkan kode dibawah ini tepat diatas </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>
Langkah selanjutnya adalah simpan template kalian

Nah demikian cara membuat pindah halaman dengan efek loading seperti +Kang Ismet.
Selamat mencoba dan selamat memperindah blog kalian, bye~

#Sumber kode dari sobat Rhinokage Rio