3 Kode Cara Membuat Gempa (Quake) Di Blog

Gempa adalah Siapa ini yang menakutkan bagi ini manusia. Di Sumbar Gempa ini mengakibatkan ratusan jiwa ini apakah meninggal sarana-prasaran rusak berat dan ringan. Nah bagaimana kalau terjadi 3 Kode Gempa (Quake) di blog kita?? OK Mari Kita Ayo Mulai membuatnya

1. Gempa (Quake) Dukungan Browser (Internet Explorer)

1. Masuk Blogger
2. Klik Template >> Edit HTML
3. Ini Cari Ctrl + F
4. Selanjutnya Cari </head>

<script type="text/javascript">
function Shw(n) {if (self.moveBy) {for (i = 77; i > 0; i--) {for (j = n; j > 0; j--) {self.moveBy(1,i);self.moveBy(i,0);self.moveBy(0,-i);self.moveBy(-i,0); } } }} Shw(14)
</script>

5. Selesai Klik Simpan Template
6. Hasil Lihat Blog Ini Internet Explorer

2. Efek Animasi Loading Gempa Bumi Part 1

1. Masuk Blogger
2. Klik Template >> Edit HTML
3. Ini Cari Ctrl + F
4. Selanjutnya Cari </style>

    @keyframes Earthquake{ /* Untuk browser Mozilla */
    0%{opacity:1;transform:rotate(0deg);}
    5%{opacity:1;transform:rotate(5deg);}
    10%{opacity:1;transform:rotate(-5deg);}
    15%{opacity:1;transform:rotate(8deg);}
    20%{opacity:1;transform:rotate(-8deg);}
    25%{opacity:1;transform:rotate(10deg);}
    30%{opacity:1;transform:rotate(-10deg);}
    35%{opacity:1;transform:rotate(-10deg);}
    40%{opacity:1;transform:rotate(12deg);}
    45%{opacity:1;transform:rotate(-12deg);}
    50%{opacity:1;transform:rotate(15deg);}
    55%{opacity:1;transform:rotate(-15deg);}
    60%{opacity:1;transform:rotate(12deg);}
    65%{opacity:1;transform:rotate(-12deg);}
    70%{opacity:1;transform:rotate(10deg);}
    80%{opacity:1;transform:rotate(-10deg);}
    85%{opacity:1;transform:rotate(8deg);}
    90%{opacity:1;transform:rotate(-8deg);}
    95%{opacity:1;transform:rotate(5deg);}
    100%{opacity:1;transform:rotate(0deg);}
    }
    @-webkit-keyframes Earthquake{  /* Untuk browser Safari dan Chrome */
    0%{opacity:1;transform:rotate(0deg);}
    5%{opacity:1;transform:rotate(5deg);}
    10%{opacity:1;transform:rotate(-5deg);}
    15%{opacity:1;transform:rotate(8deg);}
    20%{opacity:1;transform:rotate(-8deg);}
    25%{opacity:1;transform:rotate(10deg);}
    30%{opacity:1;transform:rotate(-10deg);}
    35%{opacity:1;transform:rotate(-10deg);}
    40%{opacity:1;transform:rotate(12deg);}
    45%{opacity:1;transform:rotate(-12deg);}
    50%{opacity:1;transform:rotate(15deg);}
    55%{opacity:1;transform:rotate(-15deg);}
    60%{opacity:1;transform:rotate(12deg);}
    65%{opacity:1;transform:rotate(-12deg);}
    70%{opacity:1;transform:rotate(10deg);}
    80%{opacity:1;transform:rotate(-10deg);}
    85%{opacity:1;transform:rotate(8deg);}
    90%{opacity:1;transform:rotate(-8deg);}
    95%{opacity:1;transform:rotate(5deg);}
    100%{opacity:1;transform:rotate(0deg);}
    }
    @-o-keyframes Earthquake{ /* Untuk browser Opera */
    0%{opacity:1;transform:rotate(0deg);}
    5%{opacity:1;transform:rotate(5deg);}
    10%{opacity:1;transform:rotate(-5deg);}
    15%{opacity:1;transform:rotate(5deg);}
    20%{opacity:1;transform:rotate(-5deg);}
    25%{opacity:1;transform:rotate(5deg);}
    30%{opacity:1;transform:rotate(-5deg);}
    35%{opacity:1;transform:rotate(-5deg);}
    40%{opacity:1;transform:rotate(5deg);}
    45%{opacity:1;transform:rotate(-5deg);}
    50%{opacity:1;transform:rotate(5deg);}
    55%{opacity:1;transform:rotate(-5deg);}
    60%{opacity:1;transform:rotate(5deg);}
    65%{opacity:1;transform:rotate(-5deg);}
    70%{opacity:1;transform:rotate(5deg);}
    80%{opacity:1;transform:rotate(-5deg);}
    85%{opacity:1;transform:rotate(5deg);}
    90%{opacity:1;transform:rotate(-5deg);}
    95%{opacity:1;transform:rotate(5deg);}
    100%{opacity:1;transform:rotate(0deg);}
    }

