Membuat Efek Loading Pada Blog Dengan Css dan JQuery ~ Lubang Pengetahuan

Membuat Efek Loading Pada Blog Dengan Css - Pasti sobat semua sudah tau apa itu efek loading blog itu, degan memasang loading di blog sobat dapat membuat blog menjadi elegan dang menambah daya tarik blog sobat. Sebelum memasang efek pada blog sobat harus memperhatikan ukuran ukuran animasi loading karna jangan sampai karna memasang loading blog akan berdampak akan blog sobat akan lambat. oleh karena itu sebelum memasang loading blog sobat harus mengkompres gambar animasi loading blog agar ukuran nya menjadi kecil dan tidak akan melambatkan blog sobat nanti nya. Bila sobat tertarik memasang nya efek loading blog di blog sobat mari simak dan ikuti tutorial dibawah ini dan ada beberapa efek loading blog yang dapat sobat pilih:

1. Masuk ke blogger
2. Masuk ke menu Template - Edit HTML
3. Cari kode ]]></b:skin> atau </style> dan copy kode di bawah ini tepat di atas nya

/* CSS Loading Page */

#page-loader {position:fixed!important;position:absolute;top:0;right:0;bottom:0;

left:0;z-index:9999;background:#fff url('http://2.bp.blogspot.com/-kIrasdB82T0/U6eA_bnDmlI/AAAAAAAADzw/UUio00Tw4gM/s1600/Loader2.gif') no-repeat 50% 50%;color:#fcfcfc;padding:1em 1.2em;display:none;}

4. Cari kode </body> dan copykan kode di bawah ini tepat di atasnya


<script type='text/javascript'>

//<![CDATA[

$(document.body).append('<div id="page-loader">Loading...</div>');

$(window).on("beforeunload", function() {

    $('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);

});

//]]>

</script>

5. Simpan Template

Beberapa Kumpulan Efek Animasi Loading Blog

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipe-WNqYfyG45E0dUIF4xEjYYSUz5MxeirA_jRqJIQ1Th0v3Gn7QrWK27ftkQUzMWS6LiXJlvaYNqaH4WlFF_WrdL_vXiXpsOX4j0pfGIKf0EsetdlHss-pxBFKpUxmsrmQXr8OK5eL8o/s1600/Loader1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMWert-j7BGnU8nzp16xSnWXLaE3SRgx8JrjzLBljHy7wxPRKvSdMuPeNir2RNt9XclySdx_mjNMu2MD2gKqn4hENmVrusiAa55ThbsMKRk0Yk91InkJiNOz1SdI4kOgwYWaumeChAu7c/s1600/Loader2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT0_Zsu6KWLMUeim7gyHc8NGfr38QIxPEYc6QJuCEL7eYE86-AWz7_K-QaGdteZmTymNhIdpDeylikb-fEUdLxCL-991p5rRHqqZfNv60rjeseyHHd3YI7fRpt76gj-FnIwdpSwx7aeU0/s1600/Loader3.gif