Cara Membuat Efek Page Loading Di Blog

Cara Membuat Efek Page Loading Di Blog - Tutorial blogger pemula akan bertambah koleksi lagi di blog kecil saya ini. Saya akan beri tutorial yang satu ini khusus untuk sobat yang berbaik hati mengunjungi blog saya ini. Dikarenakan tutorial blogger yang satu ini jarang sekali dipakai oleh para blogger atau pembuat blog untuk mengikuti tutorial ini. Tutorial tersebut adalah Cara Membuat Efek Animasi Page Loading Di Blog. Saya sendiri memakai tutorial yang satu ini. :D

Sudah seperti yang saya katakan diatas bahwa tutorial yang satu ini jarang dipakai oleh para blogger entah kenapa tidak memakai tutorial yang satu ini. Padahal tutorial yang satu ini menurut saya terlihat keren. Efek animasi page loading di blog ini akan muncul ketika pengunjung sobat klik link yang merupakan link dari blog sobat sendiri dan akan pergi ke link atau tautan yang dituju.

Sebelum saya beri tutorial nya, saya akan jelaskan bagaiman tutorial cara membuat efek animasi page loading blog. Efek animasi page loading ini akan muncul menutupi halaman blog ketika pengunjung klik sebuah link di dalam blog sobat. Tapi, jika koneksi pengunjung sobat benar-benar lelet alias lambat, gambar animasi ini tidak akan muncul. :v *justkidd Cara menambahkan efek animasi page loading ini menggunakan kode jQuery. Tapi ini tidak akan memperlambat blog sobat.

Langsung saja, saya akan jelaskan tutorial ini.

1. Login Blogger
2. Template
3. Edit HTML
4. Cari kode

 ]]></b:skin> 

(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)
5. Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat DIATAS kode ]]></b:skin>

/* Efek Page Loading */
#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/AVvXsEiEH4wZZ3LojF-dGaVx6IYIybSIIuJcjNk4nLZMfus8J0pCsD2RiU7Py0mSdCzyaRlkDcj2C2tCAGh8hyphenhyphenXECXxmI-quXFJwNWCOVU-mwiojjqxhuJ2IXu_t8g70a9QAW4piFeN1J0B73eA/s128-no/Loading4.GIF) no-repeat 50% 50%;padding:1em 1.2em;display:none}

6. Cari lagi kode

</body>

7. Copy kode jQuery ini lalu paste dan letakkan kode nya tepat DIATAS kode </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>

8. Simpan
*Keterangan: Ganti URL gambar nya sesuai dengan keinginan gambar animasi sobat.

