BREAKING NEWS

Minggu, 11 Agustus 2013

Cara Memasang Loading Page Animasi Blog ‘Mondar-mandir’

Testimoni, baca dulu ‘kumpulan tutorial membuat loading page animasi blog cepat, komplit!’. Animasi bergerak ‘mondar-mandir’ berupa bola abu-abu. Untuk penerapan loading page animasi blog dikonfigurasi pada Edit HTML atau editor blog sobat. Berikut langkah-langkahnya:



Loading Page Animasi Blog ‘Mondar-mandir’ (Foto: Screenshoot)
1. Pasang Jquery berikut di template blog sobat di atas kode </head>,
<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 */
#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%; }
}
3. Letakkan JavaScript berikut di bawah kode <body>,
<!-- Start Andi-Techno.blogspot.com Loader -->
<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 -->
4. Finish, Simpan Template. Jika langkah-langkah di atas dilakukan dengan benar, silahkan lihat hasilnya.

Sumber : www. walman.org


Related Post



About ""

Salam Blogger dari Medan , Blog yang Saya beri nama Ilmu Komputer dan Pemograman ini Berisi Tentang Programmer , Tutorial , Tips Trik Komputer dan Internet, Tugas Akhir, dll. Jika sobat semua suka silahkan Join dan jangan lupa untuk memberikan jempolnya pastinya.

Creatif By : Ramlan MarbunSemoga Bermanfaat Untuk Sobat Semua

Terimah Kasih telah membaca artikelCara Memasang Loading Page Animasi Blog ‘Mondar-mandir’. Yang ditulis oleh Ramlan Marbun .Pada hari Minggu, 11 Agustus 2013. Terima kasih atas kunjungannya dan apabila berminat dengan artikel ini sertakan sumber link asli. Kritik dan saran dapat anda sampaikan melalui kotak komentar. Terimakasih

:: EnterKomputer13.Blogspot.Com ! ::

Posting Komentar

 
Copyright © 2013-2017 Ilmu Komputer dan Pemograman .All Rights Reserved.
Design by: Ramlan Marbun |