Pages

Senin, 14 Oktober 2013

Andoelsean: Cara membuat efek animasi loading di blog

3
Andoelsean
Keep calm and stay focus 
Manage your social media

Best social media tool for image publishing to Facebook and Twitter. Look amazing and delight your followers. Get 40% off when you sign up today.
From our sponsors
thumbnail Cara membuat efek animasi loading di blog
Oct 14th 2013, 16:52, by Andoel Sean

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

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions

0 komentar:

Posting Komentar