Cara Membuat Efek Animasi Page Loading
Cara Membuat Efek Animasi Page Loading di Blog - Halo rekan blogger, bagaimana kabarnya? kalau mimin lagi bete huuh. Tapi sekarang walaupun mimin lagi bete, akan tetep sharing tutorial di Blogger Max. Nah, apa anda tahu animasi page loading? animasi page loading berguna untuk meperhias blog agar lebih mempesona dan cantik, yaaa kalau pengunjung anda membuka sesuatu dari blog anda, maka akan munculah sosok loading yang keren berupa animasi. Nah, sekarang juga saya akan sharing cara membuat animasi loading di blog tersebut untuk anda.
Selain itu, efek loading yang dipasang di blog anda tidak akan memperlambat kinerja blog. Nah, sekarang anda tidak perlu khawatir lagi untuk memasang efek animasi loading di blog ini. Untuk membuatnya tidak sulit karena kita hanya perlu menambahkan CSS dan Jquery saja ya. baiklah untuk itu sekarang kita mulai saja untuk cara memasang efek animasi loading di blog, karena terlalu banyak ngetik saya pun pasti lelah, Check it out.
1. Masuk ke blogger masing-masing.
2. Lalu, ke Templete > Edit HTML.
3. Cari kode ]]></b:skin>, setelah ketemu masukan kode dibawah ini tepat diatas kode tersebut.
5. Jika sudah ketemu kode tersebut, masukan kembali script Jquery dibawah ini tepat diatasnya.
6. Klik Simpan Templete dan Lihat Hasilnya,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFFXjr4WfqaSbH_2tQIu9OqqI8XzWm_V_yvG8-A9vB6noKvWXAQFsTsB58upEQVA8k75cHLyRH85eQgOpOfKfQ6WKwPLqIwU4cuZxd7u9IggG1H9wlJkX4W92rb9LQjd-zbGJ6Y_671jUf/s1600/loading+7.GIF
Selain itu, efek loading yang dipasang di blog anda tidak akan memperlambat kinerja blog. Nah, sekarang anda tidak perlu khawatir lagi untuk memasang efek animasi loading di blog ini. Untuk membuatnya tidak sulit karena kita hanya perlu menambahkan CSS dan Jquery saja ya. baiklah untuk itu sekarang kita mulai saja untuk cara memasang efek animasi loading di blog, karena terlalu banyak ngetik saya pun pasti lelah, Check it out.
1. Masuk ke blogger masing-masing.
2. Lalu, ke Templete > Edit HTML.
3. Cari kode ]]></b:skin>, setelah ketemu masukan kode dibawah ini tepat diatas kode tersebut.
/* Page Loading Blogger Max */
#page-loader{position:fixed!important;position:absolute;
top:0;right:0;
bottom:0;left:0;
z-index:999999;background:#000
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSKylabVSQJ4TLvN7Ap4qk-O7qAnTOKFudoC1utC6gGQOWw8nf-3vePxs_XvCKbv6rARqXZZkaqJ4FUFU7E9qicjX2iOSZWSvQC9N_L2ACUdcWux0fVXUBnZJAtujb8xb9AMn2VNGIwnxo/s128-no/loading.GIF')
no-repeat 50% 50%;padding:1em 1.2em;display:none}NOTE : Ganti Kode yang Berwarna Merah Tua dengan url animasi dipaling bawah, silahkan.4. Jika sudah terterap kode css diatas, sekarang anda cari kode </body>.
5. Jika sudah ketemu kode tersebut, masukan kembali script Jquery dibawah ini tepat diatasnya.
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(8500).fadeOut(1000);
});
//]]>
</script>6. Klik Simpan Templete dan Lihat Hasilnya,
Kumpulan Animasi Loading .GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIRBqHcdo5vj2lQABPynZJk7AFzd7JmTxYSi_cJRdH815HzfROIZrotDutAbVN8Q6YUWm3_ygA50aPXnu06LT75p6ejUborHSEdvyW-ukfkbqgm2dajCiye-VTdrVgZUawr9wG3TOoHn1B/s1600/loading+2.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKAIWzyXorZO5tg2iA6yVJLgE5VC98BgIe59Rgf66QFm5g6obr-7mditXLo6NZr3h16kxz0p1peDqtMfrJJ5iF6mfV-b2g69xZh_tmmqEGT-2iQH_xCiRE2pi3OzlWGHK7E0kFenlum1A_/s1600/loading+3.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbluclfnEowm_6PxbTFzQvUwKadlIvw7fAAEkPO8CuIEV67dhCn23OG3w0ng3AXpMqfEdpW69LGcFjxoB1ONJVbbvkJ3Re25LP7_UErHIck8_sbUR6YOI1epNqyxHmw4dAZK02xfbst_yQ/s1600/loading+8.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRFDW9IMHOivqwUN4_yQ1doFch_NeaZ43y1xdMOAEc-7JWda7AtzHOl4MY2wuHGp6a-j3Fj3k8kbSh_PpU615LIxPNwb0DtgrPoSiPqFLU049_wJZaVA_Hu5NlJ8dbiFjTOIxMxsitlSrW/s200/loading+6.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTWadh26VbgdMFo9kptQqb1dVrt6RWCSfOJ5kymHOMfQkyA4jgancvqEiaxzvbmQrxBwF9bj8Day4uLRITpWPD9sYtzSbRvWWFUuYBprBU3ceObBNUsK_1DrxSMgIjUdFIUtBF35CsC2H1/s1600/loading+1.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMjjonAR_sfKiIBF-VNUGdGrX1H0oog4MeqkLSl5D1EAFkk7pKFy4t4ZWaxeHxODbSwF9Bke8nPhn3S8eTvmsbIAPethij5PFnou-x-VtWCNnIlkXKKv-4YMwy1qCL3k2XePqXMoA8EWSw/s1600/loading+4.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV9eUoU6GgaF7lNnG_VTxp0gMEATTpm8ZZdqb9nFaiH7Zx2VseADbCCjL1PQ9ubzuaMLdYhcJXCWfoNvXqN-0Sld1bIaxGvzSj0XRHUSyqGB74mQkfPUFFviSmI1s4xmec3y8k65ZHnT0X/s1600/loading+5.GIF
* Gambar diatas saya ambil dari http://preloaders.net
Nah, bagaimana? apakah anda tertarik untuk mencobanya? tunggu apa lagi yuk coba. Terimakasih juga telah berkunjung diblog sederhana saya ini, semoga bisa bermanfaat tentang artikel saya kali ini yang bertema cara membuat loading di blog, semoga bermanfaat. Dan jangan lupa juga selalu tinggalkan jejak sebelum beranjak pergi.
lengkap bener animasinya , ijin diterapin di blog ane gan :D yang loading google adsense
BalasHapusSilahkan gan :) makasih telah berkomentar
HapusNambah berat gak blog dengan ada animasi gituan ?
BalasHapusengga bro :D santai aja .. tidak akan memperlambat kinerja blog kok menurut survey ^)^
HapusMakasih caranya gan :D
BalasHapussama sama gan ^_^ kunjung balik ya nnt
Hapus