Cara Membuat Effect Loading/Loader pada Blog, Saat Masuk Pada Blog Dengan Code Jequery Trik Blogging Mempercantik Blog
Hello para web designer, kini kami postkan trik terbaru kami agar blog anda jauh lebih indah dan menarik dari sebelumnya.
Kini kami coba membuat suatu Loader pada Blog/web, tapi saya tetap sulit menggabungkan CSS dan Jquery dengan tepat.
Kemudian saya coba Tanya Mbah Google, kemudian kami temukan script yang tepat digabungkan dengan script kami.
Kemudian saya coba Tanya Mbah Google, kemudian kami temukan script yang tepat digabungkan dengan script kami.
Script animasi loading page ini saya dapat dari http://www.gayadesign.com yang merupakan versi awal dari script tersebut. Untuk membuat dan memasang animasi loading page pada blog kalian, masuk pada Design - Edir HTML dan cari kode ]]></b:skin> dan letakan kode dibawah ini diatas ]]></b:skin>
Okee….
Coba ikuti langkah berikut.
1. Login Blogger.
2. Kemudian Rancangan => Edit HTML
3. Kemudian cari code ]]></b:skin> , untuk lebih cepat tekan CTRL+F pada keyboard.
4. Copy code Jquery dibawah ini.
2. Kemudian Rancangan => Edit HTML
3. Kemudian cari code ]]></b:skin> , untuk lebih cepat tekan CTRL+F pada keyboard.
4. Copy code Jquery dibawah ini.
/* ---------------
jquery animation loading page
---------------------------------- */
.QOverlay {
background-color: #000000; /* background color loading */
z-index: 9999;
}
.QLoader {
background-color: #CCCCCC; /* color bar loading */
height: 10px;
}
.QAmt {
color:#FF530D; /*loading Color number*/
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}
jquery animation loading page
---------------------------------- */
.QOverlay {
background-color: #000000; /* background color loading */
z-index: 9999;
}
.QLoader {
background-color: #CCCCCC; /* color bar loading */
height: 10px;
}
.QAmt {
color:#FF530D; /*loading Color number*/
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}
5. Pastekan diatas code ]]></b:skin>
6. Kemudian cari code </head> , gunakan cara cepat seperti tadi.
7. Copy code dibawah ini
7. Copy code dibawah ini
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://situseo.googlecode.com/files/loadpage.js' type='text/javascript'/>
<script src='http://situseo.googlecode.com/files/loadpage.js' type='text/javascript'/>
8. Pastekan code tersebut diatas code </head>
Perhatian-!!!!
untuk kode yang diberi warna merah, jika kode tersebut sudah ada dalam template kalian, kalian tidak perlu menambahkan kode tersebut (cukup 1 saja)
9. Kemudian cari code </body>, gunakan cara cepat seperti tadi.
10. Copy code dibawah ini
10. Copy code dibawah ini
<script>
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>
11. Pastekan code tersebut diatas code </body>
Save template kalian dan coba buka blog kalain untuk mengetestnya
Hanya seperti itu yang dapat kami berikan untuk entri kali ini.
Kurang jelas, atau lebih jelas silahkan berkomentar kami akan segera merespon.
Salam Web Designer
Kurang jelas, atau lebih jelas silahkan berkomentar kami akan segera merespon.
Salam Web Designer
(Artikel Dilindungi)
Sertakan alamat blog ini jika mengcopy paste.
Hak Cipta Dilindungi
Sertakan alamat blog ini jika mengcopy paste.
Hak Cipta Dilindungi
Terima Kasih
Rafi Orilya Groups
by Rafi Aldiansyah Asikin
Rafi Orilya Groups
by Rafi Aldiansyah Asikin