Membuat Tab Menu Navigator Horizontal di Blog

Kebetulan ada sobat yang nanya Bagaimana cara membuat tab menu horizontal di blog. Katanya sih newblogger tp ariiiie liat blog udah mantap bgt haha. Udah langsung saja kita pokok permasalahan. Sebenarnya bagi sobat yang sudah memakai template baru dari blogger, sudah tersedia menu horizontalnya. Sobat tinggal menambahkan widget daftar link di section bawah header atau diatas posting...
caranya :
1. Masuk ke dashboard sobat
2. pilih rancangan
3. Tambah gadget

 

Trus pilih widget daftar link

4. Lalu isikan linknya sesuai kebutuhan sobat

5. selesai.

Tapi buat sobat yang tidak menggunakan template baru dari blogger atau template modifikasi, nih ariiiie ada beberapa contoh Tab Menu Navigator Horizontal yang bisa sobat gunakan untuk memasang alamat Link pada blog. Tab Menu ini ariiiie rasa cukup mudah untuk digunakan. Caranya hampir sama dengan yang diatas tapi sobat tidak menambahkan daftar link tapi html/javascript

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

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

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

Berikut contoh Tab Menu Horizontal dan kodenya.

Navigation Menu 1

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5
• Link 6
• Link 7

Kodenya :

<style> #navcontainer { /* none needed */ } 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: #666; 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: #fff; background-color: #FE9C54; } </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 2

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5
• Link 6
• Link 7

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

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5
• Link 6
• Link 7

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/AVvXsEjGb2vD2_7edKjnppePPlvk0WB-DIZPBvdN8IG2hMbRCe2c2_Om7ygIloKJhV8xxKAbxuJnt7bfByBbV08dwDL9ua12Jg7uxsg1tEiC8iGpSHMIHoQ2oM2N5UV79UwV9kTWVA8oahr9AJU/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

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5
• Link 6
• Link 7

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/AVvXsEhQzTgCGbXGzK6_MoH988gDIAF-a9WhZTlb0p_KUHM7PCCk4BGYMnDesRMl-chPm7tK-GdQNfG5ULowiSOBef95nbuuvZVc2Ak-NGOgog5Db3mzvjO79crSrDcEXbx-fGf-2ksNpXCMgtQ/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/AVvXsEiGRERS5NIL9mjUMG1fqjd2ht20z2ts9IkP1aV3aKl5vGm7z0HBhE5rAjkbzyLcpujOpLjn0Lgn6nzD1DbJJEFbI8s-lgLwZ-w0HR5n0JY7pcEClHQqA-lW2qwnadWsmNs5n-bvA1YCVnw/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

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5
• Link 6
• Link 7

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/AVvXsEgK_VgKiBeMxe7I12nGH2ontpivByqA80opyw6QyZpOWriEJ3BNUBIsVTNrCY9IMAUmnl80oCrpn1JAV2TcBNNyW9LsAnA2Ygg88f_YRoCQlpewIt-ryIHhVTJi-m9My0lsh6GDxUIV4R4/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/AVvXsEguMlVZsgw4E3R0lEhjVaZJl91B3FuYl7n0qyAlEHbD1o7REoI0Ehd3MgyoTlK3N97g9bUxAYg7s9S_xv-wrZxZ4kDddbkSLwNhSWUhPyWrSjh_MG8MGD287DXsv5k6A7OZrc2srRjwt_U/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 sobat 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 sobat seperti contoh berikut:

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

Menjadi :

<li><a href="http://www.ariiiie.co.tv"><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.ariiiie.co.tv><span>Link 1</span></a></li>

Menjadi :

<li><a href=" http://www.ariiiie.co.tv"><span>HOME</span></a></li>

Tambahan

Buat sobat yang ingin meletakkan posting sesuai kategori di tab diatas.. tukar link(#) dengan link label sobat. 
Mislanya:

<li><a href="http://www.ariiiie.co.tv./search/label/info%20menarik">Info Menarik</a></b></li>

Kalau sobat ada yang ragu, silakan tanyakan di kotak komentar........