Cara membuat efek animasi loading di blog

Posted by Unknown Senin, 14 Oktober 2013 0 komentar
Berikut saya akan memberikan cara mudah membuat animasi loading di blog,mungkin sudah banyak dan sudah umum banyak artikel yang membahas tentang cara membuat efek animasi loading keren di blog,tapi tidak ada salahnya saya ikut sedikit berbagi tutorial,mungkin ada yg bertanya bagaimana cara membuat efek loading yang seperti di blog ini?nah berikut cara mudah dan ga ribet. . hee
cara membuat animasi loading di blog

Langsung saja ke caranya sob,ikuti langkah-langkah dibawah ini:

1.tambahkan jQuery di bawah ini pada blog anda,letakkan sebelum </head> pada tempelate anda. . ! !
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
KETERANGAN:
Jika dalam tempelate anda sudah terdapat jQuery,langkah 1 abaikan saja.

2.Copy dan paste CSS di bawah ini tepat diatas ]]></b:skin> pada tempelate anda.
/* 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 }

Nah langkah ke 3 tambahkan jowoscript atau istilah bulenya javascript dibawah ini diatas kode </body> pada tempelate anda. . ! !
</script>

<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>

Sudah belum?kalau sudah ya langsung disave saja bro,refresh blog anda dan lihat hasilnya efek animasi loading pun sudah terpasang di blog keren anda. . :)
Sekian artikel dari saya,Semoga bermanfaat. .
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Cara membuat efek animasi loading di blog
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://downloadmp3cutter.blogspot.com/2013/10/cara-membuat-efek-animasi-loading-di.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Trik SEO Terbaru support Online Shop Baju Wanita - Original design by Bamz | Copyright of download mp3 cutter.