Saturday, 1 September 2012

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
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 .

2 comments:

farhan irfan said...

ANYWAY KAK SAYA PUNYA JADI ,, BTW SAYA NAK CARI INTERESTING PICTURE LINKS MINTAK TUTOR DARI AKAK LAH EIH HEHEHEH :D PEACE NO WAR

♥ Anis said...

Sorry, Picture Links yang macam dalam blogskin tu ke? Akak kurang jelaslah, dik :)