#outer-wrapper { animation:Earthquake 4s infinite; -webkit-animation:Earthquake 4s infinite; -o-animation:Earthquake 4s infinite; }

5. Selesai Klik Simpan Template
6. Hasil Lihat Blog

3. Efek Animasi Loading Gempa Bumi Part 2

1. Masuk Blogger
2. Klik Template >> Edit HTML
3. Ini Cari Ctrl + F
4. Selanjutnya Cari </style>

    @keyframes Earthquake{ /* Untuk browser Mozilla */
    0%{opacity:1;transform:translate(0px,0px);}
    10%{opacity:1;transform:translate(0px,10px);}
    20%{opacity:1;transform:translate(10px,10px);}
    30%{opacity:1;transform:translate(-10px,0px);}
    40%{opacity:1;transform:translate(10px,-10px);}
    50%{opacity:1;transform:translate(0px,-10px);}
    60%{opacity:1;transform:translate(-10px,-10px);}
    70%{opacity:1;transform:translate(-10px,10px);}
    80%{opacity:1;transform:translate(10px,10px);}
    90%{opacity:1;transform:translate(0px,10px);}
    100%{opacity:1;transform:translate(0px,0px);}
    }
    @-webkit-keyframes Earthquake{  /* Untuk browser Safari dan Chrome */
    0%{opacity:1;transform:translate(0px,0px);}
    10%{opacity:1;transform:translate(0px,10px);}
    20%{opacity:1;transform:translate(10px,10px);}
    30%{opacity:1;transform:translate(-10px,0px);}
    40%{opacity:1;transform:translate(10px,-10px);}
    50%{opacity:1;transform:translate(0px,-10px);}
    60%{opacity:1;transform:translate(-10px,-10px);}
    70%{opacity:1;transform:translate(-10px,10px);}
    80%{opacity:1;transform:translate(10px,10px);}
    90%{opacity:1;transform:translate(0px,10px);}
    100%{opacity:1;transform:translate(0px,0px);}
    }
    @-o-keyframes Earthquake{ /* Untuk browser Opera */
    0%{opacity:1;transform:translate(0px,0px);}
    10%{opacity:1;transform:translate(0px,10px);}
    20%{opacity:1;transform:translate(10px,10px);}
    30%{opacity:1;transform:translate(-10px,0px);}
    40%{opacity:1;transform:translate(10px,-10px);}
    50%{opacity:1;transform:translate(0px,-10px);}
    60%{opacity:1;transform:translate(-10px,-10px);}
    70%{opacity:1;transform:translate(-10px,10px);}
    80%{opacity:1;transform:translate(10px,10px);}
    90%{opacity:1;transform:translate(0px,10px);}
    100%{opacity:1;transform:translate(0px,0px);}
    }

     #outer-wrapper { animation:Earthquake 0.3s linear infinite; -webkit-animation:Earthquake 0.3s linear infinite; -o-animation:Earthquake 0.3s linear infinite; }

5. Selesai Klik Simpan Template
6. Hasil Lihat Blog

Selamat Memcoba, AWAS! Gempa Bumi