Tutorial Tab Menu Yang Canggih

Assalamualaikum .

Tadi, Anis ada renovatekan kod Menu Tab Comel Pusing -5 deg.

Haa, canggih tak canggih la.

Aku tak tau nak panggil dia apa T^T

LIVE PREVIEW

Tengok dekat tepi belah kiri. Haa, itu lah dia.

Dashboard > Edit Html > Ctrl+f

]]></b:skin>

Copy kod aku bagi ni dan paste di ATAS dia .

/* LIST #8 */
#list8 { }
#list8 ul { list-style:none;}
#list8 ul li { font-family:Verdana; font-size:11px;margin:1px; }
#list8 ul li a { display:block; width:80px; height:28px; display: inline-block;color: #999;background-color:#EEC2FF;background-image: url('URL BACKGROUND');height:15px;width: 120px;text-align: left;
padding-left:5px;padding-top:2px;border-right: 3px solid #EEC2FF;margin-bottom:1px;margin-top:2px;-moz-border-radius: 10px 10px 10px 10px;-webkit-border-radius: 10px 10px 10px 10px; padding-left:40px;text-decoration:none; }
#list8 ul li a:hover { width: 120px;
text-align:right;
border-right: 65px solid  #EEC2FF;
padding-right:2px;
color: #111;
background-color:#FFFFFF;
-webkit-transition: 0.5s;box-shadow:10px 10px 15px #FFFFFF; }

Rose : text font

Purple : colour

Red : Url Background

Chocolate : Widht

Lepas tu, cari pulak kod ini 

</body>

Copy kod di bawah dan paste di ATAS kod tu .

<div style='display:scroll; position:fixed; top:150px; left:-40px;'>
<div id='list8'>
<ul>
<li><a href='http://www.blogger.com/home'>Home</a></li>
<li><a href='link'>tajuk</a></li>
<li><a href='link'>tajuk</a></li>
<li><a href='link'>tajuk</a></li>
</ul>
</div>
</div>

 Merah : Link .

Biru : Tajuk .

Preview dan save :) 

Komen kalau jadi / tak jadi kay .

---

THANKS FOR READING. DROP YOUR COMMENT PLEASE?

---