show all

Senin, 29 November 2010

Membuat Tab Menu Navigator Horizontal di Blog

Berikut ini beberapa contoh Tab Menu Navigator Horizontal yang bisa anda gunakan untuk memasang alamat Link pada blog. Tab Menu ini saya rasa cukup mudah untuk digunakan, karena kita tinggal paste pada gadget dan meletakannya pada halaman HTML/JavaScript dan bisa anda pasangan dibagian bawah Header atau dibagian yang anda inginkan.

Kode ini sudah banyak digunakan, mungkin untuk para blogger senior hal ini sudah tidak asing lagi. Disini saya hanya ini berbagai dan menyimpannya bila dikemudian hari saya membutuhkan lagi. Kode ini saya dapat dari berbagai sumber, dan mohon maaf saya lupa lagi link sumbernya.

Untuk anda yang memerlukan silahkan pergunakan di blog anda, dan ikuti tata cara memasangnya yang akan saya jelaskan berikut ini :

Log in pada blogger anda, pada dasbor klik Tata Letak kemudian klik Elemen Halaman, Klik Tambah Gadget, Pilih tambah HTML/JavaScript lalu Copy semua kode tab yang anda inginkan dan paste pada kolom tersebut. Klik simpan dan lihat hasilnya.

Berikut contoh Tab Menu Horizontal dan kodenya.

Navigation Menu 1

Kodenya :

Navigation Menu 2

Kodenya :

<style> #navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #666; background-color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Navigation Menu 3

Kodenya :

<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzNr3JCzmO-O3SDWaiXFYprbsuvQkVVyt1mAyGWzHX240K8H_veDWaiejRpusJqVruDmMQA9_eezyBybVqqyAsPRiKGxyaa4dDFnR57KzdRez8YXzJSKSYTY_-LoL0iaG4vOK75mepN2Q/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Navigation Menu 4

Kodenya :

<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB-6isw4DB2RQqWHx67Y4-GR7h0Uj5hB8ImBNPiocXihVC_TsnrVegtAul303mlG1ALX1RBdP7C06aT4UjqH6YV3U2I304r8aYLsByZVgIiXt9qRJunjHCTCYsIy2Cr6ahA3syuHhQUoU/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAeYwpJoGStV4oNHuaFt-rsRwF5PzfubL2zkDl9VCSGHfxBRPNTHHgHI7ZccS2CW1nsNmpRVVtgMOKnwe11d2DBI27lbI1nFv0SchundSTCU33CoYcrAGo3Qc95tKN3qUVzJ6XfZvLwPs/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Navigation Menu 5

Kodenya :

<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNVviD7Qw1PVeoIOTaRM9JngkDklI0hvV_VHSo8HLtNV37BGinCejLA7Pviu2Ne7zVN4x1vnwmR3HWb6Ro66Dkz0NCcr-OUh-Q8vTwZusiLCTHYbMHRUxTaW2yeQEaobQhjnRGemGcGR0/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih0-CjDt2tYaVBIH92kGmrD0C7P_5Xu_130vgSa1OjLxSiH9itVfClsYQIZolX4jFV2fCkebBIMJXOQjJ52UwbpV2kjf_N54UyJhso9d7OL9o2CvtqhDDmsO5NcV_O4c1vuWt4JxfBJ48/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk mengganti dan memasukan Link anda tinggal ganti kode berikut:

<li><a href="#"><span>Link 1</span></a></li>

<li><a href="#" ><span>Link 2</span></a></li>

<li><a href="#" ><span>Link 3</span></a></li>

<li><a href="#" ><span>Link 4</span></a></li>

<li><a href="#" ><span>Link 5</span></a></li>

Ganti kode (#) dengan halaman link anda seperti contoh berikut:

<li><a href="#"><span>Link 1</span></a></li>

Menjadi :

<li><a href="http://www.vrinia.blogspot.com"><span>Link 1</span></a></li>

Kemudian ganti Tulisan (Link1, Link2, Link3 dan seterusnya) dengan judul halaman seperti contoh berikut :

<li><a href="http://www.vrinia.blogspot.com"><span>Link 1</span></a></li>

Menjadi :

<li><a href=" http://www.zeus-osiris.co.cc "><span>HOME</span></a></li>

Untuk menambahkan atau menghapus sebuah tab, sobat tinggal menambahkan atau menghapus bagian baris kode berikut yang diawali <li> dan diakhiri </li> :

<li><a href="#" ><span>Link 1</span></a></li>

Mudah-mudahan apa yang telah disampaikan tadi bisa bermanfaat bagi kita semua. Selamat Mencoba.

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)