Membuat Menu Serta Sub Menu(Tanpa jQuery)
- Login Blogger
- Template
- Edit HTML
Cari kode :
<div class='main-outer'> atau
<div id='main-wrapper'> atau
<div id='main'> baca : Cara Mudah + Cepat Mencari Kode Html di Blogger
<div id='main-wrapper'> atau
<div id='main'> baca : Cara Mudah + Cepat Mencari Kode Html di Blogger
Setelah kode tersebut sudah
ditemukan silakan pasang kode berikut tepat di atasnya
<style>
/*
-- Menu Horizontal + Sub Menu-- */
#cat-nav
{background:#156994;margin:0 15px;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, "Times New Roman", Times, serif;
font-style:italic; 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: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='#'>Menu 1</a></li>
<li><a
href='#'>Menu + Sub Menu</a>
<ul
id='sub-custom-nav'>
<li><a
href='#'>Sub Menu 1</a></li>
<li><a
href='#'>Sub Menu 2</a></li>
<li><a
href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a
href='#'>Menu</a></li>
<li><a
href='#'>Menu + Sub</a>
<ul
id='sub-custom-nav'>
<li><a
href='#'>Sub 1</a></li>
<li><a
href='#'>Sub 2</a></li>
<li><a
href='#'>Sub 3</a></li>
<li><a
href='#'>Sub 4</a></li>
<li><a
href='#'>Sub 5</a></li>
<li><a
href='#'>Sub 6</a></li>
</ul>
</li>
<li><a
href='#'>Menu</a></li>
</ul>
</div>
Catatan:
Silakan ganti tanda PAGAR (#) dengan
link/url yang kamu mau, boleh link posting atau link Label (Kategori)
Sub Menu dan Sub adalah sub menu dari menu (Menu + Sub Menu dan Menu + Sub), silakan ganti nama masing-masing menu sesuai selera.
Sub Menu dan Sub adalah sub menu dari menu (Menu + Sub Menu dan Menu + Sub), silakan ganti nama masing-masing menu sesuai selera.
Hal-hal yang mungkin akan ditanyakan
:
1. Kode yang harus dicari
tidak ada di blog saya
Solusinya, silakan pasang kode menu horizontak tersebut di
tempat yang kira-kira pas dengan yang kamu mau, kemudian klik Preview
(Pratinjau). Jika masih belum pas silakan pindahkan kode tersebut
kemudian Pratinjau lagi. Lakukan sampai menunya sudah berada ditempat yang kamu
mau.
2. Bagaimana cara
memasukkan beberapa artikel dalam 1 menu?
Agar bisa menampilakan beberapa
artikel dalam 1 menu maka kamu harus pasang Link Label pada menu tersebut,
caranya sama, yaitu dengan cara mengganti tanda pagar (#) dengan link label
yang ada di blog teman.
Update 21 Mei 2012
Jika susah pasang menu horizontal nya pada bagian Edit HTML silakan pasang pada Gadget/Widget (dibawah header), caranya:
Update 21 Mei 2012
Jika susah pasang menu horizontal nya pada bagian Edit HTML silakan pasang pada Gadget/Widget (dibawah header), caranya:
- Klik Tata Letak
- Klik Add Gadget
- Pilih Gadget Html/JavaScript
- Simpan
- Selesai
Untuk mengubah lebar menu horizontal
nya silakan cari kode:
#cat-nav {background:#156994;margin:0
15px;padding:0;height:35px;}
Kemudian tambahkan kode (width:900px) di atrara { dan }, sehingga menjadi
seperti ini
#cat-nav
{background:#156994;width:900px;margin:0 15px;padding:0;height:35px;}
Ingat,
angka 900px hanya sebagai contoh saja,
silakan rubah angka 900 dengan ukuran
lebar yang kamu inginkan (yang sesuai dengan template kamu)
Untuk mengedit tampilan yang lainnya seperti warna, font, dsb. Silakan dicoba edit sendiri CSS nya ya, yang saya maksud CSS itu adalah kode yang ada di antara <style> dan </style>.
Untuk mengedit tampilan yang lainnya seperti warna, font, dsb. Silakan dicoba edit sendiri CSS nya ya, yang saya maksud CSS itu adalah kode yang ada di antara <style> dan </style>.
Top 5
Blog Archive
-
2012
(51)
-
Juni(51)
- Jun 19(28)
- Jun 12(2)
- Jun 10(2)
- Jun 09(2)
-
Jun 08(16)
- Membuat Menu Serta Sub Menu(Tanpa jQuery)
- Download 200+ Game house dll.(IDWS)
- Free Download Artisteer 3.1.0.48375 Full Version +...
- Free Download AIMP 3.00 Build 985
- Flash Player Pro v5.1 + Serial Key
- ESET NOD32 Antivirus + Smart Security 5.2.9.1 Fina...
- Connectify 3.4 Pro Full + Keygen
- CCleaner Professional 3.19.1721 Full Version + Cra...
- Cara membuat Twitter follower Box\kotak follow twi...
- Cara Membuat Share Button facebook,twitter,mig33 M...
- Cara Membuat Judul BLog Pada Tab Browser Seperti D...
- Cara Memasang Widget Multi Tab di Blogger
- Buku Tamu Tersembunyi Di samping Blogger
- BitDefender Antivirus Plus 2012 Build 15.0.38.1605...
- Avira Antivirus Premium 2012 12.0.0.114 Full Versi...
- Avast Pro Antivirus 7.0.1407 Final Full + License Key
- Jun 01(1)
-
Juni(51)