Cara Membuat Navigasi menu Dengan Warna

Menu navigasi atau menu tab adalah jantung dari setiap halaman web atau blog. Ini menyediakan cara jalan untuk semua halaman penting dari situs web. jadi bisa juga untuk memudahkan pengunjung untuk mencari kategori-kategori yang mereka cari .

Untuk menambahkan menu navigasi yang dipilih ke template blogger Anda ikuti langkah berikut:

1. Masuk  Blogger> Tata Letak

2. Klik Tambah Gadget atau Tambah elemen Halaman

3. Pilih HTML / JavaScript widget

4. kemudian Paste Menu Navigation Kode dalam HTML / JavaScript widget

n Simpan

5. Tarik HTML / JavaScript widget dan letakan hanya di bawah header Blog Anda.

Untuk mengubah link, Edit ini bagian dari HTML di seluruh kode di bawah ini,

<li> <a href="#"> <span> Link 1 </ span> </ a> </ li> <a href="#" <li>> <span> Link 2 </ span> </ a> </ li> <a href="#" <li>> <span> Link 3 </ span> </ a> </ li> <a href="#" <li>> <span> Link 4 </ span> </ a> </ li> <a href="#" <li>> <span> Tautan 5 </ span> </ a> </ li> <li> <a href = "#" > <span> Tautan 6 </ span> </ a> </ li> <a href="#" <li>> <span> Tautan 7 </ span> </ a> </ li>

