Caralukman - Kali ini saya ingin berbagi Cara Membuat Efek Loading di Blog, jadinya saat kita ngeklik suatu artikel akan ada efek loadingnya, contohnya diblog saya ini. Mungkin efek loading blog ini tidak perlu bagi blog, tetapi jika sobat ingin terapkan silahkan sobat bisa langsung copas saja scipt di bawah ini sebelum kode ]]></b:skin> :
How To Make Loading Effect :
- Masuk dulu ke Blogger
- Pilih Template > Edit HTML
- Taruh Kode Dibawah ini diatas kode </style> atau ]]></b:skin>
#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/AVvXsEhoWqsJXjy_qXHGBD7_fCVkjJUvtQp42EbW12m_9CxFswhWaaE7f-52dTHkk-kyvWazGzwaeKBIFE4D6QKYBXZRZ346HyoY869VwviuXY0UolGgbVKodeh4740YB_a20vrmf74JRMcDdIs/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'/>
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>
- Yang terakhir Save template, Selesai
wuih, keren banget effek loading nya gan..
ReplyDeleteizin nyobain ya :)
Iyaa silahkan :)
Deletekalau gambar loading nya diganti bisa ga min ?
ReplyDeleteAgan harus cari bahannya dulu :)
Deletekeren gan, ane mau praktekin di blog berhubung blog ane kagak punya efek loading ;)
ReplyDeleteSilahkan dipake gan :D
Deletemantap bget gan, apa gk berat nih ntar loading blognya ??
ReplyDeleteNgak dong, klo blog agan wuss mah wuss aja :D
ReplyDeletecara buat gambarnya sendiri gimana gan? :/
ReplyDeleteDiphotoshop .png atau nyari digoogle bisa :D
Delete.gif maksud saya (dot gif)
Deletekeren nih! izin pake yaa :D
ReplyDeleteIya silahkan ^_^
Deleteartikelnya sangat bagus kawan
ReplyDeletehttp://acemaxs31.com/obat-kanker-paru-paru/
http://apotekgumilar.com/
http://acemaxs86.com/
info nya bermanfaat , mudah dipraktekkan , terimakasih
ReplyDeletethanks infonya Makasih Kunjungi kami
ReplyDeletebisa gak dibuatin tutorial biar gampang mempelajarinya ?
ReplyDeleteapa yang anda tidak bisa?
Deletenice share
ReplyDeletebagus nih efeknya
ReplyDeleteterimakasih gan infonya
ReplyDeletemantap nih, tapi aman ga untuk blogspot mas
ReplyDeleteIzin coba ya gan
ReplyDelete