Tampilkan postingan dengan label TUTORIAL BLOGSPOT. Tampilkan semua postingan

Cara Membuat Animasi Loading Blog Dengan CSS

Selasa, 15 Januari 2013

Hai sahabat blogger semua, kemarin kemarin saya sudah share Cara Membuat Efek Loading Dengan CSS. Dan untuk kali ini saya akan share Cara Membuat Animasi Loading Blog Dengan CSS :) Ini tidak memberatkan blog karena ini menggunakan CSS animasi. Okeh langsung saja ikuti caranya.

1. Animasi 1 ( Efek Bounce dan Rotate )

Contohnya klik disini

Cara membuatnya :

Masuk ke Edit HTML
Jangan lupa centang Expand Template Widget
Lalu cari kode ]]></b:skin> dengan menggunakan CTRL+F
Setelah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

@-webkit-keyframes WAKloading{
0%{-webkit-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-webkit-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-webkit-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-o-keyframes WAKloading{
0%{-o-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-o-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-o-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-moz-keyframes WAKloading{
0%{-moz-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-moz-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-moz-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-ms-keyframes WAKloading{
0%{-ms-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-ms-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-ms-transform:translate(0px,0px) scale(1);opacity:1;}
}
@keyframes WAKloading{
0%{transform:translate(0px,0px) scale(0.50);opacity:1}
20%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{transform:translate(0px,0px) scale(1);opacity:1;}
}

Lalu cari kode #outer-wrapper dan masukkan kode dibawah ini kedalamnya

;-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 4s;animation:WAKloading 3s;-o-animation:WAKloading 3s

Sehingga menjadi seperti ini

#outer-wrapper {-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 4s;animation:WAKloading 3s;-o-animation:WAKloading 3s}

Kemudian disave.

2. Animasi 2 ( Efek Earthquake )

Contohnya klik disini

Cara membuatnya :

Masuk ke Edit HTML
Jangan lupa centang Expand Template Widget
Lalu cari kode ]]></b:skin> dengan menggunakan CTRL+F
Setelah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

@keyframes WAKloading{
0%{opacity:1;-webkit-transform:rotate(0deg);}
5%{opacity:1;-webkit-transform:rotate(5deg);}
10%{opacity:1;-webkit-transform:rotate(-5deg);}
15%{opacity:1;-webkit-transform:rotate(5deg);}
20%{opacity:1;-webkit-transform:rotate(-5deg);}
25%{opacity:1;-webkit-transform:rotate(5deg);}
30%{opacity:1;-webkit-transform:rotate(-5deg);}
35%{opacity:1;-webkit-transform:rotate(-5deg);}
40%{opacity:1;-webkit-transform:rotate(5deg);}
45%{opacity:1;-webkit-transform:rotate(-5deg);}
50%{opacity:1;-webkit-transform:rotate(5deg);}
55%{opacity:1;-webkit-transform:rotate(-5deg);}
60%{opacity:1;-webkit-transform:rotate(5deg);}
65%{opacity:1;-webkit-transform:rotate(-5deg);}
70%{opacity:1;-webkit-transform:rotate(5deg);}
80%{opacity:1;-webkit-transform:rotate(-5deg);}
85%{opacity:1;-webkit-transform:rotate(5deg);}
90%{opacity:1;-webkit-transform:rotate(-5deg);}
95%{opacity:1;-webkit-transform:rotate(5deg);}
35%{opacity:1;-webkit-transform:rotate(0deg);}
}

@-o-keyframes WAKloading{
0%{opacity:1;-webkit-transform:rotate(0deg);}
5%{opacity:1;-webkit-transform:rotate(5deg);}
10%{opacity:1;-webkit-transform:rotate(-5deg);}
15%{opacity:1;-webkit-transform:rotate(5deg);}
20%{opacity:1;-webkit-transform:rotate(-5deg);}
25%{opacity:1;-webkit-transform:rotate(5deg);}
30%{opacity:1;-webkit-transform:rotate(-5deg);}
35%{opacity:1;-webkit-transform:rotate(-5deg);}
40%{opacity:1;-webkit-transform:rotate(5deg);}
45%{opacity:1;-webkit-transform:rotate(-5deg);}
50%{opacity:1;-webkit-transform:rotate(5deg);}
55%{opacity:1;-webkit-transform:rotate(-5deg);}
60%{opacity:1;-webkit-transform:rotate(5deg);}
65%{opacity:1;-webkit-transform:rotate(-5deg);}
70%{opacity:1;-webkit-transform:rotate(5deg);}
80%{opacity:1;-webkit-transform:rotate(-5deg);}
85%{opacity:1;-webkit-transform:rotate(5deg);}
90%{opacity:1;-webkit-transform:rotate(-5deg);}
95%{opacity:1;-webkit-transform:rotate(5deg);}
35%{opacity:1;-webkit-transform:rotate(0deg);}
}

@-webkit-keyframes WAKloading{
0%{opacity:1;-webkit-transform:rotate(0deg);}
5%{opacity:1;-webkit-transform:rotate(5deg);}
10%{opacity:1;-webkit-transform:rotate(-5deg);}
15%{opacity:1;-webkit-transform:rotate(5deg);}
20%{opacity:1;-webkit-transform:rotate(-5deg);}
25%{opacity:1;-webkit-transform:rotate(5deg);}
30%{opacity:1;-webkit-transform:rotate(-5deg);}
35%{opacity:1;-webkit-transform:rotate(-5deg);}
40%{opacity:1;-webkit-transform:rotate(5deg);}
45%{opacity:1;-webkit-transform:rotate(-5deg);}
50%{opacity:1;-webkit-transform:rotate(5deg);}
55%{opacity:1;-webkit-transform:rotate(-5deg);}
60%{opacity:1;-webkit-transform:rotate(5deg);}
65%{opacity:1;-webkit-transform:rotate(-5deg);}
70%{opacity:1;-webkit-transform:rotate(5deg);}
80%{opacity:1;-webkit-transform:rotate(-5deg);}
85%{opacity:1;-webkit-transform:rotate(5deg);}
90%{opacity:1;-webkit-transform:rotate(-5deg);}
95%{opacity:1;-webkit-transform:rotate(5deg);}
35%{opacity:1;-webkit-transform:rotate(0deg);}
}

@-moz-keyframes WAKloading{
0%{opacity:1;-moz-transform:rotate(0deg);}
5%{opacity:1;-moz-transform:rotate(5deg);}
10%{opacity:1;-moz-transform:rotate(-5deg);}
15%{opacity:1;-moz-transform:rotate(5deg);}
20%{opacity:1;-moz-transform:rotate(-5deg);}
25%{opacity:1;-moz-transform:rotate(5deg);}
30%{opacity:1;-moz-transform:rotate(-5deg);}
35%{opacity:1;-moz-transform:rotate(-5deg);}
40%{opacity:1;-moz-transform:rotate(5deg);}
45%{opacity:1;-moz-transform:rotate(-5deg);}
50%{opacity:1;-moz-transform:rotate(5deg);}
55%{opacity:1;-moz-transform:rotate(-5deg);}
60%{opacity:1;-moz-transform:rotate(5deg);}
65%{opacity:1;-moz-transform:rotate(-5deg);}
70%{opacity:1;-moz-transform:rotate(5deg);}
80%{opacity:1;-moz-transform:rotate(-5deg);}
85%{opacity:1;-moz-transform:rotate(5deg);}
90%{opacity:1;-moz-transform:rotate(-5deg);}
95%{opacity:1;-moz-transform:rotate(5deg);}
35%{opacity:1;-moz-transform:rotate(0deg);}
}

Lalu cari kode #outer-wrapper dan masukkan kode dibawah ini kedalamnya

;-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 3s;animation:WAKloading 3s;-o-animation:WAKloading 3s;

Sehingga hasilnya menjadi sepert ini

#outer-wrapper {-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 3s;animation:WAKloading 3s;-o-animation:WAKloading 3s;}

Kemudian disave

3. Animasi 3 ( Efek Slidding )

Contohnya klik disini

Cara membuatnya :

Masuk ke Edit HTML
Jangan lupa centang Expand Template Widget
Lalu cari kode ]]></b:skin> dengan menggunakan CTRL+F
Setelah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

@-webkit-keyframes WAKloading{from{-webkit-transform:translate(-1000px,0px);opacity:0}
to{-webkit-transform:translate(0px,0px);opacity:1.1;}}
@-moz-keyframes WAKloading{from{-moz-transform:translate(-1000px,0px);opacity:0}
to{-moz-transform:translate(0px,0px);opacity:1.1;}}
@-ms-keyframes WAKloading{from{-ms-transform:translate(-1000px,0px);opacity:0}
to{-ms-transform:translate(0px,0px);opacity:1.1;}}
@keyframes WAKloading{from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}}

Lalu cari kode #outer-wrapper dan masukkan kode dibawah ini kedalamnya

animation:WAKloading 2s;-webkit-animation:WAKloading 2s;-o-animation:WAKloading 2s-moz-animation:WAKloading 2s;-ms-animation:WAKloading 2s;animation:WAKloading 2s;

Sehingga menjadi seperti ini

#outer-wrapper {animation:WAKloading 2s;-webkit-animation:WAKloading 2s;-o-animation:WAKloading 2s-moz-animation:WAKloading 2s;-ms-animation:WAKloading 2s;animation:WAKloading 2s;}

Kemudian disave.

sumber

Cara Membuat Efek Loading Dengan Animasi

Selasa, 04 Desember 2012

0 Comments

Tag : TUTORIAL BLOGSPOT

Sudah lama saya tidak posting tentang tutorial blogspot ya hehee. Oke pada kesempatan kali ini saya akan share yaitu tentang "Cara Membuat Efek Loading Dengan Animasi". Cara kerjanya ini pada saat kita mengklik suatu halaman di blog, maka efek ini akan muncul selama loading. Penasaran ? Yoda silahkan coba ya..

Pertama masuk ke Edit HTML
Lalu cari kode ]]></b:skin>
Kemudian pastekan kode dibawah ini diatas kode ]]></b:skin>

