Bagi sobat yang ingin mencoba menambahkan Efek Animasi Loading Sederhana di blog, silakan ikuti langkah berikut ini
Memasang Efek Animasi Loading Sederhana di Blog
1. Login ke Blogger > Buka Template editor > Tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>
CSS :
#cssload {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilVT90GCuObmwb4On6Gr9wb8l0k4AHQ5GtGj1Ais8NyvWygH6J4B_kP4ps1EaoU84L3KT-RAOm-uhGmgTgJq870w8K30biwUQZKl6K1rjWOKk3XTJHdKb9ZxGOQeL1t8fSLGteMa9x8Oc/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;}
2. Selanjutnya tambahkan kode di bawah ini di bawah <body>
HTML :
<div id='cssload'/>
3. Tambahkan kode di bawah ini sebelum </body>
jQuery :
<script type='text/javascript'>
//<![CDATA[
// Loader
$(window).bind("load",function(){$("#cssload").fadeOut(1e3)});
//]]>
</script>
4. Simpan template dan lihat hasilnya.
Memasang Efek Animasi Loading Sederhana di Blog
1. Login ke Blogger > Buka Template editor > Tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>
CSS :
#cssload {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilVT90GCuObmwb4On6Gr9wb8l0k4AHQ5GtGj1Ais8NyvWygH6J4B_kP4ps1EaoU84L3KT-RAOm-uhGmgTgJq870w8K30biwUQZKl6K1rjWOKk3XTJHdKb9ZxGOQeL1t8fSLGteMa9x8Oc/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;}
2. Selanjutnya tambahkan kode di bawah ini di bawah <body>
HTML :
<div id='cssload'/>
3. Tambahkan kode di bawah ini sebelum </body>
jQuery :
<script type='text/javascript'>
//<![CDATA[
// Loader
$(window).bind("load",function(){$("#cssload").fadeOut(1e3)});
//]]>
</script>
4. Simpan template dan lihat hasilnya.
Tag :
Blogger

0 Komentar untuk "Cara Memasang Efek Animasi Loading Sederhana di Blog"