Jumat, 10 Juni 2011

Membuat Menu Bar

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/AVvXsEjZ7737AxPBOqNpRwL7ALGtopQ3v85Xi1h2oArL31mYPTzCPfXfRariTsjlHiq69ET5ion6z1vmkCzOyu1O6Hwcwg1vKKBjpL8Dp0Kj2dOMn6SDg8AgdOXwYLNaOIUkr3kE2lBznQdWAC0/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ7737AxPBOqNpRwL7ALGtopQ3v85Xi1h2oArL31mYPTzCPfXfRariTsjlHiq69ET5ion6z1vmkCzOyu1O6Hwcwg1vKKBjpL8Dp0Kj2dOMn6SDg8AgdOXwYLNaOIUkr3kE2lBznQdWAC0/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/AVvXsEhVPuLN6faTlpI8G-98wJux4OB8YZUXh1KNaUp0MqmIjMr1gBQItYoM2rS7B1wq6u84k3PFpTZ_iPFtPgctH94Ad7ti8CO0jYwxBij682ZQ9TwULyfaSn4QVLA0V9E-xErAHhfqqGxgrdo/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/AVvXsEhVPuLN6faTlpI8G-98wJux4OB8YZUXh1KNaUp0MqmIjMr1gBQItYoM2rS7B1wq6u84k3PFpTZ_iPFtPgctH94Ad7ti8CO0jYwxBij682ZQ9TwULyfaSn4QVLA0V9E-xErAHhfqqGxgrdo/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/AVvXsEiQu0Kjnhr0ORFnAu3QwGS-1oDOViMRDm0q3QO_Iq-mJhkMP9ZmtVrOh6pubwhWdf09EjgCn27u6gHIytoEJRq6kH4ORDAEILLJmLrEZAO_JH-WHMmJ72Ah65963X572Al2-Y58jxaKWqc/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/AVvXsEiQu0Kjnhr0ORFnAu3QwGS-1oDOViMRDm0q3QO_Iq-mJhkMP9ZmtVrOh6pubwhWdf09EjgCn27u6gHIytoEJRq6kH4ORDAEILLJmLrEZAO_JH-WHMmJ72Ah65963X572Al2-Y58jxaKWqc/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/AVvXsEh6C2OCHyxvI55p7vf4Ztvm065j_hEjBsaRc_DDWKd7Sa0KTuIutEoUEdJf-ZKuL6gzfAlKXt6Ufbmhsj7sZBX5ag3bG3qA3g1PyBIc5JAvXfQKPjoS6fQDDy4SESNQ-ZLeMqYnU339Auc/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6C2OCHyxvI55p7vf4Ztvm065j_hEjBsaRc_DDWKd7Sa0KTuIutEoUEdJf-ZKuL6gzfAlKXt6Ufbmhsj7sZBX5ag3bG3qA3g1PyBIc5JAvXfQKPjoS6fQDDy4SESNQ-ZLeMqYnU339Auc/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/AVvXsEif8Ht0wgk8TmnTRsikFGixgq6NMPI_aBfQ8CI2XmGdU_HAQGofu56jHk7X6vh9sPZhRU5ZJyIrkH1AKGVyI0uNKGkyfYaiX7YOIgncOLmYix0AiFZxLayKUwC91wyGqPfGR05AeXl1Oh8/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/AVvXsEif8Ht0wgk8TmnTRsikFGixgq6NMPI_aBfQ8CI2XmGdU_HAQGofu56jHk7X6vh9sPZhRU5ZJyIrkH1AKGVyI0uNKGkyfYaiX7YOIgncOLmYix0AiFZxLayKUwC91wyGqPfGR05AeXl1Oh8/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/AVvXsEif8Ht0wgk8TmnTRsikFGixgq6NMPI_aBfQ8CI2XmGdU_HAQGofu56jHk7X6vh9sPZhRU5ZJyIrkH1AKGVyI0uNKGkyfYaiX7YOIgncOLmYix0AiFZxLayKUwC91wyGqPfGR05AeXl1Oh8/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/AVvXsEjn1H0NOxAjVT2jtb1PpSmZbXqfFgi1Ei8yvb_MU9ny0zZSVYDhh8ad5ZS6R4zrJKPAu-F6lqUNjiAFpD4SC2zInRJTRBd12r_9dLXcFGf7CKqxdZDR-_QmgCchNPw7eTPLJlfWHHcz1d4/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/AVvXsEjn1H0NOxAjVT2jtb1PpSmZbXqfFgi1Ei8yvb_MU9ny0zZSVYDhh8ad5ZS6R4zrJKPAu-F6lqUNjiAFpD4SC2zInRJTRBd12r_9dLXcFGf7CKqxdZDR-_QmgCchNPw7eTPLJlfWHHcz1d4/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/AVvXsEjn1H0NOxAjVT2jtb1PpSmZbXqfFgi1Ei8yvb_MU9ny0zZSVYDhh8ad5ZS6R4zrJKPAu-F6lqUNjiAFpD4SC2zInRJTRBd12r_9dLXcFGf7CKqxdZDR-_QmgCchNPw7eTPLJlfWHHcz1d4/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/AVvXsEg0KvBp5I9IN2e_FSkikhUcIrEQ-sRYhkZ1hZqjeUqPAsNiOLifMXowo8LmHQ1mP3zDH1DVoHM3OBENUjmeuXZH-eTumy4NfFyAcnTp2bhtCeTwBrbZTdamuAFJbAQBFfiqqDGfzEvh-pg/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0KvBp5I9IN2e_FSkikhUcIrEQ-sRYhkZ1hZqjeUqPAsNiOLifMXowo8LmHQ1mP3zDH1DVoHM3OBENUjmeuXZH-eTumy4NfFyAcnTp2bhtCeTwBrbZTdamuAFJbAQBFfiqqDGfzEvh-pg/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/AVvXsEiQYAJjGrguz1JrCKfWbQsbGemvKfE94XhzgDgD7jVswqitIODSdPFH7jWsEJqOlZZIbnGAAcc4Mx6yx78N0928i5O-eiie3k4Gzr1kQw0se9bUicKk9sAH7d-C5YmnIz-ckCBwmkjS-nY/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/AVvXsEiQYAJjGrguz1JrCKfWbQsbGemvKfE94XhzgDgD7jVswqitIODSdPFH7jWsEJqOlZZIbnGAAcc4Mx6yx78N0928i5O-eiie3k4Gzr1kQw0se9bUicKk9sAH7d-C5YmnIz-ckCBwmkjS-nY/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/AVvXsEiQYAJjGrguz1JrCKfWbQsbGemvKfE94XhzgDgD7jVswqitIODSdPFH7jWsEJqOlZZIbnGAAcc4Mx6yx78N0928i5O-eiie3k4Gzr1kQw0se9bUicKk9sAH7d-C5YmnIz-ckCBwmkjS-nY/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/AVvXsEgr8O0s0mPHGX0kIHpgRik4tY6sVuc8i0b1_jWsYzq71HPuDtgf8m7myJrsJ_kcUK13rPo8VtrSlSwBU2A-nNNzDL2ySlaKk1ceLVoYhbUelpmWWyUrDgv_SEok3yWcTobLXZn7IHFZwmo/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/AVvXsEgr8O0s0mPHGX0kIHpgRik4tY6sVuc8i0b1_jWsYzq71HPuDtgf8m7myJrsJ_kcUK13rPo8VtrSlSwBU2A-nNNzDL2ySlaKk1ceLVoYhbUelpmWWyUrDgv_SEok3yWcTobLXZn7IHFZwmo/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/AVvXsEgr8O0s0mPHGX0kIHpgRik4tY6sVuc8i0b1_jWsYzq71HPuDtgf8m7myJrsJ_kcUK13rPo8VtrSlSwBU2A-nNNzDL2ySlaKk1ceLVoYhbUelpmWWyUrDgv_SEok3yWcTobLXZn7IHFZwmo/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/AVvXsEhzKYt_a0ln-NxvVb-POtYW8M010e0CAItXOIvUdSo_MV3b2Qa39xFjEqmeaZ5NlSo3oQPjEI5jPt2qDOtGs9bYiefKePjziO88cRUnuNQRW_VwyBULUyv2Hfcq0dseLEQHJ4Ybw5CCE9w/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzKYt_a0ln-NxvVb-POtYW8M010e0CAItXOIvUdSo_MV3b2Qa39xFjEqmeaZ5NlSo3oQPjEI5jPt2qDOtGs9bYiefKePjziO88cRUnuNQRW_VwyBULUyv2Hfcq0dseLEQHJ4Ybw5CCE9w/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/AVvXsEji_7NCijfonVCj3Pav48y5KajnFDz8xWj2Gfn87L0cJKj5KeLTSqCfjdbSgkthoQQo26tMXWDKvpERY_2Q2ce0rCuG-1YdxkzMB65nkbIykm3j_YMf4EQVCqYSSajma3WnCVVoqz9ykQU/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji_7NCijfonVCj3Pav48y5KajnFDz8xWj2Gfn87L0cJKj5KeLTSqCfjdbSgkthoQQo26tMXWDKvpERY_2Q2ce0rCuG-1YdxkzMB65nkbIykm3j_YMf4EQVCqYSSajma3WnCVVoqz9ykQU/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/AVvXsEhzKYt_a0ln-NxvVb-POtYW8M010e0CAItXOIvUdSo_MV3b2Qa39xFjEqmeaZ5NlSo3oQPjEI5jPt2qDOtGs9bYiefKePjziO88cRUnuNQRW_VwyBULUyv2Hfcq0dseLEQHJ4Ybw5CCE9w/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzKYt_a0ln-NxvVb-POtYW8M010e0CAItXOIvUdSo_MV3b2Qa39xFjEqmeaZ5NlSo3oQPjEI5jPt2qDOtGs9bYiefKePjziO88cRUnuNQRW_VwyBULUyv2Hfcq0dseLEQHJ4Ybw5CCE9w/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/AVvXsEjT97j7M7ZJk_tequAzqDMwUCX6ifEgyQoEg8S-FpTpqZ9FPXhMYuGZ8nek6wSRaQi8eGpeGwjASn44hwzIKkR7XkyKimT0TEuB12IU52qH_-Vxcm9tdY9eneXgfDDSbE4xPInpHQB2z7I/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT97j7M7ZJk_tequAzqDMwUCX6ifEgyQoEg8S-FpTpqZ9FPXhMYuGZ8nek6wSRaQi8eGpeGwjASn44hwzIKkR7XkyKimT0TEuB12IU52qH_-Vxcm9tdY9eneXgfDDSbE4xPInpHQB2z7I/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/AVvXsEgzLMuNPyznmweSwMIOVtHqCovZSPIugLBzte0xggoQJjBFYxk6xqVDQo0CKp6hOusUCGTYMAggNpUWNhyphenhyphenQ9yYy5x9VMAFi-5bRyxVydSuv482Ebv0K2eWWitwLJk-uBYrBF6A0-JkrQx0/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/AVvXsEgzLMuNPyznmweSwMIOVtHqCovZSPIugLBzte0xggoQJjBFYxk6xqVDQo0CKp6hOusUCGTYMAggNpUWNhyphenhyphenQ9yYy5x9VMAFi-5bRyxVydSuv482Ebv0K2eWWitwLJk-uBYrBF6A0-JkrQx0/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/AVvXsEgzLMuNPyznmweSwMIOVtHqCovZSPIugLBzte0xggoQJjBFYxk6xqVDQo0CKp6hOusUCGTYMAggNpUWNhyphenhyphenQ9yYy5x9VMAFi-5bRyxVydSuv482Ebv0K2eWWitwLJk-uBYrBF6A0-JkrQx0/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/AVvXsEholxQFwcYKi4PE17lYVpOMdz78VpEjowTWMbSclXw7Vt7PCk__3WrdI7Bdt7Ng3e1L-UgI0Zm5LotrUWL9MW4YnYzk-uebxJDPFMA0C6CpQDssS5A-r6_o64Pp6d5MmYPKI4iTjZvgmes/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEholxQFwcYKi4PE17lYVpOMdz78VpEjowTWMbSclXw7Vt7PCk__3WrdI7Bdt7Ng3e1L-UgI0Zm5LotrUWL9MW4YnYzk-uebxJDPFMA0C6CpQDssS5A-r6_o64Pp6d5MmYPKI4iTjZvgmes/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/AVvXsEj22-qSvMfEGYQRYpjhvw3Wj7H5IA6DpI5kAabIa81y5-s357yHjJSHsUXBELwlDLA7WEm28kDsa4ifXCfDQB_ouLA1GaExsjhIlPT76u18i-ZTKD4y9AF_zn0GL2eeSBWVyk6aSkLkauM/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj22-qSvMfEGYQRYpjhvw3Wj7H5IA6DpI5kAabIa81y5-s357yHjJSHsUXBELwlDLA7WEm28kDsa4ifXCfDQB_ouLA1GaExsjhIlPT76u18i-ZTKD4y9AF_zn0GL2eeSBWVyk6aSkLkauM/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>

