Tab menu terapung di kiri blog

Unknown

Assalamualaikum!~

Sebelum ini ikaa ada buat tutorial tab menu terapung ini. Tapi code tersebut hanya sesuai untuk jenis templete tertentu sahaja. So hasil bermain dengan coding, akhirnya ikaa berjaya hasilkan tab menu terapung yang kedua nie. Rasanya tab menu nie sangat simple codingnya. Xperlu edit hmtl segala. Hanya perlukan html javascript. so xperlulah korang nak pening2 kan.

Jenis tab menu :

Tab menu biasa
Tab menu --> part 2
Tab menu --> part 3
Tab menu --> part 4

1. Dashboard > Design > Add a gadget > Html javascript

2. Copy code dibawah ini.

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:140px; left:-2px;'>

<style>
    .menu-vertikal, .menu-vertikal li ul{list-style-type: none;margin: 0px;width: 145px; /*Lebar Menu*/border: 2px dashed #fff999;}
    .menu-vertikal li{position: relative;}
    .menu-vertikal li a{background: #ff99ff;font: bold 14px Verdana, Helvetica, sans-serif;color: #001111;display: block;width: auto;padding: 5px 0;padding-left: 10px;text-decoration: none;}
    .menu-vertikal li ul{position: absolute;width: 250px;display: none;}
    .menu-vertikal li ul li{float: left;}
    .menu-vertikal li ul a{width: 145px;}
    .menu-vertikal li a:visited, .glossymenu li a:active{color: white;}
    .menu-vertikal li a:hover{background: #fff999;}
    * html .menu-vertikal li { float: left; height: 1%; }
    * html .menu-vertikal li a { height: 1%; }
    </style>
    <ul id="verticalmenu" class="menu-vertikal">
    <li><a href="URL PAGE"> HOME</a></li>
    <li><a href="URL PAGE"> TUTORIAL</a></li>
    <li><a href="URL PAGE"> TIPS</a></li>
    <li><a href="URL PAGE"> SITEMAP</a></li>
    </ul>
</div>