Animasi Unik loading untuk Blog Bola Bergaya Kontras

Jumat, Agustus 02, 2013 2
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
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

Jumat, Agustus 02, 2013 0


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

Jumat, Agustus 02, 2013 0


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:
Cara Memasang Loading Page Animasi Blog
 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

Jumat, Agustus 02, 2013 0


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

Membuat pesan selamat Dan penutup datang pada Blog

Kamis, Agustus 01, 2013 0
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 ^_^

5 Template Blog Anime Keren

Kamis, Agustus 01, 2013 0
5 Template Blog Anime Keren - Selain template yang bertema kaToko Online , Template Seo Friendly serta template keren lainnya, Ternyata bnyak sekali pilihan untuk kamu yang memang menggemari sesuatu yang berbeda-beda. Kali ini, saya share beberapa template yang sangat keren tentunya. Dengan design menarik dari karakter anime. Untuk lebih lengkapnya, kamu bisa download template pilihan kamu di bawah ini :

5 Template Blog Anime Keren
1. Date A Live - Template Blog Anime Keren


download
DOWNLOAD OR DEMO TEMPLATE

2.  Bleach - Template Blog Anime Keren



download
DOWNLOAD OR DEMO TEMPLATE

3. Naruto Fight - Template Blog Anime Keren



download

4. Animes - Template Blog Anime Keren


download

5. Anime Heros - Template Blog Anime Keren



download

sekian terimakasih ya...  semoga bemanfaat bagi anda...  ^_^

10 Template Blogger Lucu,Cute Gratis

Kamis, Agustus 01, 2013 26
10 TeLucu,Cute Gratis mplate Blogger - Template Blogger versi lucu dan Cute ini merupakan Free Template yang juga banyak di download oleh para blogger. Template jenis ini banyak tersedia diwebsite-website para pembuat design template blogger dengan kategori Cute Template Blogger.


Template Blogger Lucu atau Cute ini menurut saya lebih menonjolkan gambar dari segi tampilan dan biasanya berupa gambar kartun atau Anime Kartun ala Jepang. Para pengguna template jenis ini biasanya didominasi oleh para kaum wanita yang ingin terlihat lebih menarik dari template standar yang disediakan oleh blogger. Berbagai macam kolom tersedia untuk template lucu ini mulai dari 2 kolom, 3 kolom hingga 4 kolom dan bagi TreTan yang sudah pandai dalam mengolah template maka dengan mudah menambah gambar lucu sesuai dengan keinginan.

Berikut adalah 10 Template Versi Lucu dan Cute yang tersedia Gratis dan Free Download pilihan saya di Tahun 2012 ini.

New : Seo Friendly Template


New : Best Blogger Templates Untuk Video dan Photography



1. Play with Micky Mouse
  
daftarsemauku.blogspot.com 
Fitur
2. Funny WoodPecker

Fitur
3.KID STYLE Blog Template

download

Fitur
4. Girls Fantasy Land

download

Fitur
5.Happy Baby Template Blog
download

Fitur
6. Cute Hello Kity Template Blog


download


7. Blog Template Cute Toon


download

Fitur
8. PORORO TEMPLATE BLOG


download

Fitur
9. Cokiez Template Blog


download

Fitur
10.Angrybirds Template Blog


download

Fitur

Berikut 10 Template Blogger yang Lucu dan Cute Pilihan yang bisa kamu DOWNLOAD. Semoga membantu dalam pencarian template pilihan lainnya.

10.a . Angrybirds New Template


download



UPDATE : 

11. DORAEMON Template Blog


Fitur Template

download

download

DOWNLOAD ATAU DEMO TEMPLATE

12. Keroppi Land Simple Blog Template



download

DOWNLOAD ATAU DEMO TEMPLATE


download

DOWNLOAD ATAU DEMO TEMPLATE

13. Template Lucu Ala Mode



download
 14. The Best Cute Template Blog Bear

download

Asep syehabudin. Diberdayakan oleh Blogger.