Disini saya hanya memberi beberapa animasi loading saja. Jika sobat ingin mencari sendiri ya silahkan. Atau bisa cari di www.preloader.net Untuk mengambil URL gambar dibawah ini dengan cara klik kanan gambar yang dipilih sobat, lalu 'Copy image URL'

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoe5d9tXDXw07YS21Ek8YEVg4f5Op0rvRpD94_VfWV6ogr1YfcXs6kgiI4yTX0WuJJiTqmeZJsCPtEoN856NIllp2ziz2073Mxf2aJrd9Ex0ysw9571fcGGf47wWvohuIvTpSZLGWQmiID/s1600/loading10.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEithm5uVjMa4k49_dJy5fPhXEP3mNLs4aMtuvtzp4sqzBJnPP6QuFdGLpFX1A5yVKmdp6_PgRYbGaaPCnbwV1vkJLnNSUfsab4kty6LyEIdFJRVoC56Y74CCvVxx9_3EV4DgKAsBXdD2Mti/s1600/loading7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjouBE_1tcFVC4gcdtFS3y0ahxHH4K_mEpv6rHh_fQsmIVE-TQaGITQIVNJox-vSmCHzFwYzYXNf2ZVdyu3851WaO4llFWjXjhxZXy4sttS5BnthnP2aO4vGVWZi1VmMLlyn3-ySGZwy79H/s1600/loading6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0cPP6nPwFOjfL9yy2UVZmyihzEftSNQxfsZNEQj2VQ_gtlgNqc6a64oK3_cvfbozZaBADTfMNKppmkjB27D_PMZWHcIaO8kymbSiKBFV0kRxzbbFoAWDFG5jtFeEp_SVWDMuxU7bxgYHE/s1600/loading5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikBBYa2BPNHIF3XDC4VT2V_vqc9Add9XilyUp0fUFTqjuw1R6sOOgOH5mRTaBRaKFK8_VtFVn9-enJJXUqgzIb3sXxsAov0vz6UVbtXoFhqjZ8GAmU8pFHg7JSvSUJh6qAYihkgx4ghdGo/s1600/loading4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Cl5QlZ-ifac_AtdJIXfS8q9DECb43D9qYjXxDVivktXw5DFRHL1dQzDqHeEbvriwAtmwXxVn6YsYAmTwMc8KQY9A9e0YIfTfcJa-gc8Y-69mf0dr8OTqqR18IkEcpiK9cwzuFToaYs3U/s1600/loading2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_35Szm52T9Yp4aXzhg6sskrWDLiWlAjz6UqlWEzKHAnhVwBawdrQ7VY4Bo8YqhGH0gkY2psRN98k7nUoSlDop3mMd100qKaMPAwsJZNOoQMYzur8K4RtpYoDCB7WXxenxcoKDne1GukL/s1600/loading1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNF2n_DEXpcfgoCQesZmgnYojLeboII6QA3QgFa0hQYKuuCaxR5io36FF1NBxzQ7kCKlPpHT8lyVuBGiqTyub8u6UApGjJd84g1py5zBqKs-ar8yw8Ldcn7-YiC3njV6BDbK5FL9TS9o/s128-no/Loading1.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz2CcK4BDhaolvX_ByxbU_57umSY9sdHp41s0Pg8CXDf2MWBQkteddjFzRldTN5z0D1e42Glt7L1Z94g8JYN6yrTLlmLZpiobiNZtoqj11vnr68G1gd5a3yDfSx7XKtJgqaliEOIuWP78/s128-no/Loading2.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZW7DzIpWNEjqSd5kn6BhGtk8zmAr4nuwnL7NiMO5l2hBFBXaJo_6A_r9qrmX2FWQVYofia3XvAdh-syhlJtFiFZ6wZdH04L01oTDK25C69_b9TPHsRBlsWFtWOzTZyD4X_4pg01KqIsk/s128-no/Loading3.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEH4wZZ3LojF-dGaVx6IYIybSIIuJcjNk4nLZMfus8J0pCsD2RiU7Py0mSdCzyaRlkDcj2C2tCAGh8hyphenhyphenXECXxmI-quXFJwNWCOVU-mwiojjqxhuJ2IXu_t8g70a9QAW4piFeN1J0B73eA/s128-no/Loading4.GIF

http://2.bp.blogspot.com/-JN0Uo9ud0SY/U7nQSv_-HfI/AAAAAAAAEDU/NfHcUkP27QY/w124-h128-no/Loading5.GIF

http://1.bp.blogspot.com/-sGFHLSRy2OI/U7nQTn34h8I/AAAAAAAAEDU/0PUXPSEACPc/s128-no/Loading6.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEnP8bFeeq3AlyvHslyZJu36ZuWQ2Nt-gq67Tk0kdr_UPiIkf2cGOOw1OS9yE7vLlMhm3lhmJYus8AiA05zTvb4lUwYRhqKQT814LDZxpDqixVp8AKiXgauM4qbCIJP5pfoUyYvMomLbo/s128-no/Loading7.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEeDU9zTa4bvhTbh0TNw7-7oN54VY9wop6PHHD2BpxO4f6rTayztqQTKRfKVRgyMd1bo-2tumGrgmdQ1CQSzx4sDEbwwPvuw9_KE6tDDuuh0bAFA9py6jsFkfBDqtEhXVaLmOSKb0aYZE/w128-h54-no/Loading8.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqoaQ0a910XQp1ImGnkd6wIcwRPLj6mtFxDMn9u5pRT8Oyt8iqmAQv7arb9Rm_yQXujTFT6HK4t_PmVfiSvEvAbVqmfZpxppTAm58Xl6XPoBuNzNHFfDV5YHSHfUoXk-Bd5pja47dglc/s128-no/Loading9.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjIEVJ4Jp2yRl72qVHXkJVST-9x0jAvrHmyui461urSWncheYxCH_k23EeJpuqtsSuTb2fBizgjXwsnJeJxjtV_9cWU8rbfQFvQPhPfsFFPWSis-a-BSht7knYEzXSQsEhTgJLBKieAig/w128-h40-no/Loading10.GIF

Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ

Tutorial Blogger

Judul	Cara Membuat Efek Page Loading Di Blog
Deskripsi	Cara membuat efek animasi page loading di blog membuat blog Anda terlihat lebih keren ketika pengunjung Anda klik link/tautan yang ada di dalam blog.
Author	Google
Author Rating	92%/ 100% Suara Dari 1947 votes