Cara Membuat Efek Animasi Page Loading di Blog terbaru 2014

GAMBAR TAMPILAN ANIMASI LOADING BLOG

Panduan lengkap tentang blogger- Selamat siang sahabat blogger berbagi ilmu Pada kesempatan postingan saya kali ini akan berbagi tentang membuat efek animasi loading blog. banyak blogger di luar sana yang memberikan cara efek animasi blog loading ini tetapi munkin peletakan kode mereka banyak yang keliru. atau munkin saja cara tersebut sudah tidak berfungsi lagi. Inilah cara terbaru membuat efek animasi untuk menunggu halaman blog anda.

Baca juga : Cara buat menu bar keren dan ringan di blogger 2014

Cara yang saya gunakan tidak terlalu sulit untuk di ikuti apalagi beserta panduan gambar nya saya yakin anda mudah untuk mengikuti cara saya.

Langkah - langkah Membuat Efek Animasi Page Loading di pada Blog anda :

• LOG IN ke blog anda di www.blogger.com

• Setelah anda log in maka anda akan di bawa ke dasboard blog, nah di dasboard blog inilah anda harus klik tanda segitiga kebalik (opsi pilihan) lalu pilih TEMPLATE. Untuk lebih detail nya lihat gambar di bawah ini :

Gambar dasboard blog

• Jika anda sudah mengklik template anda maka anda akan di bawa ke halaman HTML dan pilih EDIT HTML Untuk lebih detail nya lihat gambar di bawah ini :

Gambar edit html blog

• Jika anda sudah masuk di dalam kolom halaman html blog lalu cari kode  ]]></b:skin> untuk mempercepat pencarian klik 1x di dalam kotak HTML lalu anda tekan CTRL + F  Nanti akan ada kolom kecil di di pojok kanan atas lalu masukan kode  ]]></b:skin> di kolom tersebut dan tekanENTER pasti langsung dapat kode tersebut. Lalu  Letakan kode CSS di bawah tepat di atas kode ]]></b:skin> :

MASUKAN KODE DI BAWAH INI TEPAT DI ATAS KODE :  ]]></b:skin>

#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU6EFqJj3VDUOF3nF6l-KZyha1Aqm_5Ovhr7GwQu2DYdvBt1FBwx8B7g7xJ2TwCgXCwJlXj8qaap8STcOh832fgknwVXBr5HQe6v4J_dIQCAoPeThZxRv2zLQJ4R7jgU5YANRUwfEUPk5T/s1600/loading10.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}

CATATAN PENTING...

Anda bisa saja merubah animasi loading dengan menganti kode gambar yang saya tandai di atas.

• Selanjutnya, silahkan cari kode </body>, biasanya posisinya sebelum kode </html> ya. Cari dengan menekan CTRL+F dan jika sudah ketemu, copas saja script di bawah ini sebelum kode </body> atau tepat di atas kode </body>

MASUKAN KODE DI BAWAH INI TEPAT DI ATAS KODE :  </body>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Langkah terahir SIMPAN template anda. anda bisa liat DEMO nya di salah satu blog saya lain nya yaitu : KUMPULAN CHORD LAGU TERLENGKAP.

Ini ada beberapa alamat URL gambar animasi loading yang munkin anda sukai :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbMGCVoEdKbp8SBcfWQT3brx8Uo3Db4ghu5ZttJllzMFZJZAhGmM5I39Da_gTCqGyTyTft3JCXgzyXctrauHHiXZ0oQA5h2wEOkn-3uxreSCFfXzjpRlmfzJjEARJA92AG9psEno1wT0HZ/
 /loading1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkdlmrkBrWzuG8gxJNHC0mrAKfoKQS2ce_C2yLyy_vCLBjBqU-kMMWFK7wUv_th415YYQ4GCSuGQEz_1N8dHFOV8DtGhVEjMx36RPQ3Hav9b-PQPsv_ZMs9XMMJq-rwHarHSs3g_f3NXub/s1600/loading3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwPDd-oh-8MXcRaHQOm00ix870YxsUV5Q0RVoZ-AYt_T5mUdQtGrVg1PDV298OTsA7LXFHtyOM2jIN-LDTiKPuOByX9X6cHjkmiYXs39HKNZTen3rqNKbmhWP0Bky_GKJw7OFUDssMDbpn/s1600/loading2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBdOWJO9FKQcaASrWIlKU7MRCUWZsAjMZbxLoi4lNt6Ls9o7yAuuR-4owg2F-ooX4oXu29LF4icc9MNoSYL7kvMtO2vu-LMiGyKIt28a4Gkyl8mPPGhqZXKX1pj5M51HZqhLfRjIAhnHwV/s1600/loading4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfp0H7rx_J7TvXihc6HmkUMNRwVltG6HzyyqnVkpMYNe0I_Q9N1UR-90t8quz7IbuSyvOD3l14PKDnjke80JMwW5DLPvY3_zUiD-huBed-QDUVG2FhRwqTFp210-RI0IPBr0jAw_xQehVX/s1600/loading5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCqXrbIYnZVM3u-rt3PCUwibJYAGCYBhZb5-cAG4VDjspsgjrJgo2wM7vyageW9RkW0s8YkvM8tcVmxw3D_itschL2OoZcpHRtWOmgsSCf5Vj5qaJU4zkGlkefeNkj9P9ShAwOO0kii1cs/s1600/loading6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGRraXQaGjY9-LUNWl4QV6eZShJfKxKH0NkHO0RMI3i-FNSFa1FONi412Mm26KQ2eqZRDK7n7CROUlwEuiAUo-nH_pJtLKomgp_rQyinzxTJdrIHYWXpHJg7VduPWrz2dnjNae4p5Bot-m/s1600/loading7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3qUfF2D_CUBJ8DrWL7lRHFr46dkzZURWYAULJtzilZ7V3M_L5avbvJntLnFGLu62WuQ9WrVXvx8hU6Sg8DbCGBtr5gwzLgqdsE9YP4hZgzK3AIcVD0ZYEfgmdaB01r0OXgvQ5pC-b-9Pv/s1600/loading8.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggYhvKlSLf6j0Iif1YVt3YeNh-j1YBlJB5waB9NkLiopYeTuXgW_obFsWTewnhLgEfewG7KpuC-scPoJ1FYwc3juA9bUmJREpHFXzYcYr7dXnTqVLT7ckHNji7ftfjjdqHvKRzxMiLw9Fz/s1600/loading9.gif

Jika masih ada yang kurang mengerti tingalkan saja komentar sobat. trimakasih mudah-mudahan membantu.

Ditulis Oleh : Unknown

Sobat sedang membaca artikel tentang : Cara Membuat Efek Animasi Page Loading di Blog terbaru 2014. Jangan lupa yah kritik saran nya karna itu sangat berguna. Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya karena blog ini di lindungi OLEH : DCMA kita sesama blogger harus saling mendukung bukan saling menyingkirkan salam blogger.<a href="http://berbagi-ilmu-terlengkap.blogspot.com/2014/03/cara-membuat-efek-animasi-page-loading.html" target="_blank">Cara Membuat Efek Animasi Page Loading di Blog terbaru 2014</a>

:: Get this widget::

Jangan lupa baca juga :