Menu For Beqiutors

Jumat, 18 Januari 2013

Tab Menu Cute 2

Faradina Fazira | 01.43 |
My own codes do not retutor it! aku cuma try rupanya pacak.. hehehe. terinspirasi dari ini: >> wekwekbluer <<
oke sip yg itu pake background.. kalo aku ini pake colour jadi warna warni deh :D :p


liat aja yg text nya contoh tab menu! okeh yg gak ngerti coba2x aja coding neh :S


1. Visit Ke  -> Edit HTML
2. Cari kode ini : 
]]></b:skin>
3. Copy code itu then paste di atas kode ]]></b:skin>

/*** menubar1 css mula ***/ #menubar1 { margin: 0; height:33px; padding: 3px 6px 2px; background: #dfff8a; line-height: 100%; border-radius: 0em; border-top : solid 5px #dfff8a; border-bottom : solid 5px #dfff8a; } #menubar1 li { margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; } /* main level link */ #menubar1 a { font: normal 13px Comic Sans MS; color: black; text-decoration: none; display: block; padding: 8px 20px; margin: 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; text-shadow: 0 1px 1px rgba(0,0,0, .3); } #menubar1 a:hover { background: #000; color: #000; } /* main level link hover */ #menubar1 .current a, #menubar1 li:hover > a { background: pink; url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 -40px; color: #404040; border-top: solid 1px #f8f8f8; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); box-shadow: 0 1px 1px rgba(0,0,0, .2); text-shadow: 0 1px 0 rgba(255,255,255, 1); } /* dropdown */ #menubar1 li:hover > ul { display: block; } /* level 2 list */ #menubar1 ul { font: normal 12px Arial; color:#000000; text-align:left; display: none; margin: 0; padding: 2px 2px 2px 2px; width: 185px; position: absolute; top: 35px; left: 0; background: #9EDEFA url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 0; border: solid 1px #FFB5CF; -webkit-border-radius: 10px; -mozborder-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3); } /*** menubar1 css tamat ***/

4. Save !
5. Then, copy code bawah ini

<!-- menubar1 mula -->
<ul id='menubar1'>
<li class='current'><a href='http://faradinafaziraa.blogspot.com'>CONTOH</a></li>
<li><a href='http://faradinafaziraa.blogspot.com'>TAB</a></li>
<li><a href='http://faradinafaziraa.blogspot.com'>MENU</a></li>
</ul>
<!-- Menubar1 tamat -->

6. Pergi ke design -> Page Elements -> Add A Widget -> HTML/Java Script
7. Paste code tadidi HTML/Java Script.
8. Letakkan HTML/Java Script tu di bawah header.

Tidak ada komentar: