Cara Membuat Efek Loading Sederhana

Hallo sahabat blog? Kemabali lagi bersama saya, sudah lama ini saya jarang post dikarenakan kesibukan di kantor dan lain sebagainya. Baiklah langsung saja pada inti artikel ini yaitu cara membuat efek loading sederhana saat halaman blog sobat sedang dimuat.
efek-loading-sederhana
Oh iya, cara ini saya dapatkan dari blog kesayangan saya yaitu Mbak Arlina. Jika ada beberapa script yang eror mohon maaf yah atau bisa diskusikan dengan saya melalui contact form.

Sebelum memulai, jangan lupa untuk backup dulu template blog, caranya masuk ke tema/theme-download/bacup.

Setelah itu, baru kita mulai tutrialnya yah. Langkah pertama yaitu masuk ke edit html blog sobat, kemudian masukan kode dibawah ini tepat sebelum kode ]]></b:skin> atau </style>.




#cssload {background:url(http://2.bp.blogspot.com/-gwEckHVvyvM/VnbiQdPPZSI/AAAAAAAADcE/wwKnP62ARpc/s1600/loading.gif) no-repeat center;background-color:rgba(0,0,0,0.36);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;}


Selanjutnya, sobat tambahkan kode dibawah ini, tepat dibawah kode <body>.

<div id="cssload">


Kemudian tambahkan kode dibawah ini, tepat sebelum kode </body>.

<script type='text/javascript'>
//<![CDATA[
// Loader
$(window).bind("load",function(){$("#cssload").fadeOut(1e3)});
//]]>
</script>

Nah, setelah itu silahkan sobat save atau simpan templatenya dan lihat hasilnya. 

Berlangganan update artikel terbaru via email:

0 Response to "Cara Membuat Efek Loading Sederhana"

Post a Comment

Iklan Bawah Artikel