Tab menu terapung di kiri blog

Assalamualaikum!~

nur ikaa


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 :

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>

3. Pastekan ke dalam html javascript.

4. Save.

Hijau : Tukar code kaler di SINI
Merah : Link/url page korang
Purple : Nama page korang
Biru : boleh ubah ikut kesesuaian anda
11 Komentar untuk "Tab menu terapung di kiri blog"

terbaekkk la Ikaa.. memang nak cuba! err tapikan, ikon² yg dah sedia ada kat sebelah kiri tak tau pulak nak pindahkan kat mana.. adeh....

le jadi cikgu blogger ni..huhahuha

@Iha Zaliza hah pindahkan je kt mn pn..hihihi..:)

@Bro Nasa tertiba je dpt hasil tuto nie lepas main dgn coding, teringin sgt nak wat tab terapung, tu yang edit bg dapat jugak hihihihhi

wah terer la ika....sifuuuuuuuuuuuuuuuuuuu

thanks , lepasni boleh cuba ni xD

jadi tenaga tenaga pengaja sudah,, takpe2x,anak murid cari turorial cam sebab nak customize blog kan..hehehe tenkiu..

@Azriff91hehehe orang bosan, nie laa hasilnya..weee

wahhh..thanx..sangat membantu akak

kak ika cm ne nak hilangkan yg home page and lain2 2...sbb nak wt cm nie...^^v

Terima kasih untuk komen yang berharga anda, datang lagi.

 
Copyright © 2014 Bakul2011.com - All Rights Reserved
Template By. Catatan Info