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.
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>.
Selanjutnya, sobat tambahkan kode dibawah ini, tepat dibawah kode <body>.
Kemudian tambahkan kode dibawah ini, tepat sebelum kode </body>.
Nah, setelah itu silahkan sobat save atau simpan templatenya dan lihat hasilnya.
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE-Wjc21HDs8V9W_ZoWm6vKybGy5UrrWcWQLU4nSzzGmve87-UyPrM_zDLjZYHjrqtJNadsWByF9ZEFgJQnwbvhaoIULvhhyyg0XKCzjx0jGSXeT5t1DKPVrlTldYUqdNJh2buNjSqLEM/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.
No comments:
Post a Comment