-->

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.

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>

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDPAEt3PCEHex-nCmn8v8B9d7b53aAFFksgKP_HPVaRC1XncPjxF_gu680KSDBWNzUVnjw66joR7GNmdNmUFZwlhaglsYDVQbHYDRxMmGjjdR8Uy69jd9QQNg0v3TWubjZGpBnvI7rcpc/s128-no/Loading1.GIF


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRIWCFOp5ek_463tGa3-HX-tiryL9nrv7cmt0JA7mWqSrW0xOdKd0EaIFGdhuF_Ru5_ObJkODzMWs2CE8qpdp6xtafR-obl_fmeFe3EIbXDKCxPOOq2Z4EK2PxdOVZ-DNaw5dyFQQ2UBE/w128-h40-no/Loading10.GIF


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ybEeJ14GKJ5J2XNdR9HN-zXf5-Hs7Ic4yBOUsLf75nmrlAD39pN5xF5XsiWqr-cqlbrQbPEn3-QSEy4-oKZYde3OqObZW38gcO45u33Y6cxrynCOJScHYTSqeep-1TnPcjP_m7EO_1k/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