 |
| Loading Page Animasi Blog ‘Mondar-mandir’ (Foto: Screenshoot) |
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>Jika sebelumnya sudah ada script Jquery , abaikan langkah tersebut.
2. Masukkan kode berikut di atas kode ]]></b:skin>,
/* X-Gen Loader */3. Letakkan JavaScript berikut di bawah kode <body>,
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
/* DEMO 1 */
#horizontal-load body:after {
content: "";
z-index: -1;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: -webkit-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
}
#horizontal-load .bar {
font-size: 20px;
width: 10em;
height: 1em;
position: relative;
margin: 100px auto;
border-radius: .5em;
background: rgba(255,255,255,0.6);
box-shadow:
0 0 0 .05em rgba(100,100,100,0.075),
0 0 0 .25em rgba(0,0,0,0.1),
inset 0 .1em .05em rgba(0,0,0,0.1),
0 .05em rgba(255,255,255,0.7);
}
#horizontal-load .bar:after {
content: "Please wait.";
position: absolute;
left: 25%;
top: 150%;
font-family: 'Carrois Gothic', sans-serif;
font-size: 1em;
color: #555;
text-shadow: 0 .05em rgba(255,255,255,0.7);
}
#horizontal-load .bar .sphere {
border-radius: 50%;
width: 1em;
height: 100%;
background: -webkit-linear-gradient(#eee, #ddd);
background: -moz-linear-gradient(#eee, #ddd);
background: -ms-linear-gradient(#eee, #ddd);
background: -o-linear-gradient(#eee, #ddd);
background: linear-gradient(#eee, #ddd);
box-shadow:
inset 0 .15em .1em rgba(255,255,255,0.3),
inset 0 -.1em .15em rgba(0,0,0,0.15),
0 0 .25em rgba(0,0,0,0.3);
display: block;
-webkit-animation: slide 1.75s ease-in-out infinite alternate;
-moz-animation: slide 1.75s ease-in-out infinite alternate;
-ms-animation: slide 1.75s ease-in-out infinite alternate;
-o-animation: slide 1.75s ease-in-out infinite alternate;
animation: slide 1.75s ease-in-out infinite alternate;
}
@-webkit-keyframes slide {
to { margin-left: 90%; }
}
@-moz-keyframes slide {
to { margin-left: 90%; }
}
@-ms-keyframes slide {
to { margin-left: 90%; }
}
@-o-keyframes slide {
to { margin-left: 90%; }
}
@keyframes slide {
to { margin-left: 90%; }
}
<!-- Start Andi-Techno.blogspot.com Loader -->4. Finish, Simpan Template. Jika langkah-langkah di atas dilakukan dengan benar, silahkan lihat hasilnya.
<script type='text/javascript'>
//<![CDATA[
$(function() {
setTimeout(function() {
$('#xgenloader-screen').fadeOut();
}, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="horizontal-load"><div class="bar">
<i class="sphere"></i>
</div></div>
</div>
<!-- End Loader -->
Baca juga:
1. Buat Loading Page Animasi Blog Dinamis
2. Cara Membuat Loading Page Animasi Bola Kontras
3. Loading Page Animasi Cincin ‘muter-muter’
4. Tutorial Loading Animasi Blog Mirip Startup Windows 8
5. Tips Membuat Loading Animasi Bola Loncat-loncat
6. Cara Pasang Animasi Loading Page Blog Kota-kotak Cantik
Description: Cara Memasang Loading Page Animasi Blog ‘Mondar-mandir’
Rating: 3.5
Reviewer: Unknown
ItemReviewed: Cara Memasang Loading Page Animasi Blog ‘Mondar-mandir’
7 Komentar
mantap mas.. skrng udh bisa pake animasi loading yg diatas :D Makasih mas... :D
@Rohmad fajarudin: Good work! Sama-sama mas ... :)
nice artikel sob,,follow balok ya http://blogharun27.blogspot.com/
@Taretan Mania: Semoga bermanfaat ...
Thx Gan Work
@Abhista Rizqi Ramadhan: (y), Happy blogging :D
Mantap Gan ... 1 member nambah dari saya Jangan Lupa Kunjunganya balik ya gan :D http://sharetogether1.blogspot.com/