Cara Membuat Loading di Blog Dengan Animasi Keren

Murli Mirza    5/26/2016    Tutorial    Comment   

Hallo sobat blogger, bertemu lagi dengan saya Murli Mirza seperti biasanya saya ingin membagikan tips mengganti loading page di blog menjadi animasi unik keren :o langsung simak baik-baik ya hehe

Pada dasarnya dengan page loading ini diharapkan tidak memberatkan, yang terlihat kesan dari page loading ini seperti memberatkan waktu perpindahan page. Dengan menggunakan efek animasi page loading ini tidak akan memberatkan Loading Blog sobat, sehingga sobat tidak perlu khawatir dengan penggunaan efek animasi page loading pada Blog sobat.

Efek Animasi Page Loading juga dapat menambah nilai plus pada Blog sobat loh, karena dapat mempercantik dan menarik untuk dilihat.

Ikuti Langkah-langkahnya / Cara Memasangnya.

1. Buka Akun Blogger Sobat.

2. Pilih Menu Templete lalu Klik Edit HTML

3. Letakkan Kode Efek Tersebut di Atas Kode </body> apabila sudah menemukan kode </body> sobat tambahkan jQuery pada blog sobat. Simpan kode di bawah ini 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(8000).fadeOut(1000);

});

//]]>

</script>

Penjelasan Script diatas 
Pada body Background disisipkan kode '<div id="page-loader"></div>' 

ketika akan berpindah ke halaman lain page loader ditampilkan dengan efek fadein dengan waktu 1000detik, dilakukan penundaan 8000detik, dan kemudian diakhiri dengan efek fadeout 1000detik.

4. Setelah kode diatas sudah sobat terapkan, kemudian sobat cari kode ]]></b:skin> sobat letakkan kode di bawah ini diatas kode ]]></b:skin>

page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #000 url("URL IMAGE") no-repeat 50% 50%;
padding:1em 1.2em;
display:none

}

Keterangan :
Background  dapat diganti menyesuaikan kondisi blog sobat.

URL Image adalah tempat menyimpan URL image, apabila anda memiliki kategori gambar sendiri, kemudian menguploudnya lalu anda terapkan. Setelah semuanya selesai di terapkan lalu simpan template dan lihat hasilnya.

