Advertisement
Pada keempatan sebelumnya Rite Experience sharing tentang Cara Modifikasi Scroll bar dengan CSS3.
Nah , pada kesempatan ini Blog Rite Experience akan sharing lag tentang tutorial blog yaitu Cara menambahkan efek animasi loading yang ringan dan keren.Mungkin sobat blogger akan menggunakannya untuk mempercantik blog biar
banyak pengunjung yang tertarik.
yaudah tak usah nunggu waktu lama lagi ,
Begini caranya :
- 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 Sobat Sudah tertanam Jquery Sebaiknya lw\ewatkan saja langkah ini, di karenakan di blog hanya boleh ada satu jquery :D
- Tambahkan Kode CSS Di Bawah ini Di Atas Kode ]]></b:skin> atau </style>
#page-loader {NB : Ganti Yang Berwarna Merah dengan url gambar sobat !
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/AVvXsEg4hR9DB1yF0oj-RiauHdBzuDdDOb_roDq1nFf7-xKmHcKvrLUCAXxvzWmluHH4jagI5ROAYInHyS-dBieMnsE_Nhf1jcLMNYWFWJaL5OgZwzMWbVXYlE2yWGGhiPJHc-GxjMlwpKmqJEM/s200/load6.gif') no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
}
- 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>
- Tinggal di simpan deh template nya.
Beberapa URL Gambar yang bisa sobat pakai :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTHYIvRT3pnr_thgxpv5FpJqAumQcjgsVbrh-ZDJiFcysAkuMwC_Joh-wmiNWPVnghAj-9RwJgpd22H9mT0qkChdxgrlYEztvFrlnilbiaGdn6bWWlVYBx85A_kGgbk7MHehKTBwR081P/s1600/loading1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU5G-_OrMeUPPyS54BpnreINmqVIvJZpoUee2PTnRqHy-BPcJsufoE41OVrQyTxZeVEBLiEq4mP2g00eBCUfBnDsNk0vaE7uyVR2CzW7j5kTSaO4H16VXuQdrkmZoA-U_5ma-8O2J0eN0w/s1600/loading2.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmSdbfJPCF-hTOoU-ZCHxsoSUF2p764C1Ldj0wI-LtkhouWdLP7pu2S4MKGgPcvM4EGQzd5g6NHfvpbHeJufBcJ6oWYGdIW7XYq-iQqRNLkodquTKHHDuKfdRri55C5jTyFQSBvmC64wwi/s1600/loading3.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpJf63D-q-Wk3lT9TpRfS90li7rPsWXwTx1baKsTmwlkYvrvs9fzC9NA_mshV8assBpM5Hs4b0dA5PjahIiq1djUOMAdceJ5zIsbQW1zOL9L5JZyy06WKzmF8R6UvZq1NGvnscKHTGpaZh/s1600/loading4.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg-38859xkUAj4vcC2SpZ4YSBCJdVvwStJohSUZ5w6XRKso3hJFO3mcekd3zPQmcMrvCvqIxadYl9pa71bervjkSVKINfuuvLnBA9-KRa8hvjzqg5q2L00zPhCU0Bm7TZUHqk-T1gwt_c8/s1600/loading5.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRlbfti2RNY-3BsImNSSQGDrzVPAlPHq8Hg-iInqcj3-hsjx-2RuGi3wvmAGzV8AlRHHv4CKzogRumBuTGuq5lBEfJkQ_ULJ10dHAV2wzRfp8bAY1jLUaGI2FVEhzbxE-ZpnFbEYjrv1IO/s1600/loading6.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQoB7aG0kuENcZ3YnBBt5g2FlLuEtC31VB9FP3KxK5-V_3_y_7UUgfbkvWiI7Rcvr_8tUozeONw1wwQUQViATgsDYAVvj-pvMLx0LXhLjiztdxyDgvZfRqRrgr_mIrlmtkQ8sFai57JpNH/s1600/loading7.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5vRJf0dDAGkgDbdj9Zy7dthVIDu-KWqdyILSJT-JxDG2jqaw6d_FmAb9coFJiPR9QqHK33rgMnEQ75688us60fTc9zA8Rb55hql2ZukrLPGvruEOd0J6o1mbZg8qrvhunKxKdGU15p2Db/s1600/loading8.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8zYoUWl2LJ9vqtnSIDz12oiUFpk64OX51YO8uHcAf-b59CTmBmXir56AG0teHSHX7uOpahOAY8TV3iary_VeR5xTM2C5p8dbhVhRJdVIO_abwxpsth9a_ZmecS7_cX-hl9KL_3q9Ykxbj/s1600/loading9.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJqpHfRPMgMeH5F-SSrxsSOq9-OSZSg2WyPlL5FrZbyVnMlMhq3IieV98qBESl4jgipdxae5qXKPEQo4BNstMrYBybqJ7xOhqpzADidTmi_UExXoWCegdsp4XB_LCV4Vm2eP1prGzMV2-5/s1600/loading10.gif
Sekian Dulu Dari Saya, Jika ada yang di tanyakan silahkan bertanya dikomentar !
Click here for komentar
artikel nya keren banget gan ane sekarang tau cara nambahin efek loading :) hehe by the way tempe nya ringan amat wussh
BalasHe..he..
BalasYa Gan..
Soalnya javascript yang bikin lelet blog gw hilangin.. :D
mantab loading nya broo,.
Balasijin coba ya
Sipp...
BalasSilahkan sob. :)
Aturan Berkomentar :
- Dilarang berkomentar menggunakan kata kotor, menghina, atau mengejek.
- Dilarang berkomentar yang mengandung unsur sara, po*no, promo, spam dan sebagainya.
- Dilarang berkomentar berupa link hidup.
- Komentarlah dengan bahasa baku, sopan, dan santun serta sesuai dengan isi postingan.
- Jika komentar tidak sesuai dengan isi postingan atau melanggar peraturan di atas, saya akan langsung menghapusnya.
Terima kasih karena telah mentaati perturan !
Out Of Topic Show EmoticonHide Emoticon