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
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
Kodenya :
#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; }
Navigation Menu 2
#navcontainer { float: left; width: 100%; background: none repeat scroll 0% 0% rgb(255, 255, 255); font: bold 7.5pt Verdana; border-bottom: 1px solid rgb(102, 89, 167); border-top: 1px solid rgb(102, 89, 167); }ul#navlist { margin: 0pt; padding: 0pt; 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: 0pt; padding: 5px 0pt 4px; background-color: rgb(102, 89, 167); border-top: 1px solid rgb(224, 237, 233); border-bottom: 1px solid rgb(224, 237, 233); }#navlist a, #navlist a:link { margin: 0pt; padding: 5px 9px 4px; color: rgb(255, 255, 255); border-right: 1px solid rgb(209, 227, 219); text-decoration: none; }ul#navlist li#active { color: rgb(149, 187, 174); background-color: rgb(209, 227, 219); }#navlist a:hover { color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); }
Kodenya :
#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; }
Navigation Menu 3
.container { width: 400px; padding: 0pt 0pt 5px; margin: 3px 0pt 10px; background: none repeat scroll 0% 0% rgb(255, 255, 255); }#nav { margin: 0pt; padding: 0pt; border-top: 3px solid rgb(95, 106, 113); }#nav li { margin: 0pt; padding: 0pt; display: inline; list-style-type: none; }#nav a:link, #nav a:visited { float: left; font: bold 7.5pt/14px verdana; padding: 9px; text-decoration: none; color: rgb(112, 132, 145); }#nav a.active:link, #nav a.active:visited, #nav a:hover { color: rgb(102, 102, 102); background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib8_Vgf2euWw37ag99hyphenhyphenzcBtuq5zI1okZ0KypzosTpis6TDgbB_zdZomkSPSJ0ztS0ZEsBlRsyA3PCls69mYnXvA01fjqXBgEtByvGI2_Rnlv0xDZeR4hFJxlOfljUs68K0lI_5P7ynQM/s1600/Inverted.png") no-repeat scroll center top transparent; border-top: 4px solid rgb(95, 106, 113); }
Kodenya :
.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/AVvXsEib8_Vgf2euWw37ag99hyphenhyphenzcBtuq5zI1okZ0KypzosTpis6TDgbB_zdZomkSPSJ0ztS0ZEsBlRsyA3PCls69mYnXvA01fjqXBgEtByvGI2_Rnlv0xDZeR4hFJxlOfljUs68K0lI_5P7ynQM/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; }
Navigation Menu 4
#tabsF { float: left; width: 100%; background: none repeat scroll 0% 0% rgb(239, 239, 239); font: bold 7.5pt Verdana; border-bottom: 1px solid rgb(102, 102, 102); }#tabsF ul { margin: 0pt; padding: 10px 10px 0pt 50px; list-style: none outside none; }#tabsF li { display: inline; margin: 0pt; padding: 0pt; }#tabsF a { float: left; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpFRSQomlxRxINgMslMj76pvsEKIig2Qb6RT7GoUua26t95PxOd83LNmy73MB8K0XESb5_TatChRRtbqPsQFGXU5jHs40-3Y_6w8_kggVSrptknKPgl7nP3IWtaoKkrt3rejIph-8yfoo/s1600/tableftF.png") no-repeat scroll left top transparent; margin: 0pt; padding: 0pt 0pt 0pt 4px; text-decoration: none; }#tabsF a span { float: left; display: block; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiams2NHOdGCYGPSr8V1_xlPtvr7qvDlJcFsbs3vbWLWNL72xOoMUfEeDr_d8ucaDLoQ_K9jpj7deIMsLKE0RM2GqI-SoYI9WzAf62PQCtQr-hyQAhiSgxzxR0HyMAx_E0qb-lLzzs7Xz4/s1600/tabrightF.png") no-repeat scroll right top transparent; padding: 5px 15px 4px 6px; color: rgb(102, 102, 102); }#tabsF a span { float: none; }#tabsF a:hover span { color: rgb(255, 255, 255); }#tabsF a:hover { background-position: 0% -42px; }#tabsF a:hover span { background-position: 100% -42px; }
Kodenya :
#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/AVvXsEjpFRSQomlxRxINgMslMj76pvsEKIig2Qb6RT7GoUua26t95PxOd83LNmy73MB8K0XESb5_TatChRRtbqPsQFGXU5jHs40-3Y_6w8_kggVSrptknKPgl7nP3IWtaoKkrt3rejIph-8yfoo/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/AVvXsEiams2NHOdGCYGPSr8V1_xlPtvr7qvDlJcFsbs3vbWLWNL72xOoMUfEeDr_d8ucaDLoQ_K9jpj7deIMsLKE0RM2GqI-SoYI9WzAf62PQCtQr-hyQAhiSgxzxR0HyMAx_E0qb-lLzzs7Xz4/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; }
Navigation Menu 5
#tabsE { float: left; width: 100%; background: none repeat scroll 0% 0% rgb(0, 0, 0); font: bold 7.5pt Verdana; }#tabsE ul { margin: 0pt; padding: 10px 10px 0pt 50px; list-style: none outside none; }#tabsE li { display: inline; margin: 0pt; padding: 0pt; }#tabsE a { float: left; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqt7aiMjZmN9vNNK63nyvVCcGe9MQiFwzusffRvLCqfOW7zV60jfevKosGcqyxI5Hh-keos1wJZdYUfzRNBF28ximBXOhYTMzVFqYtZYvFWa7azK1x5_2TqHJZhz5nysz_HOPIBp6q1uI/s1600/tableftE.png") no-repeat scroll left top transparent; margin: 0pt; padding: 0pt 0pt 0pt 4px; text-decoration: none; }#tabsE a span { float: left; display: block; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn-t-HynJIO4nUU-vLEpeBlEIlsWBT3quJer8KH1zHrBIzzVT0S1hRmONON-912AYKpXZYidn7Xy7UogZymr1Bvcs2c3zaqL1h63nYUjYlBiTaOYKYvd1UnMhhe5zbiBDfp4TUrJWKxx0/s1600/tabrightE.png") no-repeat scroll right top transparent; padding: 5px 15px 4px 6px; color: rgb(255, 255, 255); }#tabsE a span { float: none; }#tabsE a:hover span { color: rgb(255, 255, 255); }#tabsE a:hover { background-position: 0% -42px; }#tabsE a:hover span { background-position: 100% -42px; }
Kodenya :
#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/AVvXsEiqt7aiMjZmN9vNNK63nyvVCcGe9MQiFwzusffRvLCqfOW7zV60jfevKosGcqyxI5Hh-keos1wJZdYUfzRNBF28ximBXOhYTMzVFqYtZYvFWa7azK1x5_2TqHJZhz5nysz_HOPIBp6q1uI/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/AVvXsEhn-t-HynJIO4nUU-vLEpeBlEIlsWBT3quJer8KH1zHrBIzzVT0S1hRmONON-912AYKpXZYidn7Xy7UogZymr1Bvcs2c3zaqL1h63nYUjYlBiTaOYKYvd1UnMhhe5zbiBDfp4TUrJWKxx0/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; }
Untuk mengganti dan memasukan Link sobat tinggal ganti kode berikut:
Ganti kode (#) dengan halaman link sobat seperti contoh berikut:
Menjadi :
Kemudian ganti Tulisan (Link1, Link2, Link3 dan seterusnya) dengan judul halaman seperti contoh berikut :
Menjadi :
Tambahan
Buat sobat yang ingin meletakkan posting sesuai kategori di tab diatas.. tukar link(#) dengan link label sobat.
Mislanya:
Mislanya:
Tag :
Tip Trik Blogging,
tutorial
1 Komentar untuk "Membuat Tab Menu Navigator Horizontal di Blog"
bro klo ngisi tab lebih dari satu judul gmn...?
misal nambah Di TAB "TIPS&TRIK" klo klik jdul tsb mncul semua tips dan triknya,gmn tuch..?udh nyoba utak atik...g bisa juga ,