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/AVvXsEiNdsx2YPU9b7VNLtdMLXP9vMpVcsqaZOcdlAxePaftrGrpgJm-7eg4bJoVxsvP97oAn-ut0jleqQ60sJuvt44Z4CZLeIFBxyIXfUDL83Qt4KNEG6tsSc0HKY-Wumq_Yzdsjao6tgn28_A/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNdsx2YPU9b7VNLtdMLXP9vMpVcsqaZOcdlAxePaftrGrpgJm-7eg4bJoVxsvP97oAn-ut0jleqQ60sJuvt44Z4CZLeIFBxyIXfUDL83Qt4KNEG6tsSc0HKY-Wumq_Yzdsjao6tgn28_A/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/AVvXsEiKH4A21QPQ6IpX0PVuRYlktf72DdviCtUKL-NUWFWerU3cTQNsUyvjKM0LIJS4seSw6TVvBaP5KlerRtexChtMQ_PRqah3Nb058uil6_uuaX040O9LvCs089CD99K55v4dhyphenhyphencW2iefJRA/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/AVvXsEiKH4A21QPQ6IpX0PVuRYlktf72DdviCtUKL-NUWFWerU3cTQNsUyvjKM0LIJS4seSw6TVvBaP5KlerRtexChtMQ_PRqah3Nb058uil6_uuaX040O9LvCs089CD99K55v4dhyphenhyphencW2iefJRA/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/AVvXsEgKIAlafm8E_Q-QbwzximFEZ9QABDzHW711nxVbtmpkCpIVCER0nfvrFjr4nqHAtzm7-ooRo1OFO5A5OpaNqKefsVbGm1bLB5OeYkan4d6by-Dr9KDEUKU_kL-h9nT1iweildrP74wAagQ/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/AVvXsEgKIAlafm8E_Q-QbwzximFEZ9QABDzHW711nxVbtmpkCpIVCER0nfvrFjr4nqHAtzm7-ooRo1OFO5A5OpaNqKefsVbGm1bLB5OeYkan4d6by-Dr9KDEUKU_kL-h9nT1iweildrP74wAagQ/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/AVvXsEgeVEZnizB2cWKw3mki2xxsap3Li-ZhVOxMiGeU6p7u3_aIxgqFTL040RRE9k4PQfOkl4C8J5ScPkMwWvwLkRK4R_UBer5bgZtVxX83wENQ05EZoeUkY6lvVs5VXVVUtQYtny1mxF6JIGc/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeVEZnizB2cWKw3mki2xxsap3Li-ZhVOxMiGeU6p7u3_aIxgqFTL040RRE9k4PQfOkl4C8J5ScPkMwWvwLkRK4R_UBer5bgZtVxX83wENQ05EZoeUkY6lvVs5VXVVUtQYtny1mxF6JIGc/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/AVvXsEjwqo2StxLoDaLmSEKpPhb4rWKekeSoJIjifSBuU-HVCSX93jxJIiNix0xStG8InocHAGeYjSxQ04L2x76cAyXLMbzOQhlbXqG2sasIvF_1wu93M4FE6IVFbc5MeBVVgt5J_xMDk01ziVo/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/AVvXsEjwqo2StxLoDaLmSEKpPhb4rWKekeSoJIjifSBuU-HVCSX93jxJIiNix0xStG8InocHAGeYjSxQ04L2x76cAyXLMbzOQhlbXqG2sasIvF_1wu93M4FE6IVFbc5MeBVVgt5J_xMDk01ziVo/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/AVvXsEjwqo2StxLoDaLmSEKpPhb4rWKekeSoJIjifSBuU-HVCSX93jxJIiNix0xStG8InocHAGeYjSxQ04L2x76cAyXLMbzOQhlbXqG2sasIvF_1wu93M4FE6IVFbc5MeBVVgt5J_xMDk01ziVo/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/AVvXsEgkLYY_3ZNmJ6_1cSnrqjjX31KbkOXcyI88QxDXkwl29jG_DWiMuNesezb37PHlwqjXuY-rd62zmyEmOJl0cXfKdtrZjJ_jYy6EYE9vpt8SrewW_IF8Hn8bb3o88v5DX5BSGxBUBRekUC8/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/AVvXsEgkLYY_3ZNmJ6_1cSnrqjjX31KbkOXcyI88QxDXkwl29jG_DWiMuNesezb37PHlwqjXuY-rd62zmyEmOJl0cXfKdtrZjJ_jYy6EYE9vpt8SrewW_IF8Hn8bb3o88v5DX5BSGxBUBRekUC8/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/AVvXsEgkLYY_3ZNmJ6_1cSnrqjjX31KbkOXcyI88QxDXkwl29jG_DWiMuNesezb37PHlwqjXuY-rd62zmyEmOJl0cXfKdtrZjJ_jYy6EYE9vpt8SrewW_IF8Hn8bb3o88v5DX5BSGxBUBRekUC8/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/AVvXsEiZthxd3JI3dG7mSvn0pkks0P63zuEP4SiEBsNniT-yg8czCvnaz6s-G4VnLr4_VuDLHWizhGFxWZfQIUsNy31RTdkHNb_f_gbGSgxU0-_zzHkEtlOu0RYbyYhp9xEfkWJ2XcT7ReLEc54/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZthxd3JI3dG7mSvn0pkks0P63zuEP4SiEBsNniT-yg8czCvnaz6s-G4VnLr4_VuDLHWizhGFxWZfQIUsNy31RTdkHNb_f_gbGSgxU0-_zzHkEtlOu0RYbyYhp9xEfkWJ2XcT7ReLEc54/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/AVvXsEiLJ7hNxXebPztlj-Pbbke4XBfV3ck4m2U_aUUY46vB4rVWlxWu-vNIEisC9diiOZnP4KH97d7OGATpacnbQG78H28XRgcJqfr1bBDC6Ju6MFcfktQYDTEeUyxtqhvyDMTLp2NU-3vv85c/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/AVvXsEiLJ7hNxXebPztlj-Pbbke4XBfV3ck4m2U_aUUY46vB4rVWlxWu-vNIEisC9diiOZnP4KH97d7OGATpacnbQG78H28XRgcJqfr1bBDC6Ju6MFcfktQYDTEeUyxtqhvyDMTLp2NU-3vv85c/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/AVvXsEiLJ7hNxXebPztlj-Pbbke4XBfV3ck4m2U_aUUY46vB4rVWlxWu-vNIEisC9diiOZnP4KH97d7OGATpacnbQG78H28XRgcJqfr1bBDC6Ju6MFcfktQYDTEeUyxtqhvyDMTLp2NU-3vv85c/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/AVvXsEi6mVNo9mjCtM-ov6xtGauZows8CH5Llm3y-x3KEY1vsYbxN86_5c-1PFpXSPQZ6LR27rmI9IQ2hk-LP9lp8TDrRVlcdITzCRmIKf7eny6HnrukJgekNaqduU7Kg0MklYM6zsXFTHvPzg0/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/AVvXsEi6mVNo9mjCtM-ov6xtGauZows8CH5Llm3y-x3KEY1vsYbxN86_5c-1PFpXSPQZ6LR27rmI9IQ2hk-LP9lp8TDrRVlcdITzCRmIKf7eny6HnrukJgekNaqduU7Kg0MklYM6zsXFTHvPzg0/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/AVvXsEi6mVNo9mjCtM-ov6xtGauZows8CH5Llm3y-x3KEY1vsYbxN86_5c-1PFpXSPQZ6LR27rmI9IQ2hk-LP9lp8TDrRVlcdITzCRmIKf7eny6HnrukJgekNaqduU7Kg0MklYM6zsXFTHvPzg0/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/AVvXsEgfLNGF8g8bHhr7w9eTSbHOvWGoz37zHqLg0lKnD1tDzkZv7eEzLUEBokA0woMt1SSPAIu1IQCfd62elHGYOTx5THpZuej3nSN0_rraUP_LKTHVQtPW85M16uoNc47JkIVncd0mLNa_gkc/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfLNGF8g8bHhr7w9eTSbHOvWGoz37zHqLg0lKnD1tDzkZv7eEzLUEBokA0woMt1SSPAIu1IQCfd62elHGYOTx5THpZuej3nSN0_rraUP_LKTHVQtPW85M16uoNc47JkIVncd0mLNa_gkc/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/AVvXsEglpBxiZYqQTGKmkm4GEIoyA80mbZ_rk8HNWPXpmJYO03MLLsqCj7FqzwM3RRPCRt3eipposHVz48EIh7Km6OXbO-LgKeSqZlcnOpE90cQlwQqNqGbm378Fdt_j8YHg_PYBYEvkoozOCRw/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglpBxiZYqQTGKmkm4GEIoyA80mbZ_rk8HNWPXpmJYO03MLLsqCj7FqzwM3RRPCRt3eipposHVz48EIh7Km6OXbO-LgKeSqZlcnOpE90cQlwQqNqGbm378Fdt_j8YHg_PYBYEvkoozOCRw/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/AVvXsEgfLNGF8g8bHhr7w9eTSbHOvWGoz37zHqLg0lKnD1tDzkZv7eEzLUEBokA0woMt1SSPAIu1IQCfd62elHGYOTx5THpZuej3nSN0_rraUP_LKTHVQtPW85M16uoNc47JkIVncd0mLNa_gkc/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfLNGF8g8bHhr7w9eTSbHOvWGoz37zHqLg0lKnD1tDzkZv7eEzLUEBokA0woMt1SSPAIu1IQCfd62elHGYOTx5THpZuej3nSN0_rraUP_LKTHVQtPW85M16uoNc47JkIVncd0mLNa_gkc/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/AVvXsEhxUT_8fWDQHeEnnumsPWhYTTD96EsPcOha4vPO8NnnZlcoH_RnCC8yuG0_7GBPCMWCaUycDvN499O7ZaeVEdo3GLuwzFcs15wnbzuwCmeYmW7jGs05Rq_ZnZ0_2kFp41h7Qs3Dqd6MPzY/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxUT_8fWDQHeEnnumsPWhYTTD96EsPcOha4vPO8NnnZlcoH_RnCC8yuG0_7GBPCMWCaUycDvN499O7ZaeVEdo3GLuwzFcs15wnbzuwCmeYmW7jGs05Rq_ZnZ0_2kFp41h7Qs3Dqd6MPzY/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/AVvXsEj50NZfrsXfix2eSqBJyBT1Whp8S302RykZvujbkJ3sCxStHtF7W6OOrxBuT7Y9j9CPvs0Gz3YV3Mp5086VF_Qegq-G11MxWpaPEI7pjRVhJdsqRLhHh1HitCj46Tr_b2RCNRp2y-7RzTE/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/AVvXsEj50NZfrsXfix2eSqBJyBT1Whp8S302RykZvujbkJ3sCxStHtF7W6OOrxBuT7Y9j9CPvs0Gz3YV3Mp5086VF_Qegq-G11MxWpaPEI7pjRVhJdsqRLhHh1HitCj46Tr_b2RCNRp2y-7RzTE/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/AVvXsEj50NZfrsXfix2eSqBJyBT1Whp8S302RykZvujbkJ3sCxStHtF7W6OOrxBuT7Y9j9CPvs0Gz3YV3Mp5086VF_Qegq-G11MxWpaPEI7pjRVhJdsqRLhHh1HitCj46Tr_b2RCNRp2y-7RzTE/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/AVvXsEgWneZs3-Xlang0dK7rQE5UHof5sdH2V2DkDVMk9wHQl96pQjSixLmCK33xKd-hvikbUEH1Ii6nDVqDq3czD9f8MNBcI3ENMfofsICurW4RplPQpOI9ueRzmVZakSkRHNn7aiGzsEUgNZE/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWneZs3-Xlang0dK7rQE5UHof5sdH2V2DkDVMk9wHQl96pQjSixLmCK33xKd-hvikbUEH1Ii6nDVqDq3czD9f8MNBcI3ENMfofsICurW4RplPQpOI9ueRzmVZakSkRHNn7aiGzsEUgNZE/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/AVvXsEio3Q3xPAicZj6eSpXBbbmWOPFrFgte632XDXbvVZQAUvhX0Mfyh1Cc5Uta2QW3Y6wJ67s7ZvsSClErR06bupGwlsw9IYpKA1HYtEQWZAcx5zPMQ1IrgmhuLX5hfZ-WN9uwXgnv5NR08VU/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio3Q3xPAicZj6eSpXBbbmWOPFrFgte632XDXbvVZQAUvhX0Mfyh1Cc5Uta2QW3Y6wJ67s7ZvsSClErR06bupGwlsw9IYpKA1HYtEQWZAcx5zPMQ1IrgmhuLX5hfZ-WN9uwXgnv5NR08VU/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
