Membuat Animasi Led Pada Blog dengan CSS

Blogger Tips : Membuat Animasi Kit Led Pada Blog

Blogger Tips kali ini saya akan membahas tentang bagaimana caranya untuk membuat Animasi Kit Led atau sebuah animasi yang berupa beberapa lampu led yang berjalan bolak balik, untuk contohnya anda bisa lihat dibawah ini..

Untuk membuat sebuah Animasi Led seperti diatas pada template blog anda.caranya adalah sebagai berikut :
1. Masuk pada menu Template kemudian klik Edit HTML
2. Pada edit html anda cari kode seperti ini ]]></b:skin>
3. Kemudian Copy kode CSS dibawah ini lalu letakan kode tersebut diatas kode ]]></b:skin>

Code CSS :

.kotak{background:black;text-align:center;float:left;width:100%;margin:0;padding:0}

.barlittle{background-color:#c30000;background-image:0;border-left:1px solid #111;border-top:1px solid #111;border-right:1px solid #333;border-bottom:1px solid #333;width:32px;height:20px;float:left;margin-left:5px;opacity:0.1;-moz-transform:scale(0.7);-webkit-transform:scale(0.7);-moz-animation:move 1s infinite linear;-webkit-animation:move 1s infinite linear}

#block_1,#block_10{-moz-animation-delay:.1s;-webkit-animation-delay:.1s}

#block_2,#block_6{-moz-animation-delay:.2s;-webkit-animation-delay:.2s}

#block_3,#block_7{-moz-animation-delay:.3s;-webkit-animation-delay:.3s}

#block_4,#block_8{-moz-animation-delay:.4s;-webkit-animation-delay:.4s}

#block_5,#block_9{-moz-animation-delay:.5s;-webkit-animation-delay:.5s}

@-moz-keyframes move{

0%{-moz-transform: scale(1.1);opacity:1;}

100%{-moz-transform: scale(1.1);opacity:0.0;}

}

@-webkit-keyframes move{

0%{-webkit-transform: scale(1.1);opacity:1;}

100%{-webkit-transform: scale(1.1);opacity:0.0;}

}

Keterangan :
silahkan anda sesuaikan kode yang saya beri warna biru ini width:32px;height:20px; sesuai dengan yang anda inginkan agar tampilan animasi Lednya bisa terlihat pas.

4.Setelah itu klik Simpan Template
5. Masuk ke Tata Letak kemudian tambah gadget Html/Javascript
6. Copy Code Xhtml dibawah ini pada gadget Html/Javascipt yang anda pilih tadi

Code Xhtml :

<div class='kotak'>
<div class='barlittle' id='block_5'></div>
<div class='barlittle' id='block_4'></div>
<div class='barlittle' id='block_3'></div>
<div class='barlittle' id='block_2'></div>
<div class='barlittle' id='block_1'></div>
<div class='barlittle' id='block_10'></div>
<div class='barlittle' id='block_6'></div>
<div class='barlittle' id='block_7'></div>
<div class='barlittle' id='block_8'></div>
<div class='barlittle' id='block_9'></div>
</div>

7. klik Simpan dan buka Blog anda untuk melihat hasilnya

Selamat mencoba dan semoga Artikel ini bermanfaat bagi anda.