Ganti tanda (#) hash dengan Anda Page Link / URL dan ganti Link1, Link2, Link3 dll dengan Judul Halaman Anda. Jika Anda ingin menambah atau menghapus tab maka cukup menambahkan atau menghapus baris ini,

<li> <a href="#"> <span> Tautan n </ span> </ a> </ li>

Berikut adalah kode-kode navigasi menu dengan contoh demo gambar nya.

Code : 1

<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-EDanLyRglvB2Xwo6FqPgLDgXnxp70jYur6D1zo7qV_wTEqxHqdKGWFcnHdkYMKX56zeba7DRyPW7f-E_-j0DZL00II1WiQvmBljBuVKWTN9LmFFsxH-7WHJ9VslLs3Aw6Fr71cEiyQY/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieTzElHxTolIoVGrwrPx_Z4FAPkqPqRjy_D7gx5cNWTLp81hBYVFCBd_SyH2GoE0L02S3lTqBzcIVlaXse40Y0DKvnmJ5hLL7BnGJ__0ByOzng1B3RCM_GtTGw9BdMhl2OzBHUreYymmg/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"> <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>

Code : 2

<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/AVvXsEhi4wvnGFLBXUv865YiLQSgpIv_UYK0qTY3fKBMW_HPU10U18R84MCcWoF2cDw0s-EOKLR8PDIoiN7bIJYM2S_ALWsGLkEAklz9Nd5MS5gQb6BtotJacLv6kGlb-4_MdK_D7sPz4kOacrQ/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/AVvXsEjmd75pqjgM6Fh5cieuqn0QIHym85tquN_OX3-BfdKRZeKdvNLoEfQ3B14W9_rbd009DnZEMq46JpELRnLT5YxT6qJdlfMSRRTgqW1JOhMtiljg1VQso2lPSX7YLRhzLYKft86dsylPfBo/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>

Code : 3

<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/AVvXsEiWpFSYt2eHVNdy90mLYTcTU0O7gAZUJKFS8VxQzFoiQX5G31SKQsynbg1_YDnP47rbHc7PxyVfiDZnb9yB4kW2mQ3s5fJnnT0yAsW7B-xfqyT4W5XmgEUXzAu3rdCM4RRB-jei2jqUrQk/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/AVvXsEg3F6JzhLLERp9fBR_QoIxWY-WgWeLBjjD21vVKioHyMV_dwCEHgJDOEZmhNRALa6tmijkdpL8C2_m3wf4pMEk1iIBsh1nNbqwTX5nyKGLliQomOc9lIbybhn3sPUZgkFtz-u01vGJrW0s/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>

Code : 4

<style> #tabs12 img { border: none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVZvTu34zHeIyZRh_TF_fhC6ghSW4C0cWwxuJVbTcn9KTMdly3JAbmjMJOduKh7bTIPPSUDoOWsWFhgM6DsOTimTS8avjQ5M69pG_G2Q1jS7aAJ02kc-SiUx5WZyDW0lBsknA8qPJ7Yl4/s1600/tableft12.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs12 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJnIXBJV7Zm1QuhkccZ0OuId9n9ACLIfHqnhxrcpbuwkbyqDc5d5bQGU86llB95T0saTRb5Qb496Ep20sST2oBdH-CmisRD383WND-v5dQbs8lj0qlNW3QzJbso58YheUKIbUprSwPz_U/s1600/tabright12.png) no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span {float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; } #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span { background-position:100% -42px; } #tabs12 #current a { background-position:0% -42px; } #tabs12 #current a span { background-position:100% -42px; } </style> <div id="tabs12"> <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>

Code : 5

<style> #tabs10 img { border: none; } #tabs10 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWBv9f9EteXGyoPNu_Q9JETXpJmkulUvhTZFXzaV4Z5yMGjxEUeqO6Qow4SLQUUHP99_Ty-oX7HV1VjppxxN7im_fT5jMsBBH1EzC1mDXWoc4_GhfFkZARuPdbFQiL2dlk8o7H1OjD6NI/s1600/tableft10.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjin982ynevVaucRPhzA7GM-q9xD2-jYBH4N2f9LL08nKc0EDr-n1hWUOABiUkVE7z9sv243C8NxSOXv7h850LMg9ivWjShC5PeYvvNPc40AUAnTdN7lYq-LqkZDVejtPKRS1Dm3S35Kek/s1600/tabright10.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; } </style> <div id="tabs10"> <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>

Code : 6

<style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline; margin:0; padding:0; } #tabs9 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3VCI8Rr-Bppmbv5IDHu-h_bn4QBX6ws9bznDbPipD0EF9VI7_4l36yOEiIPFuCpt1icsVoRu8yWRiVwbLK95w79JulbgdSyOm8fkpbBmElOZ7FG-MxwAL1rM1HsvDnCUyUjFLxNj7x7g/s1600/tableft9.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNXuaroldVaxnotlLM0HUE5h1YEn01TLVl643Xsl_DksPizL_fuLeUi3W7pLtLcJHp6iyMNGgwzU9G_1NyVxr2Vuliev0qiRSlTb-9MzbEv23QAvS6yLzIDWS6OFhalugC0JYlRiLcHuM/s1600/tabright9.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background-position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0% -42px; } #tabs9 #current a span { background-position:100% -42px; } </style> <div id="tabs9"> <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>

Code : 7

<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_5RM18HCkLjAg6hs8i-WBG1qs4v63P18VT4G130O4qx3pLRtEpGBs0VupwRfF1EU0TSjHo6OM7pp-c37m_lBPnWIRQEVctsdlblE3XFlffFco0V1pLIQrOgCP_J51me_h0pfhl5_A6wg/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivvUGNEYJDC9Mo1c1tKcPWXUuHfQTZ0dOJFYjstaS5zbAlniZZV5vMTdwcksgqCIzoT5SahgzVopP4yUMqIf0sOgtPA4BSNLYlhl7PbfvXlvyKd4eLmBwZyV6n3Kf8QDYYgXekRR6OCNA/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"> <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>

Code : 8