Sosial Media

Google+ Facebook Instagram

Popular Posts

  • RUMUS LAPORAN PENGHASILAN SEWA PS DENGAN EXCEL
    Membuat aplikasi dengan excel dapat membantu kerjaan bener deh......... nah ini salah satunya..sebagai contoh seorang pemilik rental PS yan...
  • MEMAHAMI KONSEP ELEKTRONIKA BAG. 1 RESISTOR
    A. Definisi Resistor Resistor adalah suatu kompponen elektronika yang berfungsi sebagai penahan arus listrik. Resistor memiliki ciri yang ...
  • Cara mengatur perataan text pada Microsoft word
    Assalamualaikum Warahmatullahi Wabarakatuh Sahabat pembaca yang budiman pada kali ini saya akan memberikan sedikit share mengenai dasar-...
  • TEKNIK DASAR FOTOGRAFI
    Segitiga Exposure adalah kunci seorang photografer untuk mengambil sebuah gambar.. Nah dalam hal ini saya akan mencoba berbagi tentang hal...
  • Cara Membuat Blog
    Langkah 1: Daftar Google   Daftarkan Diri Anda di Google Langkah pertama yang harus anda lakukan adalah memiliki akun MAIL pada kali ini say...
  • CARA MEMERIKSA POWER SUPLAY KOMPUTER
    Assalamualaikum Wr. Wb Sobat semua kita tahu bahwa Power Suplay (PSU) dalam perangkat elektronik merupakan bagian yang amat penting termas...
  • Cara Menampilkan Perintah RUN Pada Start Menu di Windows 7
    Cara Menampilkan Perintah RUN Pada Start Menu di Windows 7 . Bagi yang terbiasa menggunakan   Windows XP , mungkin sering mengalami atau me...
  • Rumus If
    Terkadang dalam penyelesaian sebuah permasalahan misalnya ketika pembuatan nilai siswa untuk mengisi raport guru atau wali kelas dibingung...
  • SOLUSI NGEBLOG DARI HP
    Assalamualaikum Wr Wb. Para blogger yang terhormat, terimalah niat baik admin untuk berbagi cara ngeblog dari hp walaupun mungkin u...
  • Menampilkan Super Control Panel Windows 7
    Menampilkan Super Control Panel di Windows 7 Apakah anda merasa bingung dengan tampilan control panel yang standar di windows 7 ?, atau mun...

Market

Copyright © SEGUDANG IDE | Powered by Blogger
Design by ThemePix.com | Blogger Theme by Lasantha - Premium Blogger Templates