Kali ini akan saya jelaskan bagaimana
Cara Memberi Efek Loading Keren Di Blogspot
Trik ini saya dapatkan di
http://gj37765.blogspot.com/2012/07/add-jquery-page-loading-effect-to.html
DEMO
Cara Tambahkan Efek Halaman Loding jQuery Untuk Blogger?
- Pergi ke Blogger Template> --- ---> Edit HTML
- Centang Pada Kotak Perluas Widget Template Centang
- CTRL + F untuk menemukan </ head> Dalam Blog Anda HTML
- Copy & Paste Kode Dibawah Ini Hanya Di atas
<style>
/ * Halaman jQuery memuat efek oleh www.gj37765.blogspot.com * /
# Md-loading {
posisi yang tetap;
z-index: 50;
top: 0; kiri: 0;
width: 100%; height: 100%;
background: # FDFEF8 url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh50NOMbWeUPxmg3aksRgaOqP3hxQnC1bX6S-X2o8sH2vlJfEJv5nUMiv_iHX-L5OQmxiv3s0I71LK4kevTjHLzN1GNH5z8tAKxs9DVAK6U9wzccwK67qdYnlo53nsXg3xtavmVvDc4w54k/s1600/MD-Lodding.gif) no-repeat center;
line-height: 350px;
text-align: center;
font-size: 36px;
color: # 353231;
text-indent:-9999px;
}
MD # md-loading. {Display: none;}
@ Media layar saja dan (perangkat-width: 768px) {
# Pemuatan {
position: absolute;
width: 1040px;
min-height: 768px;
}
}
# Md-kemajuan-bar {
position: absolute;
top: 0; kiri: 0;
background: # de1301;
opacity: 0,8;
width: 0;
height: 18px;
}
# Md-loader {
height: 100%;
display: none;
}
</ Style>
<script>
(Function ($) {
$ ("Html") removeClass ("MD").;
$ ("# Header") siap (function () {$ ("# md-kemajuan-bar") stop () bernyawa ({width:.. "25%"}, 1500)}).;
. $ ("# Footer") siap (function () {. $ ("# Md-kemajuan-bar") stop () bernyawa ({width:. "75%"}, 1500)});
$ (Window). Load (function () {
$ ("# Md-kemajuan-bar") stop () bernyawa ({width: "100%."}., 600, function () {
$ ("# Md-loading") fadeOut ("cepat", function () {$ (ini) menghapus ().;}).;
});
});
}) (JQuery);
</ Script>
- Berikutnya Pencarian Untuk <body>
- Copy & Paste Kode Dibawah Hanya Setelah Ini
<div id='md-loading'> <div id='md-progress-bar'> </ span> id='md-loader'> Loading ... </ div> </ div>
ATAU
Jika Anda ingin menampilkan efek ini di situs hanya menggunakan kode di bawah ini.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='md-loading'> <div id='md-progress-bar'> </ span> id='md-loader'> Loading ... </ div> </ div> </ b: if>
Sekarang Simpan Template Anda Dan Anda Lakukan!
Masukkan Komentar Anda Dan Pertanyaan bawah .... :)
Jika Anda Enjoyed This Post Silakan Ambil 5 Detik Untuk Berbagi Hal. |
Terimakasih anda telah membaca artikel tentang Cara Memberi Efek Loading Keren Di Blogspot. Jika ingin menduplikasi artikel ini diharapkan anda untuk mencantumkan link http://koneksimu.blogspot.com/2012/08/cara-memberi-efek-loading-keren-di.html. Terimakasih atas perhatiannya.
You Might Like:
Blogger
Blogging
contoh cerpen persahabatan
semua