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/AVvXsEgzG5CkYELQF293yHZ799eM1FUBzhGNG0hb5P8k9XUeAqzaDMcMehotnYfwoI6lwS4f25cnbI4L-3LpjFgnTgXkLyyno6hXwbLc0-rB0KFrRRyZcQrPs4MVeYld7PZQbIva9j2AkougJwc/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzG5CkYELQF293yHZ799eM1FUBzhGNG0hb5P8k9XUeAqzaDMcMehotnYfwoI6lwS4f25cnbI4L-3LpjFgnTgXkLyyno6hXwbLc0-rB0KFrRRyZcQrPs4MVeYld7PZQbIva9j2AkougJwc/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/AVvXsEgsnVTlYKaLHlr3MDLKAOwQFyKELnEtbuQRATA66ol9lWRJA3TR6EVW2cpLI7NPkoZ3n_CQYMoHxE34-DlKUFeKANPGsczB4w6UxRJ1x2FrInR-MEnj__RoBORYHOvNY7MiCBzGmhzizis/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/AVvXsEgsnVTlYKaLHlr3MDLKAOwQFyKELnEtbuQRATA66ol9lWRJA3TR6EVW2cpLI7NPkoZ3n_CQYMoHxE34-DlKUFeKANPGsczB4w6UxRJ1x2FrInR-MEnj__RoBORYHOvNY7MiCBzGmhzizis/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/AVvXsEgc30QO218zQA4hU_P82dV0jjze-YwpIw6RylbOCHEA7pjNa_8RcH81F6KqIgpUnBkyplqMI2uFqsg9CKyVOGqBsZBRhCuNwzGzlCNy-vGk7MJ2Db30N8WSBk_qvdfRY0t_azeddzPEh3M/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/AVvXsEgc30QO218zQA4hU_P82dV0jjze-YwpIw6RylbOCHEA7pjNa_8RcH81F6KqIgpUnBkyplqMI2uFqsg9CKyVOGqBsZBRhCuNwzGzlCNy-vGk7MJ2Db30N8WSBk_qvdfRY0t_azeddzPEh3M/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/AVvXsEiphIgTrlXJ3b5nC3bO5htl2aG17e3ks2Nm18mcbJu8eKpTXbzVSjz8-XFjySHHlEUKuFQ7U026vvChDIvoXx2lb_Dl-Y95Ub1R5zLP_QnjPzFvxUO-_5wWkg7Xw00uPnYPjSojHMXJaV8/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiphIgTrlXJ3b5nC3bO5htl2aG17e3ks2Nm18mcbJu8eKpTXbzVSjz8-XFjySHHlEUKuFQ7U026vvChDIvoXx2lb_Dl-Y95Ub1R5zLP_QnjPzFvxUO-_5wWkg7Xw00uPnYPjSojHMXJaV8/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/AVvXsEjUW2_Poak9fSv6tPQwLAF45GqPc1BQ2dAhhP_MDID2Ac0gl1lO04qsIjHauKgmoOHcplzV1H8wW1kFDSF9mujxyP5j8JuKK6eQITMrK2JJ6CNp36pgIHo3M33RcZXjyZ3pDFFvJ6BwbbE/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/AVvXsEjUW2_Poak9fSv6tPQwLAF45GqPc1BQ2dAhhP_MDID2Ac0gl1lO04qsIjHauKgmoOHcplzV1H8wW1kFDSF9mujxyP5j8JuKK6eQITMrK2JJ6CNp36pgIHo3M33RcZXjyZ3pDFFvJ6BwbbE/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/AVvXsEjUW2_Poak9fSv6tPQwLAF45GqPc1BQ2dAhhP_MDID2Ac0gl1lO04qsIjHauKgmoOHcplzV1H8wW1kFDSF9mujxyP5j8JuKK6eQITMrK2JJ6CNp36pgIHo3M33RcZXjyZ3pDFFvJ6BwbbE/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/AVvXsEhLa7Z_3JqkcTBhv76nuyEvzz1Xl1WMHnkqltngRQ5Igj2hbVlR4SlvFstkoyxTOpHPiOwlC5ffCQS7amY9COhRQYPC7F3qhFJNr05Hk6gAF8SEtQx2WMoBXnZ3wSRW4WHzDdqzSaT9ljA/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/AVvXsEhLa7Z_3JqkcTBhv76nuyEvzz1Xl1WMHnkqltngRQ5Igj2hbVlR4SlvFstkoyxTOpHPiOwlC5ffCQS7amY9COhRQYPC7F3qhFJNr05Hk6gAF8SEtQx2WMoBXnZ3wSRW4WHzDdqzSaT9ljA/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/AVvXsEhLa7Z_3JqkcTBhv76nuyEvzz1Xl1WMHnkqltngRQ5Igj2hbVlR4SlvFstkoyxTOpHPiOwlC5ffCQS7amY9COhRQYPC7F3qhFJNr05Hk6gAF8SEtQx2WMoBXnZ3wSRW4WHzDdqzSaT9ljA/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/AVvXsEgldnoJdJEFiSpWe09MJetAJe61ix9T47gb9tL4XBjnVh0ccp54qTN1TauFjug0fxepgpvARHW5UNhKaTJ_7TUaypQgOW0C11U8KyV8QyR5abtnp5aipq6fbWg8upidJlHJwNU8tsFnNAk/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgldnoJdJEFiSpWe09MJetAJe61ix9T47gb9tL4XBjnVh0ccp54qTN1TauFjug0fxepgpvARHW5UNhKaTJ_7TUaypQgOW0C11U8KyV8QyR5abtnp5aipq6fbWg8upidJlHJwNU8tsFnNAk/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/AVvXsEj4PPCnmnURzoYUXRreftowq9aDviglGESn3lbJQ25KPqNfu8UHJrM8v0wNVZm5-dLbKsofjEjqXyG69xIHTvmrUXx20iPhbLQLw9L01J4BxmoJYXnfcv-k7brIRScUV_k34QzeKSLrugk/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/AVvXsEj4PPCnmnURzoYUXRreftowq9aDviglGESn3lbJQ25KPqNfu8UHJrM8v0wNVZm5-dLbKsofjEjqXyG69xIHTvmrUXx20iPhbLQLw9L01J4BxmoJYXnfcv-k7brIRScUV_k34QzeKSLrugk/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/AVvXsEj4PPCnmnURzoYUXRreftowq9aDviglGESn3lbJQ25KPqNfu8UHJrM8v0wNVZm5-dLbKsofjEjqXyG69xIHTvmrUXx20iPhbLQLw9L01J4BxmoJYXnfcv-k7brIRScUV_k34QzeKSLrugk/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/AVvXsEi4ls8YZg-CEtDB1gi6wqexTlgYiX0FrLCtdIjmRb4IsZLbPbAMq3WLdzQLG-qTVU0s_hpW8pqffw7ZhZac1_riz0qq46BJyRhyphenhyphenKuhNVA_wJWReqB_eWHZ9SFDEgQ9z9x6OBnXxysVXSxw/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/AVvXsEi4ls8YZg-CEtDB1gi6wqexTlgYiX0FrLCtdIjmRb4IsZLbPbAMq3WLdzQLG-qTVU0s_hpW8pqffw7ZhZac1_riz0qq46BJyRhyphenhyphenKuhNVA_wJWReqB_eWHZ9SFDEgQ9z9x6OBnXxysVXSxw/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/AVvXsEi4ls8YZg-CEtDB1gi6wqexTlgYiX0FrLCtdIjmRb4IsZLbPbAMq3WLdzQLG-qTVU0s_hpW8pqffw7ZhZac1_riz0qq46BJyRhyphenhyphenKuhNVA_wJWReqB_eWHZ9SFDEgQ9z9x6OBnXxysVXSxw/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/AVvXsEgoLa-muHcfKDUReRuqijnbiRaaYzgS8JG5p2N5qSGp9aux5FYAJ_ChBDwKqhwgbZGeC0di8M92vnk82UijH3-tEI2DFapFHqtRVLPJEuhjFkqCbf24eC-GjwdJ7mijUIrBUi319LQc_DQ/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoLa-muHcfKDUReRuqijnbiRaaYzgS8JG5p2N5qSGp9aux5FYAJ_ChBDwKqhwgbZGeC0di8M92vnk82UijH3-tEI2DFapFHqtRVLPJEuhjFkqCbf24eC-GjwdJ7mijUIrBUi319LQc_DQ/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/AVvXsEgA7cn5gDbG5qMuttx2haIV4woWepmR_G_ItFjO8za8GoBQRwg87p62ky8VGGYfiUx9soxv7f60BglHKcK_s_-nyhJvsP5fFWyVPNZ9CahgQlSkMH5srmwASt_Rxu4TsFgr9Hl9ZCam6ag/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA7cn5gDbG5qMuttx2haIV4woWepmR_G_ItFjO8za8GoBQRwg87p62ky8VGGYfiUx9soxv7f60BglHKcK_s_-nyhJvsP5fFWyVPNZ9CahgQlSkMH5srmwASt_Rxu4TsFgr9Hl9ZCam6ag/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/AVvXsEgoLa-muHcfKDUReRuqijnbiRaaYzgS8JG5p2N5qSGp9aux5FYAJ_ChBDwKqhwgbZGeC0di8M92vnk82UijH3-tEI2DFapFHqtRVLPJEuhjFkqCbf24eC-GjwdJ7mijUIrBUi319LQc_DQ/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoLa-muHcfKDUReRuqijnbiRaaYzgS8JG5p2N5qSGp9aux5FYAJ_ChBDwKqhwgbZGeC0di8M92vnk82UijH3-tEI2DFapFHqtRVLPJEuhjFkqCbf24eC-GjwdJ7mijUIrBUi319LQc_DQ/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/AVvXsEjVnTR2FNRC9XWnP7WnAoGnUWbNLp24eI80HyoAKRfUbVULhudDXSD9GH0A6efAa49AmgAcCNtJtNGab3jJCp_FphbQYl93jb-9aHcDUq6Yug0sns4kSPnbb_FL_I2z9OAJIcIiEOuSXKQ/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVnTR2FNRC9XWnP7WnAoGnUWbNLp24eI80HyoAKRfUbVULhudDXSD9GH0A6efAa49AmgAcCNtJtNGab3jJCp_FphbQYl93jb-9aHcDUq6Yug0sns4kSPnbb_FL_I2z9OAJIcIiEOuSXKQ/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/AVvXsEip2jdMhu_e1wk6CXoByF-Nqt71ASLCaqayL_pS6LrXi5r27vCZ9rzeWELsaCX4nLZhKF1jiq9TuGOMlpUEH_EbRWkfahwcNPhbJzBBckRPbceRVrD2ReLyOM_qR5oTS-8VJKQSnm_A1Tc/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/AVvXsEip2jdMhu_e1wk6CXoByF-Nqt71ASLCaqayL_pS6LrXi5r27vCZ9rzeWELsaCX4nLZhKF1jiq9TuGOMlpUEH_EbRWkfahwcNPhbJzBBckRPbceRVrD2ReLyOM_qR5oTS-8VJKQSnm_A1Tc/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/AVvXsEip2jdMhu_e1wk6CXoByF-Nqt71ASLCaqayL_pS6LrXi5r27vCZ9rzeWELsaCX4nLZhKF1jiq9TuGOMlpUEH_EbRWkfahwcNPhbJzBBckRPbceRVrD2ReLyOM_qR5oTS-8VJKQSnm_A1Tc/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/AVvXsEj5rXUN7hEIDumtZviRhBKgV5G8OZCHhNTFLRzs6drR43p8edY-Z9WvpFUmtqUGbv7Nc4eD4lCOdZAlzyY4NaTtTcz9QDWkq5ZceFi1Cr8vvOO6BQst0Xhp9rUo2PdjIu52rbTBUdQHI7w/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5rXUN7hEIDumtZviRhBKgV5G8OZCHhNTFLRzs6drR43p8edY-Z9WvpFUmtqUGbv7Nc4eD4lCOdZAlzyY4NaTtTcz9QDWkq5ZceFi1Cr8vvOO6BQst0Xhp9rUo2PdjIu52rbTBUdQHI7w/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/AVvXsEisavU3rm_BrI0nuurmfecRQfcmDzwZlIrI2pdMtzFLviClFS82XMo-I9-rFK8xMyp5QTLu6m7onn4iEdGum-nt8NRgtAOmv0cqIxs8uP0XXNCwKEz2tgxl-ZPwpuer5N3BHT4Ig1FWZGQ/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisavU3rm_BrI0nuurmfecRQfcmDzwZlIrI2pdMtzFLviClFS82XMo-I9-rFK8xMyp5QTLu6m7onn4iEdGum-nt8NRgtAOmv0cqIxs8uP0XXNCwKEz2tgxl-ZPwpuer5N3BHT4Ig1FWZGQ/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
Tidak ada komentar:
Posting Komentar