Memasang Animasi Loading Sederhana Pada Blog
MQR. Animasi loading berfungsi dikala ada pengunjung yang membuka blog Anda, cara kerja animasi tersebut akan tampil memberi pesan kepada pengunjung sebagai pesan pembuka, animasi dapat dalam bentuk gambar yang bermacam-macam bergantung kreatifitas kita dalam menerapkan nya. Animasi tersebut akan menciptakan blog atau website terlihat professional dan keren. Secara otomatis akan terhenti dikala halaman tersebut sepenuhnya dimuat.
Efek yang ditimbulkan dari animasi tersebut tidak akan mensugesti kinerja tampilan blog menjadi berat. Karena tampilan tersebut sangat sederhana, anda dapat mengatur berapa usang waktu loading akan berakhir.
Nah, bila anda tertarik untuk mencobanya simak ulasannya dibawah ini :
1. Buka Blogger. Pilih Tema > Edit HTML, tambahkan CSS dibawah ini sempurna diatas kode ]]></b:skin> atau </style>
#cssload {background:url(http://2.bp.blogspot.com/-Zj6uknli1zI/Ve54dd4b73I/AAAAAAAAF9w/f39g7Ufd5Xc/s1600/gambar%2Banimasi%2Bbergerak%2Bselamat%2Bdatang%2B%25286%2529.gif) no-repeat center;background-color:rgba(0,0,0,0.36);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;}
Keterangan :
Warna hijau ganti dengan Link Animasi Gambar yang anda inginkan.
Warna Merah :
1000 merupakan usang waktu Loading, sesuaikan saja contohnya 300 untuk mempecepat loading
2. Lalu tambahkan instruksi berikut ini sempurna dibawah kode <body>
<div id='cssload'/>
3. Selanjutnya, tambahkan Javascript dibawah ini sempurna diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
// Loader
$(window).bind("load",function(){$("#cssload").fadeOut(1e3)});
//]]>
</script>
4. Terakhir, klik Simpan Tema dan lihat hasilnya.
Jika animasi loading tidak muncul perhatikan kembali penempatan instruksi tersebut.
Dibawah ini kami berikan beberapa pola animasi yang dapat anda gunakan :
https://lh4.googleusercontent.com/-1nnz_q-zdlE/U7nQPsC7zvI/AAAAAAAAEDU/a3A-LG1mM0I/s128-no/Loading1.GIF
https://lh4.googleusercontent.com/-Y2S2txttvPw/U7nQPi0h5MI/AAAAAAAAEDU/rsMYnz5-yn0/s128-no/Loading2.GIF
https://lh5.googleusercontent.com/-kXvhQBHoB0s/U7nQRhwcIxI/AAAAAAAAEDU/WDhTfSJOii8/s128-no/Loading4.GIF
https://lh5.googleusercontent.com/-JN0Uo9ud0SY/U7nQSv_-HfI/AAAAAAAAEDU/NfHcUkP27QY/w124-h128-no/Loading5.GIF
https://lh3.googleusercontent.com/-bixcnTkh4q4/U7nQUNmm3_I/AAAAAAAAEDU/YE9s5MKfa60/s128-no/Loading7.GIF
https://lh5.googleusercontent.com/-sbG2UKoWYpc/U7nQUtY6YOI/AAAAAAAAEDU/Oc22arnyymc/w128-h54-no/Loading8.GIF