CARA MEMBUAT MENU DAN SUB MENU BAR PADA BLOGGER

membuat menu bar pada blogger, ini dia caranya:
saya coba sendiri seperti pada blogg ini, sangat lah gampang, hehehehe

oke langsung saja:

buka menu blogger, kemudian Tamplate dan edit HTML
muncul lah scrift rumit yang gak jelas, hehehehe
cari salah satu tulisan/scrift berikut:
<div class='main-outer'>
<div id='main-wrapper'>
<div id='main'>

untuk lebih mempermudah dalam mencari tekan F3 atau Ctrl + F pada Keyboard Anda.
jika sudah ketemu copy kan scrift berikut tepat diatas scrift tadi:
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;width:940px;margin:0px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, &quot;Times New Roman&quot;, Times, serif; font-style:italic; font-weight:500; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Daftar</a>
<ul id='sub-custom-nav'>
<li><a href='#/search/label/Daftar 1'>Daftar 1</a></li>
<li><a href='#/search/label/Daftar 2'>Daftar 2</a></li>
</ul>
</li>
<li><a href='#'>Info</a></li>
</ul>
</div>

untuk mengeditnya, teks berwarna merah dengan tanda (#) itu agan isi saja dengan alamat web agan, kemudian teks berwarna hijau seperti Home, Daftar, dan Info adalah kumpulan Menu pada menu bar blogg, sedangkan teks berwarna biru itu agan ganti nama-nama yang akan dijadikan sub menu.

jika agan ingin merubah ukuran menu bar ganti saja angka-angka berwarna ungu setelah scrift:
#cat-nav {background:#156994

selesai,,,,

2 Responses to "CARA MEMBUAT MENU DAN SUB MENU BAR PADA BLOGGER"

  1. Mantap gan cara buat menunya mudah di mengerti ...jangan lupa mampir balik ya

    ReplyDelete
  2. makasih karena udah mampir, janganlupa untuk di subscribe....

    ReplyDelete