Cara Membuat Menu Vertikal Dalam 17 Pilihan
Kali ini saya akan menerangkan Cara Membuat Menu Vertikal di Blog. Anda dapat memilih menu yang mana yang anda suka dari banyak pilihan yang diberikan. Silahkan ikuti langkah pemasangannya.- Log in ke blog anda
- Klik Rancangan
- Klik Edit HTML
- Masukkan Kode CSS di atas kode ]]></b:skin>
- Simpan Template
- Klik lagi Rancangan
- Klik Tambah Gadget
- Pilih HTML/JavaScript
- Masukkan Kode HTML ke dalamnya lalu Simpan
- Silahkan pilih mana yang anda suka
Menu 1
Kode CSS#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy8VUgoNKggS9woU2_-pbRSWaf3IQ9g19DUJw10taroqrLbZoH2CZCjMFnQNgYNQSfsvaTc1r7osCd1CGqd8CmEt0wDapq7oYnJ7_-PbZZwclIn1sAqiSC8A31dQ6wPfVcdn7onUHdz6Y/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy8VUgoNKggS9woU2_-pbRSWaf3IQ9g19DUJw10taroqrLbZoH2CZCjMFnQNgYNQSfsvaTc1r7osCd1CGqd8CmEt0wDapq7oYnJ7_-PbZZwclIn1sAqiSC8A31dQ6wPfVcdn7onUHdz6Y/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }
Kode HTML
<div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Menu 2
Kode CSS#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQIbC6IkSxS1ox4uApnx9mZMRwSoz3mvwHwtRnHkWU_0TI9fTkb3-v4tixkc14sJ5zHOHx2luHqn4Ugzu1DPyQn2ZgRzlvBXQcIRnjDJYg-uQfUHch0moc-HrrcUzmUM6VKa3-l1N8DSM/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQIbC6IkSxS1ox4uApnx9mZMRwSoz3mvwHwtRnHkWU_0TI9fTkb3-v4tixkc14sJ5zHOHx2luHqn4Ugzu1DPyQn2ZgRzlvBXQcIRnjDJYg-uQfUHch0moc-HrrcUzmUM6VKa3-l1N8DSM/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }Kode HTML<div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Menu 3
Kode CSS
<div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>Kode HTML<div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Menu 4
Kode CSS
#menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioE1x0lGfFHtc4rwNsoYDGJcVql7G9JSpkShZsMk8D-oaydPolD9JlUsdTaZOidtoduR8IzvvD49ShYrPn_vSNOzKPjysqgiqSjUoAXx5c56HeQJyXRgXGGDgrQcBcBSp9tN9uNqf-KLM/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioE1x0lGfFHtc4rwNsoYDGJcVql7G9JSpkShZsMk8D-oaydPolD9JlUsdTaZOidtoduR8IzvvD49ShYrPn_vSNOzKPjysqgiqSjUoAXx5c56HeQJyXRgXGGDgrQcBcBSp9tN9uNqf-KLM/s800/menu14.gif); padding: 8px 0 0 10px; }
Kode HTML
<div id="menu14"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Tampilan 5
Kode CSS#menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_UKbL1XheTINyFwOGjZZ6Rb3ezQqhFFDo72-zbS5iMkWmVv4Ugg0KA495ZN8yYWOe3ZPvlM9VHuG0EQESNBCgCarQ4DV7g90uyLJ7Y_GJ678P5gXgnlm82slE09ej1T9Q3tj6HlkZEo/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_UKbL1XheTINyFwOGjZZ6Rb3ezQqhFFDo72-zbS5iMkWmVv4Ugg0KA495ZN8yYWOe3ZPvlM9VHuG0EQESNBCgCarQ4DV7g90uyLJ7Y_GJ678P5gXgnlm82slE09ej1T9Q3tj6HlkZEo/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }Kode HTML<div id="menu7"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Menu 6
Kode CSS
#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIPinFdhswGS8_i5EWqyAKR7cW0X-GfFty9vvI6JPQ505DbbzK9Dhayp5PfqnAvdfqdjaVcuQUa7upJ_oKXPEd5oaw_RLL4RoMRto0g88gNuZEvw2H07gQYSKHOTdtVPiNrkriorCGSG4/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIPinFdhswGS8_i5EWqyAKR7cW0X-GfFty9vvI6JPQ505DbbzK9Dhayp5PfqnAvdfqdjaVcuQUa7upJ_oKXPEd5oaw_RLL4RoMRto0g88gNuZEvw2H07gQYSKHOTdtVPiNrkriorCGSG4/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIPinFdhswGS8_i5EWqyAKR7cW0X-GfFty9vvI6JPQ505DbbzK9Dhayp5PfqnAvdfqdjaVcuQUa7upJ_oKXPEd5oaw_RLL4RoMRto0g88gNuZEvw2H07gQYSKHOTdtVPiNrkriorCGSG4/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }Kode HTML<div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Menu 7
Kode CSS#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6C77WiFqQAHOdYZetawqrhEw2vR3TR05xfLaWVIklDllZeyTvfEzd7zg928_88dLloQ3Y8HCQYcucBO-BeK2A5uLbHcGRGsfnQ7pMfcJpyxiOIfRuL5GNONZAY7PXQESplcNzFcyMwi8/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6C77WiFqQAHOdYZetawqrhEw2vR3TR05xfLaWVIklDllZeyTvfEzd7zg928_88dLloQ3Y8HCQYcucBO-BeK2A5uLbHcGRGsfnQ7pMfcJpyxiOIfRuL5GNONZAY7PXQESplcNzFcyMwi8/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6C77WiFqQAHOdYZetawqrhEw2vR3TR05xfLaWVIklDllZeyTvfEzd7zg928_88dLloQ3Y8HCQYcucBO-BeK2A5uLbHcGRGsfnQ7pMfcJpyxiOIfRuL5GNONZAY7PXQESplcNzFcyMwi8/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }Kode HTML<div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Menu 8
Kode CSS
#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMpWIkW_x54hkMUokRSw-zSDET8LZpG-MyiTx5-SLR7VXjiwe15APlZ7C5g_GM_xBlJ2preG0MrcIMpnBO8yYBMA3TLlgDa5sJ1hxOMT-SPyHAMpjspW1CkvnhgRNtDNlPmVbxi_GObws/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMpWIkW_x54hkMUokRSw-zSDET8LZpG-MyiTx5-SLR7VXjiwe15APlZ7C5g_GM_xBlJ2preG0MrcIMpnBO8yYBMA3TLlgDa5sJ1hxOMT-SPyHAMpjspW1CkvnhgRNtDNlPmVbxi_GObws/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }Kode HTML<div id="menu12"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Menu 9
Kode CSS#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvT0AzIUZYuWMVPmCgneHplriCaxcg_3jhqV7_HcfP0vjnQ7hYp9YShRqVNkVxa6rfn60YQ-f4_v4QC4yYviA_LJaMuOx8Bi0uQx7dSdJmtb4mERnTo1JcXU1ejls7qtQwnpkf2y0oodo/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvT0AzIUZYuWMVPmCgneHplriCaxcg_3jhqV7_HcfP0vjnQ7hYp9YShRqVNkVxa6rfn60YQ-f4_v4QC4yYviA_LJaMuOx8Bi0uQx7dSdJmtb4mERnTo1JcXU1ejls7qtQwnpkf2y0oodo/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvT0AzIUZYuWMVPmCgneHplriCaxcg_3jhqV7_HcfP0vjnQ7hYp9YShRqVNkVxa6rfn60YQ-f4_v4QC4yYviA_LJaMuOx8Bi0uQx7dSdJmtb4mERnTo1JcXU1ejls7qtQwnpkf2y0oodo/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }Kode HTML<div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Menu 10
Kode CSS#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguoi5-Sbo49MhmqnGSz-WHrgSXJKPey1eeOwxc1cVBGeVQSZUNV8GbPDXdh9RDpNRg_72GVMGgVcrPOqkpzSXGl6w9uiCZDHV5UzhwBnTeW7wTxGSzDuxA2rEXqOSveAKYbNueFl1Axis/s800/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover, #menu8 li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguoi5-Sbo49MhmqnGSz-WHrgSXJKPey1eeOwxc1cVBGeVQSZUNV8GbPDXdh9RDpNRg_72GVMGgVcrPOqkpzSXGl6w9uiCZDHV5UzhwBnTeW7wTxGSzDuxA2rEXqOSveAKYbNueFl1Axis/s800/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguoi5-Sbo49MhmqnGSz-WHrgSXJKPey1eeOwxc1cVBGeVQSZUNV8GbPDXdh9RDpNRg_72GVMGgVcrPOqkpzSXGl6w9uiCZDHV5UzhwBnTeW7wTxGSzDuxA2rEXqOSveAKYbNueFl1Axis/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }Kode HTML<div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Menu 11
Kode CSS#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfKHVw14Mo87bn4HAogZKGpTk2cMq2QYWiIGEw8I6IvgLGIWhXb4XlAAtjc2tquRCzZC_WoiaVYkxiMw3znNYPnpAICPle0IFpNF_Ed4Pl8AkW3BBGdS9gt6drGuEks1M9vLcnctEF9fo/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfKHVw14Mo87bn4HAogZKGpTk2cMq2QYWiIGEw8I6IvgLGIWhXb4XlAAtjc2tquRCzZC_WoiaVYkxiMw3znNYPnpAICPle0IFpNF_Ed4Pl8AkW3BBGdS9gt6drGuEks1M9vLcnctEF9fo/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }Kode HTML<div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Menu 12
Kode CSS#menu9 body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3RSZ4lpa_Y1Fqt8PteeiuyBCP1fbDumKbK0vn6Q9ZXlp37JTNj-VRIH4e2nrrm6YwO2YqI6FPwwN-mFaT75rmzIRq9n4Ao46MbseagMUh3DytE0PcEJB6JfHUrLETb37g2I6AD_1Amtk/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3RSZ4lpa_Y1Fqt8PteeiuyBCP1fbDumKbK0vn6Q9ZXlp37JTNj-VRIH4e2nrrm6YwO2YqI6FPwwN-mFaT75rmzIRq9n4Ao46MbseagMUh3DytE0PcEJB6JfHUrLETb37g2I6AD_1Amtk/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }Kode HTML<div id="menu1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Menu 13
Kode CSS#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfKHVw14Mo87bn4HAogZKGpTk2cMq2QYWiIGEw8I6IvgLGIWhXb4XlAAtjc2tquRCzZC_WoiaVYkxiMw3znNYPnpAICPle0IFpNF_Ed4Pl8AkW3BBGdS9gt6drGuEks1M9vLcnctEF9fo/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfKHVw14Mo87bn4HAogZKGpTk2cMq2QYWiIGEw8I6IvgLGIWhXb4XlAAtjc2tquRCzZC_WoiaVYkxiMw3znNYPnpAICPle0IFpNF_Ed4Pl8AkW3BBGdS9gt6drGuEks1M9vLcnctEF9fo/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }Kode HTML<div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Menu 14
Kode CSS#menu11 ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border: none; } #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfFoO8fD1eAV8eKAtKKarP8krnhtuuGtfklitI9K-MJ5hzptuPXqqVLCBITH_Uj1gRsA-qlj5SkrqNXCFgqlCjr6azPEPUwOqO99ZLwb0l9FWY1loUHYsuamORE-m5AKR4tutQzjk_T8s/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfFoO8fD1eAV8eKAtKKarP8krnhtuuGtfklitI9K-MJ5hzptuPXqqVLCBITH_Uj1gRsA-qlj5SkrqNXCFgqlCjr6azPEPUwOqO99ZLwb0l9FWY1loUHYsuamORE-m5AKR4tutQzjk_T8s/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }Kode HTML<div id="menu11"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Menu 15
Kode CSS#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge2y9SqwGQjj9dIQY-l1E5mP8m7bfBaDeZz5m_TfavR-KHIJ3KRWBZwpWqjxP56ad7rAuNG6YVbCXr8zX1EGIYL1b5vfxKKjL4_Ovh1Obq41QEYVafnIusv7KWmA9oGBSm6zNIouVw8jk/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:hover, #menu5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge2y9SqwGQjj9dIQY-l1E5mP8m7bfBaDeZz5m_TfavR-KHIJ3KRWBZwpWqjxP56ad7rAuNG6YVbCXr8zX1EGIYL1b5vfxKKjL4_Ovh1Obq41QEYVafnIusv7KWmA9oGBSm6zNIouVw8jk/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge2y9SqwGQjj9dIQY-l1E5mP8m7bfBaDeZz5m_TfavR-KHIJ3KRWBZwpWqjxP56ad7rAuNG6YVbCXr8zX1EGIYL1b5vfxKKjL4_Ovh1Obq41QEYVafnIusv7KWmA9oGBSm6zNIouVw8jk/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }Kode HTML<div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Menu 16
Kode CSS
#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit4uY2QUPETqU6mCTI-guRiVDwLW4Ak0_OqfPgf8mU5hK6oFWLkP4EOA40Av1AK7lMKtvqlD0Nt-dCRT4wAI10FyDO6OcRvrbdD8LMvuGpZb7WFnfCDbGNMCqh_U3XQenFIqYVi1qEt8U/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit4uY2QUPETqU6mCTI-guRiVDwLW4Ak0_OqfPgf8mU5hK6oFWLkP4EOA40Av1AK7lMKtvqlD0Nt-dCRT4wAI10FyDO6OcRvrbdD8LMvuGpZb7WFnfCDbGNMCqh_U3XQenFIqYVi1qEt8U/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }
Kode HTML
<div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Menu 17
Kode CSS#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOa98afFVymrVbC-ssZ02Tm38G0j0MKaMV03lqjKslj49jk2JUvw_ip8LKUmxI1mTD2_0PmIkygB4e0ThqJ_aGkaae-KyPW4ipH3P3oUXGAxhLFkESyaYtHmZs6YWG-pk4eyHIN78kM1E/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOa98afFVymrVbC-ssZ02Tm38G0j0MKaMV03lqjKslj49jk2JUvw_ip8LKUmxI1mTD2_0PmIkygB4e0ThqJ_aGkaae-KyPW4ipH3P3oUXGAxhLFkESyaYtHmZs6YWG-pk4eyHIN78kM1E/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }Kode HTML<div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
- Jangan lupa Simpan
- Selamat Mencoba dan Sukses Selalu
0 comments:
Post a Comment