<style> #tabs8 img { border: none; } #tabs8 { float:left; width:100%; background:#FCF1F6; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #E276A7; } #tabs8 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs8 li { display:inline; margin:0; padding:0; } #tabs8 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBeGWcCKSc8kAFB6C0wb9C4vSEbjXFJEGLtDsU3TIgMW19pN9PTcEeXMEFqfDBF_3bVPYCw-oVmmNx3SKrMTK6brp7Xo-YI3WmtCVTpi0_v_p6zvzJ4Pkbg9fEP4rimuWPYOzlLzIFdk4/s1600/tableft8.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs8 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOv9DYjxpTsP9QofhhUmIt0w_LcNHatqTlU7JAXL00HxQ9ti7_sBGu9fjMTyZAP-aTxCL7yVfN41CzNqwD2iZQ2YpzT0UMtNbRqHCdIGiLXlIOs9Uvl-OA6auyFiiyCvVF_BXPiZLJeYI/s1600/tabright8.png) no-repeat right top; padding:5px 15px 4px 6px; color:#333; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs8 a span {float:none;} /* End IE5-Mac hack */ #tabs8 a:hover span { color:#591333; } #tabs8 a:hover { background-position:0% -42px; } #tabs8 a:hover span { background-position:100% -42px; } #tabs8 #current a { background-position:0% -42px; } #tabs8 #current a span { background-position:100% -42px; } </style> <div id="tabs8"> <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>

Code : 9

<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdftvFOh4nlYqRgaPy3Sah9su0Uw0LaVlgjTjeKIi3J_TT0UyXsicOthMe59-fI8NKqiV73-x9fUcZvT_kKDbkH8yvVJTm25uPGVh5JSajsS_FyRePgPFwE5SfbgNgqsB7M-qVeslRC8E/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFDXesG200QrqBZLOY85RgHuBgWI7K42gqzSypcYdUk5ABkYgV2yzNhJU8mguASKPEtrw-2SxPF6ufRWzowVqMdWtG-B6guOqxJxHsGS_q39DURL1ByUcCjjoC2oAvNLUbj5PrKyLi64A/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <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>

Jika kode diatas tidak bekerja dengan semestinya silahkan copy dan masukan kode dibawah ini tepat diatas
]]></b:skin>
melalui edit template / edit HTML
khusus untuk membuat menu navigasi dropdown menu . cara membuat nya bisa dilihat

Code : 10

/*----- MBT Drop Down Menu ----*/ #mbtnavbar { background: #060505; width: 960px; color: #FFF; margin: 0px; padding: 0; position: relative; border-top:0px solid #960100; height:35px; } #mbtnav { margin: 0; padding: 0; } #mbtnav ul { float: left; list-style: none; margin: 0; padding: 0; } #mbtnav li { list-style: none; margin: 0; padding: 0; border-left:1px solid #333; border-right:1px solid #333; height:35px; } #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #mbtnav li a:hover, #mbtnav li a:active { background: #BF0100; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; } #mbtnav li { float: left; padding: 0; } #mbtnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #mbtnav li ul a { width: 140px; } #mbtnav li ul ul { margin: -25px 0 0 161px; } #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul { left: -999em; } #mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul { left: auto; } #mbtnav li:hover, #mbtnav li.sfhover { position: static; } #mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited { background: #BF0100; width: 120px; color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px dotted #333; } #mbtnav li li a:hover, #mbtnavli li a:active { background: #060505; color: #FFF; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; }

setelah menaruh kode di atas masukan kode dibawah ini melalui Add Gadget

Code : 11

<div id='mbtnavbar'> <ul id='mbtnav'> <li> <a href = ' # '> Rumah </ a> </ li> <li> <a href = ' # '> About </ a> </ li> <li> <a href = ' # '> Kontak </ a> </ li> <li> <a href = ' # '> Sitemap </ a> <ul> <li> <a href = ' # '> Halaman Sub # 1 </ a> </ li> <li> <a href = ' # '> Halaman Sub # 2 </ a> </ li> <li> <a href = ' # '> Halaman Sub # 3 </ a> </ li> </ ul> </ li> </ ul> </ div>

Ganti # dengan Link halaman Anda dan teks tebal dengan nama halaman yang relevan. Kode disorot kuning bertanggung jawab untuk menu drop down. Anda dapat menyalin dan tempel di bawah setiap tab yang Anda inginkan sebelum </ li>
Untuk menambahkan tab lain hanya menyisipkan kode ini di atas </ ul>


Jika ingin menggunakan menu dropdown yang dilengkapi dengan kotak pencarian silahkan lihat Di Sini

Download kode jika tidak bisa copy code dibawah ini

Atau bisa copy Disini