Cara Membuat Gambar Efek Animasi Page Loading
Cara Membuat Gambar Efek Animasi Page Loading - Page loading merupakan sebuah fitur yang menampilkan efek loading saat perpindahan halaman/page. Saat perpindahan halaman blog terntentu kita bisa menampilkan gambar animasi sesuai dengan keinginan kita.
Untuk Membuat gambar efek animasi kita bisa menggunakan CSS dan Jquery supaya bisa menjadi sebuah efek gambar animasi di blog. Efek animasi loading blog tidak akan memberatkan loading blog itu sendiri, Jadi teman-teman tidak perlu khawatir jika menggunakan gambar efek animasi di blog.
Tujuan utama memasang gambar efek animasi di blog adalah untuk mempercantik penampilan sebuah blog, Ketika ada pengunjung blog yang mau pindah halaman maka gambar efek animasi ini akan terlihat begitu keren.
Untuk mempercantik blog sebenarnya banyak cara yang bisa kita lakukan seperti membuat taburan daun di blog, membuat tulisan mengikuti mouse, Membuat teks berjalan di menu bar dan masih banyak yang lainnya.
Pada kesempatan ini saya akan mencoba memberikan tutorial cara membuat gambar efek animasi di blog, berikut tutorialnya,,,disimak ya,,,
1. Masuk ke account blog anda
2. Klik Temlpate kemudian Edit Html
3. Cari kode berikut ]]</b:skin> gunakan Ctrl + F untuk mempercapat mencarinya
4. Copy kode Css di bawah ini lalu pasang tepat di atas kode ini ]]</b:skin>
5. Kemudian cari kode </ body>
6. Pasang kode di bawah ini tepat diatas </body>
7. Klik pratinjau untuk memastikan kode Css berjalan dengan benar
8. Klik save tempalte
Berikut ini adalah beberapa gambar efek animasi yang bisa anda gunakan
Untuk koleksi gambar efek animasi lainnya anda bisa mengunjugi situs yang menyediakan gambar animasi, silahkan search di google.
Demikian apa yang bisa saya bagikan tentang Cara Membuat Gambar Efek Animasi Page Loading semoga bisa bermenfaat dan bisa menambah blog anda menjadi lebih keren.
Untuk Membuat gambar efek animasi kita bisa menggunakan CSS dan Jquery supaya bisa menjadi sebuah efek gambar animasi di blog. Efek animasi loading blog tidak akan memberatkan loading blog itu sendiri, Jadi teman-teman tidak perlu khawatir jika menggunakan gambar efek animasi di blog.
Tujuan utama memasang gambar efek animasi di blog adalah untuk mempercantik penampilan sebuah blog, Ketika ada pengunjung blog yang mau pindah halaman maka gambar efek animasi ini akan terlihat begitu keren.
Untuk mempercantik blog sebenarnya banyak cara yang bisa kita lakukan seperti membuat taburan daun di blog, membuat tulisan mengikuti mouse, Membuat teks berjalan di menu bar dan masih banyak yang lainnya.
Baca Juga Cara Setting Domain Blogspot Ke Domain Tld
Pada kesempatan ini saya akan mencoba memberikan tutorial cara membuat gambar efek animasi di blog, berikut tutorialnya,,,disimak ya,,,
1. Masuk ke account blog anda
2. Klik Temlpate kemudian Edit Html
3. Cari kode berikut ]]</b:skin> gunakan Ctrl + F untuk mempercapat mencarinya
4. Copy kode Css di bawah ini lalu pasang tepat di atas kode ini ]]</b:skin>
/* Loading Page */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghAaIfR9Eqj5rcRzcZhnlYegeRt9wJrhixCfMe9N4ylTdEdHCG1kwLWRBq1e_HHuM9P_miRcoy6O6gnlq1zzA0Pg9enNCWqyJPOPwaxxvcv3TCbvWtmqiU7uaHWu5TcBNhzBRwrl6V496N/s128-no/loading.GIF') no-repe
at 50% 50%;padding:1em 1.2em;display:none}
5. Kemudian cari kode </ body>
6. Pasang kode di bawah ini tepat diatas </body>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>
7. Klik pratinjau untuk memastikan kode Css berjalan dengan benar
8. Klik save tempalte
Berikut ini adalah beberapa gambar efek animasi yang bisa anda gunakan
https://lh4.googleusercontent.com/-1nnz_q-zdlE/U7nQPsC7zvI/AAAAAAAAEDU/a3A-LG1mM0I/s128-no/Loading1.GIF
https://lh4.googleusercontent.com/-qqEpMJ9PeoI/U7nQO-rfprI/AAAAAAAAEDU/YvXcmUbolGc/w128-h40-no/Loading10.GIF
https://lh5.googleusercontent.com/-H8yWVVQ78Wk/U7nQVZTbQqI/AAAAAAAAEDU/a-aWtzRZlls/s128-no/Loading9.GIF
Untuk koleksi gambar efek animasi lainnya anda bisa mengunjugi situs yang menyediakan gambar animasi, silahkan search di google.
Demikian apa yang bisa saya bagikan tentang Cara Membuat Gambar Efek Animasi Page Loading semoga bisa bermenfaat dan bisa menambah blog anda menjadi lebih keren.
Komentar (0)
Post a Comment