1.buka www.blogger.com lalu login
2.klik arah panah ke bawah(lihat gambar) lalu klik template
3.klik edit html
4.klik lanjutkan
5.cari kode: <div class='main-outer'> agar lebih mudah, tekan Ctrl+f lalu ketik <div class='main-outer> jika tidak ada, centang Expand Template Widget.
6.copy kode ini di atas <div class='main-outer'>
- <style>
- /* -- Menu Horizontal + Sub Menu-- */
- #cat-nav {background:#8B4513;width:940px;padding:0;height:35px;}
- #cat-nav a { color:#00FA9A; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #CD853F;}
- #cat-nav a:hover { color:#FF0000; }
- #cat-nav li:hover { background:#FFA500; }
- #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:#8B4513; }
- #secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:bold; font-weight:700; 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:Georgia, "Times New Roman", Times, serif; font-style:bold; font-weight:700; font-size:14px; width:180px; line-height:30px; padding:0 10px; color:#00FA9A; }
- #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='http://www.ilmuuindonesia.blogspot.com'>Home</a></li>
- <li><a href='http://www.ilmuuindonesia.blogspot.com/search/label/Pendidikan'>Pendidikan</a>
- <ul id='sub-custom-nav'>
- <li><a href='http://ilmuuindonesia.blogspot.com/2012/06/atmosfer.html'>Atmosfer</a></li>
- </ul>
- </li>
tulisan orange ganti dengan ukuran lebar template/keinginan anda(lebar menu)
tulisan merah:ganti dengan link/url yang anda mau (link/url menu)
tulisan hijau:ganti dengan nama yang akan ditampilkan di menu(nama tampilan menu/sub menu)
tulisan biru:ganti dengan link/url yang anda mau (link/url sub menu)
keterangan kode:
1.untuk membuat menu, anda hanya perlu menuliskan:
<li><a href='link/url'>nama tampilan</a></li>
2.untuk membuat sub menu, anda perlu menambahkan <ul id='sub-custom-nav'> di bawah kode menu dan menambahkan kode sub menu (sama seperti kode menu) di bawah <ul id='sub-custom-nav'>
3.di bawah kode sub menu paling bawah, anda perlu menambahkan
</ul>
</li>
keterangan untuk merubah warna html dan jenis tulisan.
1.(baris tiga)
#cat-nav {background:#8B4513;width:940px;padding:0;height:35px;}
#8B4513:warna background menu
2.(baris empat)
#cat-nav a { color:#00FA9A; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #CD853F;}
#00FA9A:warna tulisan
#033148:warna bayangan
#CD853F:warna pembatas diantara menu
3.(baris lima)
#cat-nav a:hover { color:#FF0000; }
#FF0000:warna tulisan ketika disentuh kursor
4.(baris enam)
#cat-nav li:hover { background:#FFA500; }
#FFA500:warna background menu dan sub menu ketika disentuh kursor
5.(baris sepuluh)
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#8B4513; }
6.(baris sebelas)
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:bold; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
bold:bentuk tulisan pada menu dan sub menu
7.(baris lima belas)
#secnav li ul li a { font-family:Georgia, "Times New Roman", Times, serif; font-style:bold; font-weight:700; font-size:14px; width:180px; line-height:30px; padding:0 10px; color:#00FA9A; }
bold:bentuk tulisan pada sub menu saja
#00FA9A:warna tulisan pada sub menu saja
Demikian cara membuat menu dan sub menu. jika ada pertanyaan, saran, dan kekurangan mohon diberitahukan di komentar.
promote
BalasHapushttp://www.infouniqchibi.blogspot.com
seblum membuat menu seperti d atas hrus d bkin dlu menu d LAMAN?? spaya linkX tinggal di COPAS lalu di msukkan k EDIT HTML?? atau di biarkan dlu isi BLOG d Kosongkan tpi lngsung masuk TEMPLATE EDIT HTML???
BalasHapusPleas REplay my Messeges to aswar.watampone@gmail.com
Thanks
Makasih Infonya sangat membantu sekali..
BalasHapushttp://odd3nx.blogspot.com
begini cara membagi ilmu,jelas bangett,,makasih gan
BalasHapusok sip gan, oiya klo merubah panjang kotak sub menu gmna cara y???
BalasHapus