/* Efek Loading Animasi */

#pageLoadaka {
position: fixed;top:0;left:0;background-color:6f0f60; z-index: 9999;text-align:center;
width:100%;height:100%;padding-top:22%;font-size:25px;color:#e20000;display:none;}
.loader {
background-color:rgba(0,0,0,0);
border:5px solid #a9a9a9;
opacity:.9;
border-right:5px solid #f90;
border-left:5px solid #f90;
border-radius:60px;
box-shadow:0 0 35px #a9a9a9;-moz-box-shadow:0 0 35px #a9a9a9;-webkit-box-shadow:0 0 35px #a9a9a9;
width:100px;
height:100px;
margin:0 auto;
-moz-animation:berputar 1s infinite ease-in-out;
-webkit-animation:berputar 1s infinite linear;
}

.loader3 {
background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg56ngZv0XIHCq2PGjOcz91eZ-jcHtMvRdF6NAzLc-K7Cqznci1iuU2q-lQ_cmWT8xMVpkeSgUIfBxSq1gHdmR5cVuQijxZBvbDw9GOSXQ1trtM3ROvG2kzQ4qay1TDz3JaQClydpkQ1Qgn/s1600/cyrle.png) no-repeat center;
background-repeat: no-repeat
border:2px solid #a9a9a9;
opacity:.9;
border-radius:45px;
box-shadow:0 0 35px #f90;-moz-box-shadow:0 0 35px #f90;-webkit-box-shadow:0 0 35px #f90;
width:70px;
height:70px;
margin:0 auto;
position:relative;
top:-181px;
}
.loader2 {
background-color: rgba(0,0,0,0);
border:5px solid #a9a9a9;
opacity:.9;
border-left:5px solid #f90;
border-right:5px solid #f90;
border-radius:50px;
box-shadow:0 0 40px #1b9111;-moz-box-shadow:0 0 40px #1b8111;-webkit-box-shadow:0 0 40px #1b8111;
width:80px;
height:80px;
margin:0 auto;
position:relative;
top:-100px;
animation:berputarkecil 1s infinite linear;
-moz-animation:berputarkecil 1s infinite linear;
-webkit-animation:berputarkecil 1s infinite linear;
}
@-moz-keyframes berputar {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 2px #f90;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes berputarkecil {
0% { -moz-transform:rotate(360deg); }
100% { -moz-transform:rotate(0deg); }
}
@-webkit-keyframes berputar {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 2px #f90; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes berputarkecil{
0% { -webkit-transform:rotate(360deg); }
100% { -webkit-transform:rotate(0deg); }
}

Kemudian pastekan lagi kode dibawah ini tepat diatas kode </body>

<div id='pageLoadaka'>
<div class='loader'/>
<div class='loader2'/>
<div class='loader3'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    var siteURL = "http://" + top.location.host.toString();
    var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
    $internalLinks.click(function() {
        $('#pageLoadaka').fadeIn(500).delay(2000).fadeOut(1200);
    });
    $('#pageLoadaka').click(function() {
        $(this).hide();
    });
});
//]]>
</script>

Cara Membuat Ayat Alkitab Harian Di Blog

Minggu, 02 September 2012

3 Comments

Tag : INFO, TUTORIAL BLOGSPOT

,selamat sore sahabat blogger semua ? sehat kan ? hehee. Kali ini saya akan share cara membuat ayat alkitab harian di blog. Ayatnya ini setiap 24 jam berganti ganti loh, saya juga memakainya. Scriptnya ini dari forumkristen.com. Penasaran ? Mau buat di blog kamu ? Ikuti cara caranya :)