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

 

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

1. Klik Page Element


2. Klik Add Gadget


3.  
   


4. Klik plus button (+) for HTML/JavaScript. (img)
   
   
   


5. Copy and paste kode dibawah ini

Kode-1 untuk Tab animasi arah ke bawah :

<div id="info">
<div id="outer">
<div id="navigation">
<ul>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent red">1</span>
<b class="b4 red"></b><b class="b3 red"></b><b class="b2 red"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent orange">2</span>
<b class="b4 grey"></b><b class="b3 grey"></b><b class="b2 grey"></b><b class="b1"></b>
</b></a>
</li>
<li>

<a class="menu" href="#"><b class="snazzy"><span class="boxcontent yellow">3</span>
<b class="b4 yellow"></b><b class="b3 yellow"></b><b class="b2 yellow"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent green">4</span>
<b class="b4 green"></b><b class="b3 green"></b><b class="b2 green"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent blue">5</span>
<b class="b4 blue"></b><b class="b3 blue"></b><b class="b2 blue"></b><b class="b1"></b>
</b></a>
</li>

<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent indigo">6</span>
<b class="b4 indigo"></b><b class="b3 indigo"></b><b class="b2 indigo"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent violet">7</span>
<b class="b4 violet"></b><b class="b3 violet"></b><b class="b2 violet"></b><b class="b1"></b>
</b></a>
</li>
</ul>

</div> <!-- end of navigation --></div></div>

Simpan dan lihat hasilnya.

Kode-2 untuk Tab animasi arah ke atas :

<div id="navigation2">
<ul>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 red"></b><b class="b3 red"></b><b class="b4 red"></b><span class="boxcontent red">1</span>
</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 orange"></b><b class="b3 orange"></b><b class="b4 orange"></b><span class="boxcontent orange">2</span>
</b></a>
</li>
<li>

<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 yellow"></b><b class="b3 yellow"></b><b class="b4 yellow"></b><span class="boxcontent yellow">3</span>
</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 green"></b><b class="b3 green"></b><b class="b4 green"></b><span class="boxcontent green">4</span>
</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 blue"></b><b class="b3 blue"></b><b class="b4 blue"></b><span class="boxcontent blue">5</span>
</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 indigo"></b><b class="b3 indigo"></b><b class="b4 indigo"></b><span class="boxcontent indigo">6</span>

</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 violet"></b><b class="b3 violet"></b><b class="b4 violet"></b><span class="boxcontent violet">7</span>
</b></a>
</li>
</ul>

</div> <!-- end of navigation2 -->
<!-- end of outer -->

<!-- end of info -->

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