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.

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.   AddGadget
  4. Klik plus button (+) for HTML/JavaScript. (img)

    HTML
  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

About Mahdi e

- Berbagi itu indah -

6 comments:

  1. boleh juga sob tipsnya .. cuman nambah berat ga ya

    BalasHapus
  2. wah banyak mmbantu sya skali.

    BalasHapus
  3. kalo punya saya emang ada menu navigasinya,tapi tabnya malah gak ada,yang ada hanya tulisan. Itu gimana caranya biar tampil?
    trus gimana caranya biar tabnya diganti dengan gambar sendiri? :)
    mohon bantuannya kak... :)

    BalasHapus
  4. @Pia the Cugax Girl cari kode

    .red {background:#c00;}... dst.

    kamu ganti dengan kode

    .red {background:url(http://image.jpg);}... dst.

    url(http://image.jpg) = alamat image kamu

    BalasHapus
  5. thanks. Orang Palu bilang, NABELO dan saya sudah coba di http://habbunawas.blogspot.com

    BalasHapus

Note :

Komentar yang mengandung usur pornografi / sara / kekerasan akan dihapus.
Terima kasih komentarnya...!
Semoga bermanfaat...!