Cara Membuat Efek Animasi Loading Blog » bertemu lagi dengan saya di sini saya ingin berbagi Cara Membuat Efek Animasi Loading Blog. di sini ada beberapa tahap yg perlu anda ikuti agar proses membuat efek animasi di blog berjalan dengan mudah langsung aja.
- Langkah 1 login k blogger
- Langkah 2 tambahkan kode jQuery di bawah ini
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
- Langkah 3 salin kode css di bawah ini dan letakan tepat di atas kode ]]></b:skin>
/* page loader */
#page-loader { position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; z-index:9999; background:#000 url(' data:image/gif;base64,R0lGODlhKwALAPEAAP///0tKSqampktKSiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAKwALAAACMoSOCMuW2diD88UKG95W88uF4DaGWFmhZid93pq+pwxnLUnXh8ou+sSz+T64oCAyTBUAACH5BAkKAAAALAAAAAArAAsAAAI9xI4IyyAPYWOxmoTHrHzzmGHe94xkmJifyqFKQ0pwLLgHa82xrekkDrIBZRQab1jyfY7KTtPimixiUsevAAAh+QQJCgAAACwAAAAAKwALAAACPYSOCMswD2FjqZpqW9xv4g8KE7d54XmMpNSgqLoOpgvC60xjNonnyc7p+VKamKw1zDCMR8rp8pksYlKorgAAIfkECQoAAAAsAAAAACsACwAAAkCEjgjLltnYmJS6Bxt+sfq5ZUyoNJ9HHlEqdCfFrqn7DrE2m7Wdj/2y45FkQ13t5itKdshFExC8YCLOEBX6AhQAADsAAAAAAAAAAAA=' ) no-repeat 50% 50%; color:white; padding:1em 1.2em; display:none; text-shadow:none }
- Langkah 4 tambahkan javascript dibawah ini tepat di atas kode </body>
<script type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="page-loader"> </div>'); // Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain... $(window).on("beforeunload", function() { $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);}); //]]> </script>
- Langkah 5 Save TEMPLATE anda dan lihat hasil nya.
Catatan:
bagai mana Cara Membuat Efek Animasi Loading Blog cukup mudah bukan? ya sekian dari saya semoga trik diatas bisa bermanfaat buat kalian semua.