TAB Menu Horisontal

Pagi cerah hanya kata salam yang terucap dari lidah tak bertulang, Awal tahun ini tepatnya tanggal 2 januari 2010 saya akan berbagai sesuatu yang pernah saya baca di blog - blog master, jadi bagi yang sudah master sory, langsung ajah dhe saya akan tulis Cara membuat Tab menu horisontal yang sederhana , 

contoh tab sederhana

kalau tertarik ? mari kita lanjut ke bagian pembuatan

1. Edit html Cari kode Berikut ]]></b:skin> kemudian copy pastekan kode di bawah ini di atas kode tersebut .

/* linktab<br /> <br /> ================== */<br /> <br /> #linktab{<br /> background:url(http://i634.photobucket.com/albums/uu61/adetea/tabhijau.gif) ;<br /> width: 864px;<br /> height: 30px;<br /> font-size: 11px;<br /> font-family: georgia, Tahoma, Verdana;<br /> color: #ffff66;<br /> font-weight: bold;<br /> margin: 0px auto 0px;<br /> padding: 0px;<br /> border-left: 1px solid #000;<br /> border-right: 1px solid #000;<br /> overflow: hidden;<br /> }<br /> #tabright {<br /> width: 200px;<br /> height: 30px;font-size: 11px;<br /> float: right;<br /> margin-right:10px;<br /> margin-bottom:50px;<br /> padding: 0px;<br /> }<br /> #tabright a img {<br /> border: none;<br /> margin: 5px;<br /> padding: 0px;<br /> }<br /> <br /> #linktab ul {<br /> margin:0;<br /> padding:1px 10px 0px 0px;<br /> list-style:none;<br /> }<br /> #linktab li {<br /> display:inline;<br /> margin:0;<br /> padding:0;<br /> }<br /> #linktab a {<br /> float:left;<br /> background:transparent;<br /> margin:0;<br /> padding:0 0 0 3px;<br /> text-decoration:none;<br /> }<br /> #linktab a span {<br /> float:right;<br /> height: 35px;<br /> display:block;<br /> background:transparent;<br /> padding:7px 6px 4px 6px;<br /> color:#ffff66;<br /> border-right: 1px solid #000;<br /> }<br /> #linktab a span {<br /> float:none;<br /> }<br /> #linktab a:hover span {<br /> color:#fff;<br /> }<br /> #linktab a:hover {<br /> background-position:0% -42px;<br /> }<br /> #linktab a:hover span {<br /> background-position:100% -42px;<br /> }
2. Untuk Warna dan background silakan atur sendiri sesuai Selera
3. kemudian cari lagi kode scrip seperti di bawah ini <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /> <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/><> ... dan seterusnya ...<> </b:section><br /> </div>

4. kemudian copy paste html dibawah ini diatas kode /b:section <div id='linktab'> <ul> <li><a href='URL Link '><span>Home</span></a></li> <li><a href='http://almansuqie-tips.blogspot.com/' target='_blank'><span>AlmansuQie</span></a></li> <li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li> <li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li> <li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li> <li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li> </ul><br /> <div id='tabright'> <form action='http://namablog anda .blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/><br /> <input id='searchsubmit' type='submit' value='Cari'/><br /> </form><br /> </div></div>
5. sekarng coba anda liat hasilnya apabila berhasil silakan save



Silakan Dicoba Semoga Berhasil