Animasi Unik loading untuk Blog Bola Bergaya Kontras

Animasi Unik loading untuk Blog Bola

Bergaya Kontras


Animasi loading page balutan CSS3 berbentuk lingkaran yang beberapa bagiannya bewarna merah dan kuning. Gaya animasi page blog ini bergerak cepat mengarah seperti jarum jam dan kemudian berbalik arah putaran. Cara penerapannya, sobat langsung ke Template, mengklik Edit HTML:

Cara Membuat Loading Page Animasi Bola Kontras (Foto: screenshoot)

1. Copy script Jquery berikut, jika telah ada sebelumnya lewati langkah ini.
    Paste Jquery di atas kode </head>,

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

2. Letakan kode CSS 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;}

    #load2 body {
        background-image: url(../images/hexabump.png);
        background-color: #222;
    }
    #load2 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.75));
        background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
        background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
        background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
        background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
    }
    #load2 .spinner {
        position: relative;
        font-size: 100px;
        width: 1em;
        height: 1em;
        margin: 100px auto;
        border-radius: 50%;
        background: #123456;
        box-shadow: inset 0 0 0 .12em rgba(0,0,0,0.2), 0 0 0 .12em rgba(255,255,255,0.1);
        background:
            -webkit-linear-gradient(#ea2d0e 50%, #fcd883 50%),
            -webkit-linear-gradient(#fcd883 50%, #ea2d0e 50%);
        background:
            -moz-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
            -moz-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
        background:
            -ms-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
            -ms-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
        background:
            -o-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
            -o-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
        background:
            linear-gradient(#ea2d0e 50%, #ffdd72 50%),
            linear-gradient(#ffdd72 50%, #ea2d0e 50%);
        background-size: 50% 100%, 50% 100%;
        background-position: 0 0, 100% 0;
        background-repeat: no-repeat;
        opacity: 0.7;
        -webkit-animation: mask 3s infinite alternate;
        -moz-animation: mask 3s infinite alternate;
        -ms-animation: mask 3s infinite alternate;
        -o-animation: mask 3s infinite alternate;
        animation: mask 3s infinite alternate;
    }

    @-webkit-keyframes mask {
        25%  { -webkit-transform: rotate(270deg); }
        50%  { -webkit-transform: rotate( 90deg); }
        75%  { -webkit-transform: rotate(360deg); }
        100% { -webkit-transform: rotate(180deg); }
    }
    @-moz-keyframes mask {
        25%  { -moz-transform: rotate(270deg); }
        50%  { -moz-transform: rotate( 90deg); }
        75%  { -moz-transform: rotate(360deg); }
        100% { -moz-transform: rotate(180deg); }
    }
    @-ms-keyframes mask {
        25%  { -ms-transform: rotate(270deg); }
        50%  { -ms-transform: rotate( 90deg); }
        75%  { -ms-transform: rotate(360deg); }
        100% { -ms-transform: rotate(180deg); }
    }
    @-o-keyframes mask {
        25%  { -o-transform: rotate(270deg); }
        50%  { -o-transform: rotate( 90deg); }
        75%  { -o-transform: rotate(360deg); }
        100% { -o-transform: rotate(180deg); }
    }
    @keyframes mask {
        25%  { transform: rotate(270deg); }
        50%  { transform: rotate( 90deg); }
        75%  { transform: rotate(360deg); }
        100% { transform: rotate(180deg); }
    }

3. Posisikan 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="load2"><div class="spinner">
    <i class="sphere"></i>
</div></div>
</div>
<!-- End Loader -->

4. Selesai, tekan tombol Simpan Template. Jika langkah dirasa sudah benar, review hasilnya.
    Selamat mencoba, happy blogging

Cara Pasang Animasi Loading pada Blog Kota-kotak Cantik

Cara Pasang Animasi Loading Page Blog Kota-kotak Cantik

Animasi loading page kali ini berbentuk kotak-kotak berputar sistematis ke sisi kiri. Animasinya cantik dan menarik, sobat dapat menerapkannya dengan melakukan setelan Edit HTML.

Cara Pasang Animasi Loading Page Blog Kotak-kotak Cantik (Foto: screenshoot)

1. Masukan terlebih dahulu kode script Jquery di bawah ini,

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

    ______Jika sebelumnya telah memiliki script Jquery pada template, lewat langkah ini.
2. Copy CSS ini ke 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;}
#spinningSquaresG{
position:relative;
width:240px;
height:29px;margin:10% auto;}
.spinningSquaresG{
position:absolute;
top:0;
background-color:#FFDD00;
width:29px;
height:29px;
-moz-animation-name:bounce_spinningSquaresG;
-moz-animation-duration:0.6s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(.3);
-webkit-animation-name:bounce_spinningSquaresG;
-webkit-animation-duration:0.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.3);
-ms-animation-name:bounce_spinningSquaresG;
-ms-animation-duration:0.6s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(.3);
-o-animation-name:bounce_spinningSquaresG;
-o-animation-duration:0.6s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(.3);
animation-name:bounce_spinningSquaresG;
animation-duration:0.6s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.3);
}
#spinningSquaresG_1{
left:0;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}
#spinningSquaresG_2{
left:30px;
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}
#spinningSquaresG_3{
left:60px;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}
#spinningSquaresG_4{
left:90px;
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}
#spinningSquaresG_5{
left:120px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
#spinningSquaresG_6{
left:150px;
-moz-animation-delay:0.54s;
-webkit-animation-delay:0.54s;
-ms-animation-delay:0.54s;
-o-animation-delay:0.54s;
animation-delay:0.54s;
}
#spinningSquaresG_7{
left:180px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
#spinningSquaresG_8{
left:210px;
-moz-animation-delay:0.66s;
-webkit-animation-delay:0.66s;
-ms-animation-delay:0.66s;
-o-animation-delay:0.66s;
animation-delay:0.66s;
}
@-moz-keyframes bounce_spinningSquaresG{
0%{
-moz-transform:scale(1);
background-color:#FFDD00;
}
100%{
-moz-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-webkit-keyframes bounce_spinningSquaresG{
0%{
-webkit-transform:scale(1);
background-color:#FFDD00;
}
100%{
-webkit-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-ms-keyframes bounce_spinningSquaresG{
0%{
-ms-transform:scale(1);
background-color:#FFDD00;
}
100%{
-ms-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-o-keyframes bounce_spinningSquaresG{
0%{
-o-transform:scale(1);
background-color:#FFDD00;
}
100%{
-o-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@keyframes bounce_spinningSquaresG{
0%{
transform:scale(1);
background-color:#FFDD00;
}
100%{
transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}

3. Letakan JavaScript berikut tepat 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="spinningSquaresG">
<div id="spinningSquaresG_1" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_2" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_3" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_4" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_5" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_6" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_7" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_8" class="spinningSquaresG">
</div>
</div>
</div>
<!-- End Loader -->

4. Konfigurasi selesai, klik Simpan Template.

Cara Memasang Loading Animasi Blog ‘Mondar-mandir

Cara Memasang Loading Page Animasi Blog ‘Mondar-mandir

Senin, 20 Mei 2013

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.

ANIMASI LOADING CINCIN MUTER-MUTER

Cara Buat Loading Page Animasi Cincin ‘Muter-muter’ 

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>,

 <!-- 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="bowlG">
<div id="bowl_ringG">
<div class="ball_holderG">
<div class="ballG">
</div>
</div>
</div>
</div>
</div>
<!-- End Loader -->

4. Selesai, klik tombol Simpan Template.

Membuat pesan selamat Dan penutup datang pada Blog

Pesan selamat datang berguna untuk memberikan ucapan salam pada pengunjung yang datang pada blog kita. Selain selamat datang, kita juga bisa memberi salam berpisah pada pengunjung pada saat akan meninggalkan blog kita.

Bila anda berminat silahkan anda ikuti langkah - langkah berikut :

1. Silahkan anda Login Blog anda
2. Pilih Layout
3. KlikEdit HTML
4. Lalu masukkan kode dibawah ini dibawah kode <head>

<script type='text/javascript'>

alert(&quot;Selamat datang di blog 48FAMILLY..., Jangan lupa komentarnya ya..&quot;)

</script>

<script type='text/javascript'>

// goodbye alert function goodbye(){alert(&#39; Jangan lupa mampir lagi ya.... &#39;);}

parent.window.onunload=goodbye;</script>

yang berwaran merah itu bisa anda ganti sesuka anda
SEKIAN AJA YA ^_^