Cara Buat Loading Page Animasi Cincin ‘Muter-muter’ pada Blog

Tambahkan Komentar

Donasi

Rabu, 22 Mei 2013

Testimoni, baca dulu ‘kumpulan tutorial membuat loading page animasi blog cepat, komplit!’. Animasi loading page berbentuk lingkaran mirip seperti cincin yang mempunyai permata bewarna merah. Geraknya sistematis mengarah jarum jam. Untuk pemasangan loading page animasi ini sobat klik pada Template, kemudian beralih ke Edit HTML.

Loading Page Animasi Cincin ‘Muter-muter’ (Foto: screenshoot)

1. Copy script Jquery dan pastekan di atas kode </head>,

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

___Jika sebelumnya telah ada script Jquery, abaikan langkah ini.
2. Copy CSS berikut dan letakan di atas kode ]]></b:skin,

/* X-Gen Loader */
#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;}
#bowlG{
position:relative;
width:128px;
height:128px;margin:20% auto;
}
#bowl_ringG{
position:absolute;
width:128px;
height:128px;
border:11px solid #5C5C5C;
-moz-border-radius:128px;
-webkit-border-radius:128px;
-ms-border-radius:128px;
-o-border-radius:128px;
border-radius:128px;
}
.ball_holderG{
position:absolute;
width:34px;
height:128px;
left:47px;
top:0px;
-moz-animation-name:ball_moveG;
-moz-animation-duration:1.3s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-webkit-animation-name:ball_moveG;
-webkit-animation-duration:1.3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-ms-animation-name:ball_moveG;
-ms-animation-duration:1.3s;
-ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear;
-o-animation-name:ball_moveG;
-o-animation-duration:1.3s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
animation-name:ball_moveG;
animation-duration:1.3s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
.ballG{
position:absolute;
left:0px;
top:-30px;
width:51px;
height:51px;
background:#FF0000;
-moz-border-radius:43px;
-webkit-border-radius:43px;
-ms-border-radius:43px;
-o-border-radius:43px;
border-radius:43px;
}
@-moz-keyframes ball_moveG{
0%{
-moz-transform:rotate(0deg)}
100%{
-moz-transform:rotate(360deg)}
}
@-webkit-keyframes ball_moveG{
0%{
-webkit-transform:rotate(0deg)}
100%{
-webkit-transform:rotate(360deg)}
}
@-ms-keyframes ball_moveG{
0%{
-ms-transform:rotate(0deg)}
100%{
-ms-transform:rotate(360deg)}
}
@-o-keyframes ball_moveG{
0%{
-o-transform:rotate(0deg)}
100%{
-o-transform:rotate(360deg)}
}
@keyframes ball_moveG{
0%{
transform:rotate(0deg)}
100%{
transform:rotate(360deg)}
}

3. Pastekan JavaScript ini tepat di bawah kode <body>,

<script type='text/javascript'>
//<![CDATA[
$(function() {
    setTimeout(function() {
        $('#xgenloader-screen').fadeOut();
    }, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="bowlG">
<div id="bowl_ringG">
<div class="ball_holderG">
<div class="ballG">
</div>
</div>
</div>
</div>
</div>

4. Selesai, klik tombol Simpan Template.

Baca juga:
1. Cara Mudah Buat Loading Page Animasi Blogspot Dinamis
2. Cara Memasang Loading Page Animasi Blog ‘Mondar-mandir’
3. Cara Membuat Loading Page Animasi Bola Kontras
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 Buat Loading Page Animasi Cincin ‘Muter-muter’ pada Blog Rating: 3.5 Reviewer: walman hadi ItemReviewed: Cara Buat Loading Page Animasi Cincin ‘Muter-muter’ pada Blog

Bagikan ini :

0 0 030

Terima kasih anda telah membaca tulisan "Cara Buat Loading Page Animasi Cincin ‘Muter-muter’ pada Blog". Silahkan klik "tombol share" dan menggunakan fitur lain yang sudah tersedia. Anda tidak diizinkan melakukan penggandaan artikel atau copy-paste tulisan kami tanpa izin dan tanpa menaruh sumber aslinya.

Kami mengaktifkan DMCA COMPLAINT sehingga kami berharap anda bisa memakluminya. Untuk info lebih lanjut, baca terlebih dahulu PERATURAN mengenai izin share konten. Terima Kasih.

Tambahkan Komentar

Alfatta Rezqa WinnersyahWah artikel yang bagus nihsaya sudah coba kotapi saya agak bingung karna pas saya buka linknya malah…
ReckykasendaMantap gan! sukses selalu...
Fajrin Ilham Hboleh juga untuk dicoba :D
Ronatio S RumahorboTrimakasih ,bro untuk tutorial nya.dan sudah terpasang di TKP blog ane.
wallpaperkeren18thanks infonya gan..ane praktekin dulu :ngacir
pasang iklan gratislike---- >> mampir yakkss
zgames46langsung praktek gan,,,maklum lagi belajar buat ini,,,kok blogging bikin ousing juga ya,,hadeh mklum…
Nuraenimakaasi atas innfonya..langsung dipraktekkan..kunjungi juga blog kami mamboroflow.blogspot.com