belajar design blog: membuat tab menu tersembunyi

Meskipun Hidden Tab Menu ini hanya menggunakan KODE CSS, namun ternyata bisa memberikan penampilan yang sangat hebat dan memuaskan. Sangat kompatible untuk semua browser dan dapat dengan cepat aplikasikan disetiap blog.

D E M O

Langkah untuk membuat Hidden Menu Tab Menu :

1. Amankan Template terlebih dahulu! Silahkan caranya lihat di sini.

2. Tetap di Edit HTML kemudian cari KODE ]]></b:skin>.

3. Copy paste KODE CSS di bawah ini dan letakkan persis di atasnya.

KODE CSS Hidden Menu Tab Menu :

.menu {font-family: verdana; position:; font-family:verdana;margin-bottom:170px;}
.menu ul {padding:0; margin:0;list-style-type: none;}
.menu ul li {position:relative;float:left;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none;       width:30px;height:150px;
font-weight:bold;background:transparent url(http://i45.tinypic.com/14dm242.gif) top right no-repeat; text-indent:-999px;}
.menu ul li ul{visibility:hidden;position:absolute;width:250px;top:0;left:0;
border-top:40px solid #450401;border-bottom:10px solid #450401;
border-left:4px solid #450401;border-right:4px solid #450401;}
table {margin:0; padding:0; border:0; border-collapse:collapse;font-size:12px;}
/* opera - mozilla */
.menu ul li:hover a {color: #fff;width:288px;}
.menu ul li:hover ul {visibility:visible;}
.menu ul li:hover ul li a {display:block; background:#ac8d64 url(http://i45.tinypic.com/3320w06.gif);
border-right:2px solid #999999;border-left:2px solid #999999;border-bottom:1px solid #CCCCCC;
margin:0;text-indent:0;color: #fff;font-size:11px;font-weight:normal; 
height:auto; line-height:1em; padding:5px; width:236px;text-align:left;}
.menu ul li:hover ul li a:hover {background: #000 url(http://i49.tinypic.com/1079ef7.gif); color: #FF9900;}
.menu ul li a:hover {width:288px;}
.menu ul li a:hover ul {visibility:visible;}
.menu ul li a:hover ul li a {display:block;background:#ac8d64 url(http://i45.tinypic.com/3320w06.gif);
border-left:2px solid #999999;border-right:2px solid #999999;border-bottom:1px solid #CCCCCC;
margin:0;text-indent:0;color:#fff;font-size:11px;font-weight:normal; 
height:auto; line-height:1em; padding:5px; width:246px;w\idth:236px;text-align:left;}
.menu ul li a:hover ul li a:hover {background: #000 url(http://i49.tinypic.com/1079ef7.gif); color: #ff9900;}

4. KLIK Simpan Template.

5. Gunakan KODE HTML berikut di bagian body atau saat posting

xHTML Hidden Menu Tab Menu :

<div class="menu">
  <ul>
    <li><a href="http://bloggerstuars.blogspot.com" target="_blank">00</a>
      <table><tr><td>
        <ul>
            <li><a href="LinkMenu1" title="Title Link Menu1" target="_blank1">Nama Link Menu1</a></li>
            <li><a href="LinkMenu2" title="Title Link Menu2" target="_blank2">Nama Link Menu2</a></li>
            <li><a href="LinkMenu3" title="Title Link Menu3" target="_blank3">Nama Link Menu3</a></li>
            <li><a href="LinkMenu4" title="Title Link Menu4" target="_blank4">Nama Link Menu4</a></li>
            <li><a href="LinkMenu5" title="Title Link Menu5" target="_blank5">Nama Link Menu5</a></li>
            <li><a href="LinkMenu6" title="Title Link Menu6" target="_blank6">Nama Link Menu6</a></li>
            <li><a href="LinkMenu7" title="Title Link Menu7" target="_blank7">Nama Link Menu7</a></li>
            <li><a href="LinkMenu8" title="Title Link Menu8" target="_blank8">Nama Link Menu8</a></li>
            <li><a href="LinkMenu9" title="Title Link Menu9" target="_blank9">Nama Link Menu9</a></li>
            <li><a href="LinkMenu10" title="Title Link Menu10" target="_blank10">Nama Link Menu10</a></li>
            <li><a href="LinkMenu11" title="Title Link Menu11" target="_blank11">Nama Link Menu11</a></li>
            <li><a href="LinkMenu12" title="Title Link Menu12" target="_blank12">Nama Link Menu12</a></li>
            <li><a href="LinkMenu13" title="Title Link Menu13" target="_blank13">Nama Link Menu13</a></li>
            <li><a href="LinkMenu14" title="Title Link Menu14" target="_blank14">Nama Link Menu14</a></li>
            <li><a href="LinkMenu15" title="Title Link Menu15" target="_blank15">Nama Link Menu15</a></li>
            <li><a href="LinkMenu16" title="Title Link Menu16" target="_blank16">Nama Link Menu16</a></li>
            <li><a href="LinkMenu17" title="Title Link Menu17" target="_blank17">Nama Link Menu17</a></li>
            <li><a href="LinkMenu18" title="Title Link Menu18" target="_blank18">Nama Link Menu18</a></li> 
        </ul>
      </td></tr></table>
    </li>
  </ul>
</div>

Catatan :

1. Yang paling penting dri penerapan tab menu ini adalah pada penyesuaian lebar menu(width).

2. Untuk perubahan lebar silahkan lakukan perubahan pada semua nilai width pada syntax :.menu ul li ul, .menu ul li:hover a, .menu ul li:hover ul li a , .menu ul li a:hover, .menu ul li a:hover ul li a .

3. Selisih nilai width dari CSS yang tersedia bisa digunakan sebagai pembanding.

About The Author

Bie, that's my name. Im just an ordinary blogger.Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones.