Membuat Efek Loading Pada Blog Dengan Css dan JQuery

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


http://3.bp.blogspot.com/-XHfhxe02UxM/VIFild4OkbI/AAAAAAAAARI/usxqTB18rA8/s1600/Loader1.gif

http://1.bp.blogspot.com/-OSk_ttKk7dA/VIFin-MYzBI/AAAAAAAAARU/3n54_PqTpr0/s1600/Loader2.gif


http://4.bp.blogspot.com/-DIc_0PiHLTA/VIFisXCTF6I/AAAAAAAAARc/_LfJNuaNp80/s1600/Loader3.gif
 
Previous
Next Post »

7 komentar

Click here for komentar
December 5, 2014 at 2:35 AM

cakep gan langsung ane terapin ke blog ane gan, keren,,

Reply
avatar
Audi Putra
admin
December 5, 2014 at 5:56 AM

nice [SirFalyatihBlog]

Reply
avatar
December 5, 2014 at 7:54 PM

Keren gan :D Langsung ane terapin ke blog ane :D

Reply
avatar
Soni Sitez
admin
December 6, 2014 at 6:24 AM

Saya dulu juga pernah make wen, lebih simpel dr ini :D

Reply
avatar
December 6, 2014 at 2:21 PM

Wah bisa di coba nih gan tutorialnya.. Salam Kenal

Reply
avatar
Thanks for your comment