Author : UnknownTidak ada komentar
 |
| GAMBAR TAMPILAN ANIMASI LOADING BLOG |
Tips trik blogger- siang siang saya post tentang cara menambahkan efek loading di saat kita mencari artikel pada search blog..
Cara yang saya gunakan tidak terlalu sulit untuk di ikuti apalagi beserta panduan gambar nya saya yakin anda mudah untuk mengikuti cara saya.
Langkah - langkah Membuat Efek Animasi Page Loading di pada Blog anda :
- LOG IN ke blog anda di www.blogger.com
- Setelah anda log in maka anda akan di bawa ke dasboard blog, nah di dasboard blog inilah anda harus klik tanda segitiga kebalik (opsi pilihan) lalu pilih TEMPLATE. Untuk lebih detail nya lihat gambar di bawah ini :
 |
| Gambar dasboard blog |
- Jika anda sudah mengklik template anda maka anda akan di bawa ke halaman HTML dan pilih EDIT HTML Untuk lebih detail nya lihat gambar di bawah ini :
 |
| Gambar edit html blog |
- Jika anda sudah masuk di dalam kolom halaman html blog lalu cari kode ]]></b:skin> untuk mempercepat pencarian klik 1x di dalam kotak HTML lalu anda tekan CTRL + F Nanti akan ada kolom kecil di di pojok kanan atas lalu masukan kode ]]></b:skin> di kolom tersebut dan tekanENTER pasti langsung dapat kode tersebut. Lalu Letakan kode CSS di bawah tepat di atas kode ]]></b:skin> :
#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgHbcGcAN6z_erG6yK1q2_8cPbCrVpTwbTtVb0QdIc_sPjbFET9Ktj5fzZK3BnSAOOqelPhkGXcxYts-du2hFasJkga2o83vx6z0HnWWDnknU0xEGkkXXWDQDWXw8yMI6FqCHEvUeuLCrI/s1600/loading10.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgHbcGcAN6z_erG6yK1q2_8cPbCrVpTwbTtVb0QdIc_sPjbFET9Ktj5fzZK3BnSAOOqelPhkGXcxYts-du2hFasJkga2o83vx6z0HnWWDnknU0xEGkkXXWDQDWXw8yMI6FqCHEvUeuLCrI/s1600/loading10.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}
CATATAN PENTING...
Langkah terahir SIMPAN template anda. anda bisa liat DEMO nya di salah satu blog saya lain nya yaitu :blog muizcyan-xp blog sayaAnda bisa saja merubah animasi loading dengan menganti kode gambar yang saya tandai warna kuning di atas.
dan untuk membuat transparan seperti pada blog saya dan gambar yang diatas anda haru mengubah kode warna #000 yang saya tandai warna biru diatas dengan ini :rgba(107, 102, 102, 0.44)
- Selanjutnya, silahkan cari kode </body>, biasanya posisinya sebelum kode </html> ya. Cari dengan menekan CTRL+F dan jika sudah ketemu, copas saja script di bawah ini sebelum kode </body>atau tepat di atas kode </body>
MASUKAN KODE DI BAWAH INI TEPAT DI ATAS KODE : </body>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
Ini ada beberapa alamat URL gambar animasi loading yang munkin anda sukai :
 |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjntnyM1MNGAfYKXu9PNOXyG9v7Ol6QfPHjEu6IfNG9F-CO-kwS4lZV13ClIx3vtsJSuEwRN0Lo8kajPiqM8R-Mjbd5svUay1ZuVfx3chXsFHV_g_xVMqrV3z43fAwcNFI-vL5-chYFWdj7/ /loading1.gif |
 |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglLx6W8L2rNH5cbJEZGWSG6fjFY8TktAEZWB284Cx5RcoP8-6QjBxrZ5MeqxKnp9uzilGdAAQJ3WtPofp0T8eiE9wEPruaxSYAsiwVyB-u77m3m2yMzP_ZfwtCRm4WpVzYspB3RiJp99EF/s1600/loading3.gif |
 |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2JmCimm_kUpit24dYhe8tPUSDaZo1DAQI_Y80KkKMvd3TYH0MuLtpo-Hu_hSICxY9ZFXyO6CRh8CFbIxEa_lg0soILqlDZahatvBGv49g2XYh0HTDRVtOlmYFAHKBPfn_jNntWknJ7hyphenhyphenA/s1600/loading2.gif |
 |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0NfJh-0CnqdD9MS29Ytt1GWVzrmLBM6zPW0XjGzfzrdI85BQbsp9BXCyT4Tuz6GCe2KsWWpZr7NA_bg-OTVcKMZpEbwgctrAHr7IEVc3dOXs1kvJAHJwmlSt7Y5fBekdMwaf4t3HeXUXt/s1600/loading4.gif |
 |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSlnIx0V6BqUW2p2sYWmwcOjzLKT33NSkW9VKbu7aetMIuOPLiwSBR5AbC4pGy6Nf_i7FGdjVQ_vamyubFKMmlVbCKebdw0g-148Z_2JbJJPV1UYif3Pf6snV5affkO22mkDl4gA9edLDK/s1600/loading5.gif |
 |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVyFFWTK8D68QIcrSxWhHYjfmpQfd6-dUn8pcaXKUuFVGMumJugAqdXch0e1YWAVn7n1HHY8zm3lhTIvVBh25Ng7F7elnJbU0yb2FSV-Ca2CxSzte5t9X_L2f6oEoxUy_aaHGC2kHEl3Ep/s1600/loading6.gif |
 |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzkr03GVM0qXCaS9MuPUdRmJEE4SqBoBJV_TIbnx0NtmtJK2S5lk6jS5HDL6FWq6elDu7d5pzYpn92XQxXX5TQVMxGnt1dagsp3xna5LW0WAtEyzkoGwvrck1AsVkmwB-gQUuiWo1foWdd/s1600/loading7.gif |
 |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR1_goqAB7Z6nmVGVsvI4_VLQP9xOntwJGIm-WjzoA1bR-VhXrRQSKOib5anFzExF3kdtBpD78ZBHJfbjxGcEbe0E-xBYvQ_wiy2_Su_xiVhJj4MuUTeDK2qiL5GCtbjpE3X9JtF_itsaD/s1600/loading8.gif |
 |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkvckRJQHGSUq5sLwnoyEhxFF81OGx7IvPFgSq8_93PP_iwPOgW1VZZNt2IWrKS30qDvRnKcCiDiXYGAuTMF1jU3rl5ZozqQnsEz094_fX66gmZriygiW7JFoUtXocAhFylqGO414HzThV/s1600/loading9.gif |
Jika masih ada yang kurang mengerti tingalkan saja komentar sobat. trimakasih mudah-mudahan membantu.
silahkan kesini untuk mencari tutorial blog lebih banyak lagi
Posted On : Minggu, 18 Mei 2014Time : 22.47