Dibawah ini ada contoh loading page, silahkan di pilih sesuai keinginan sobat :) dan copy URL di bawah gambar kemudian paste di "URL IMAGE" Sesuai dengan yg sudah saya jelaskan di atas tadi.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijaoRa0VHAOA-YQiCKqukYYPdd_W5nxEv21P0-3BKQeAU2otpt-cdiwZdsTAgSyY6ub2IIrRPfIBdt538lNLMSBtLbW1NgqMutzFv4yHSvLmzI2ROtU-kaVxPGEOThir54Rk7DkDSoksM/s1600/Loading3.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFd10ilxrUyMkNF15IBCvVjbhLFtyu9krldSjQz3ySb3Xtk2kjbqi0aF15hDfMpcvyc4Nlb2bh4z2XUZN-Q3dMQMSmiT0YsZMiCVWMDljGEXTBBblsr2rJwRyq4Ri5MPWZYo1qjugCeLA/s1600/loading1+(1).GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9s49wPLXn9qcV-PJ3EtxdPiAuYJhYnxloRTG4KA1RAWEyDE04gv8m3DqcgIBufHDqAl8K-bG8sIb6Tsz3pwUBJaPntPtZmyvmUSmVcEIU3OZdRElL3N3DuuYe9C9LUnzKwlB8Z-6YrCk/s1600/Loading1.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFRgQSsQe7O3O-UKwu7IUOoXKtcVrgMWXKb7SgAsliH6XiWWZcUOiM-FfivX92RJaM8oPzdywdsY-9I4eKgzvNGytf0zjUMT30tJKb_KmAkDaQ7jO0JtuoAgVoeXOg3eCKlKqCi77GLzw/s1600/loading2+(1).GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7-FN4aBLlFL8WclGq3pEmIyvM5oUKBG_zTLV-0lUqZOFZkEMWGu-7DG_aE_bljudgBUE1rKUrUsj01S3-490ZwvZE3TPBiiCScXx2hbRRJ-NvSHsMXnli7hDBK573Z7A6eLUuSG7G7P8/s1600/Loading2.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxyk0V_AfGvxbgdNk9Er5K-niWChWnnTgd9vP5H-VMGpYUcDVEtkCJgHWVlehusYy2S-z70iShr8WE7oOKE2UkCUc17_gKGndLPSdHQMaei1pRw0HBrcf7rerxAUfXYGW8o5_ifMevMGg/s1600/loading3+(1).GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdoA4W2mDx_v98KTWJgB26BHwT7zN5bLVC5xlB7X9BBkigUpgtukLhJ8IXiXIjkCpgvACrifDHtnvkb6XeKrGBDX0hy-O_wasEF8Grh4r-MmskTIk3mGAqnSdiWahHCqTjpZB2ewKO2A/s1600/loading7+(1).GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJK-LWXu2NUwOHp8UyBh8nTFNWNpWV49XKArnnGYXXsPd5f8NPZS3gs8WSo69CWzN7dEngOHH1KBNOd7RirA5EpqMwHpU6pc6wNOlsy0bx8XJOIaRt1NNSn1uKODSFTty2c_MMOo0kWQ/s1600/Loading6.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhukR7YX7pT9Dkyrmx73gaIMkG8noI7uOhTAWNhOU-mhmYrd8DLfr2CjIvlObl8kLh0qTl34IrT8trlj_HVjLi8FAaOEffoAANiheJpmYQCQB7xgAQfS9PsqnMR95A2v5jYz2luxMQwsYc/s1600/Loading5.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR3DwlrNh3urkf_tnBHUUhpG_tznSXoIWthhNVXjs89CHFcRyWeZGvF_mpC3NDQVu-a7MkmqBMcVaijcEwuzEcm_OTtJ48iKVmNfpscF-uuNwMZKy_oh6_Ug1mPSjcAJDFY2nRRkbHt88/s1600/Loading4.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtNlUmde2i4izgNPJDaE6BsueQuWLDiluEtp-gNkMQoNoddnQIP9HnQRSoWqMNu06zhyphenhyphenDb59cPxRJVy8jCNf-bC3NrjdGNx1pGM6OBFeoTpHujf2triUPwjyQpjB_1BAW4UNr7ZRinAX0/s1600/Loading8.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMQKuAt22_CKL5EEMvSw1Y99VoEICOKyYilFILlUgFHLGYSMTQdsoD5q8Gs-Gf1vuh3yZunNhgXfp2aPJlt2AdCkwUJ2BviNRMaNJUrZgjSt630Bxj5bxaKcmmtNKUAaOvEg0Pgqqg5PI/s1600/loading9+(1).GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWAZpPigrOG-Q7TPSse18kgp21ywpDWLSHAFAAGwiR1pUi4Kp72nrxQp3QDRxwxAueRR78fZJL_W4NEWYnsABY2RmjP9CAFbkUkEZ7vm2WN19xT5kCxq_iL2X5prIw2IhX2DBEhfy6K6Y/s1600/loading10.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_p9HQmjkXrOhavaUANaV6duEfY7sguMkh61TNp-6D9GkqTmFD0QH8JgrigQM3Pe7pQem-kvnSFJ34gUnnVcekI6htD8irBsn3RL-cb4hxxSrJ6umfIwWzBCe2Yt400LkH7t0LVeBibuE/s1600/Loading9.GIF

5. Save dan liat Hasilnya

Sekian Tutorial Mengganti Loading di Blog, Semoga Bermanfaat bagi sobat semua :D ikuti terus Tutorial dari blog saya :)