Membuat menu horizontal dengan Tab Animasi warna warni

Membuat menu horizontal dengan animasi tentu akan sangat menarik, kali ini kita coba membuat menu horizontal dengan animasi tab warna warni.

sample - blog

jenis menu ini hanya untuk single line, tidak ada drop menu.

Kita langsung ke TKP saja biar jelas
Langkah Pertama

Login ke akun Blogger kamu.
Dari halaman dashboard, pilih Edit HTML.
Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut.

#info {height:auto;}

#outer {display:block; position:relative; background:transparent; padding:2em; text-align:center; margin:40px 15px;}

#outer h2 {margin-bottom:1em;}

#navigation {background:transparent; margin:0 auto; height:3em;

/* hide overflow:hidden from IE5/Mac */

/* \*/

overflow: hidden;

/* */ }

#navigation ul {margin:0; padding:0; list-style-type:none; background:transparent;}

#navigation li {display:block; float:left; margin:0 1px;}

.snazzy {background:transparent;}

.snazzy span {text-align:center; color:#fff; margin:0; font-weight:normal;}

.b1, .b2, .b3, .b4 {display:block; font-size:1px;

/* hide overflow:hidden from IE5/Mac */

/* \*/

overflow: hidden;

/* */ }

.b1, .b2, .b3 {height:1px;}

.b2, .b3, .b4 {border-left:1px solid #fff; border-right:1px solid #fff;}

.b1 {margin:0 5px; background:#fff;}

.b2 {margin:0 3px; border-width:0 2px;}

.b3 {margin:0 2px;}

.b4 {height:2px; margin:0 1px;}

.boxcontent {display:block; border-left:1px solid #fff; border-right:1px solid #fff;}

a.menu, a.menu:visited {display:block; text-decoration:none; width:5.5em;}

a.menu:hover {background:transparent; cursor:pointer;}

a.menu:hover span {padding-top:10px; background:#888;}

a:menu:hover b {background:#888;}

.red {background:#c00;}

.orange {background:#f90;}

.yellow {background:#b8b800;}

.green {background:#090;}

.blue {background:#00c;}

.indigo {background:#309;}

.violet {background:#c6c;}

.grey {background:#888;}

a:hover b.red {background:#888;}

a:hover b.orange {background:#888;}

a:hover b.yellow {background:#888;}

a:hover b.green {background:#888;}

a:hover b.blue {background:#888;}

a:hover b.indigo {background:#888;}

a:hover b.violet {background:#888;}

.active {padding-top:10px; background:#888; cursor:default;}

#navigation2 {clear:both; background:transparent; margin:0 auto; height:3em;

/* hide overflow:hidden from IE5/Mac */

/* \*/

overflow: hidden;

/* */ }

#navigation2 ul {margin:0; padding:0; list-style-type:none; background:transparent;}

#navigation2 li {display:block; float:left; margin:0 1px;}

.pad {display:block; height:1em;

/* hide overflow:hidden from IE5/Mac */

/* \*/

overflow: hidden;

/* */ }

a.menu2, a.menu2:visited {display:block; text-decoration:none; width:5.5em;}

a.menu2:hover {background:transparent; cursor:pointer;}

a.menu2:hover .boxcontent {padding-bottom:0.8em; background:#888;}

a.menu2:hover .pad {height:0.2em;}

Simpan dan lihat hasilnya.

Keterangan :

Warna Merah, Kode untuk animasi tab arah ke bawah
Warna Hijau, Kode untuk animasi tab arah ke atas
Copy paste kode di atas secara keseluruhan warna merah dan hijau hanya menunjukan tempat untuk editing apabila kamu ingin merubah warna atau lainnya ( background, lebar menu, tinggi menu )

Langkah kedua

Klik Page Element
Klik Add Gadget
Klik plus button (+) for HTML/JavaScript. (img)
Copy and paste kode dibawah ini

Kode-1 untuk Tab animasi arah ke bawah :

Simpan dan lihat hasilnya.

Kode-2 untuk Tab animasi arah ke atas :

Simpan dan lihat hasilnya.

Keterangan :

Silahkan pilih salah satu kode yang akan kamu gunakan kode-1 atau kode 2 ( kamu bisa gunakan kedua duanya sekaligus )
Warna Merah, Nama nama menu sesuai dengan kebutuhan
Warna Hijau, Alamat URL yang akan kamu tuju sesuai dengan nama menu

________________________________________________________

Ok.. Selamat mencoba..!

Semoga bermanfaat....!!

Sumber : Web design and Assistance-css play