menu Horizontal Drop Down di bawah header

menu horizontal untuk blog bertujuan memudahkan pengunjung untuk mencari apa yang mereka cari , disamping itu horizontal dropdown juga adalah salah satu teknik seo dan untuk memperindah tampilan , saya akan menerangkan tutorial blog membuat menu horizontal tapi menggunakan menu dropdown,

menu horizontal dropdown

Silahkan ikuti langkah-langkah berikut:

1. Daftar Ke halaman Dashboard - Layout - Edit HTML.
2. Jangan Lupa untuk 'Download Template Lengkap' untuk mengantisipasi terjadinya kesalahan dalam template Anda.
3. Copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin>

copy paste kode ini:

#catmenucontainer{

height:33px;

width:1000px;

margin:0 auto;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNqYJD3lyaUWAnnKr7FqZv_En7f-FUnX8Yu31avParQM7LwRe57E0DWZhUvSpOU2Q1B4kYy-sE1TtM07GI2Vb5Ysft0y6-EnDqQs16lPP97Oaj-e6U1rjFz7E_A6fWnw-Dx1QAyDVTukWU/) repeat-x;

display:block;

padding:0px 0 0px 0px;

font-size:12px;

font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;

font-weight:normal;

border-top:1px solid #252424;

}

#catmenu{

margin: 0px;

padding: 0px;

width:1000px;

background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNqYJD3lyaUWAnnKr7FqZv_En7f-FUnX8Yu31avParQM7LwRe57E0DWZhUvSpOU2Q1B4kYy-sE1TtM07GI2Vb5Ysft0y6-EnDqQs16lPP97Oaj-e6U1rjFz7E_A6fWnw-Dx1QAyDVTukWU/) repeat-x;

height:33px;

}

#catmenu ul {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}

#catmenu li {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {

color: #fae7df;

display: block;

margin: 0px;

padding: 9px 10px 10px 10px;

}

#catmenu li a:hover, #catmenu li a:active {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAdzMa1yrntJ_eHebnxRzzTNFjy-Pj0aNAKfXj0lm-aPLqcxODdYQltJKlySvYRVyF8gx4KnZXrHYUqIKpd0OywEayvpOgLGOtC08EPiKKpgrq_8Uqi0E6peVyBSL3pExHp_j86OQySokr/) repeat-x;

color: #fff;

margin: 0px;

padding: 9px 10px 10px 10px;

text-decoration: none;

}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {

background:#ED4A05;

width: 150px;

color: #fae7df;

font-family:Tahoma,century gothic,Georgia, sans-serif;

font-weight: normal;

float: none;

margin: 0px;

padding: 9px 10px 10px 10px;

border-bottom: 1px solid #FF7800;

}

#catmenu li li a:hover, #catmenu li li a:active {

color: #fff;

padding: 9px 10px 10px 10px;

}

#catmenu li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin: 0px;

padding: 0px;

}

#catmenu li li {

}

#catmenu li ul a {

width: 140px;

}

#catmenu li ul a:hover, #catmenu li ul a:active {

}

#catmenu li ul ul {

margin: -34px 0 0 170px;

}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,

#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {

left: -999em;

}

#catmenu li:hover ul, #catmenu li li:hover ul,

#catmenu li li li:hover ul, #catmenu li.sfhover ul,

#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {

left: auto;

}

#catmenu li:hover, #catmenu li.sfhover {

position: static;

}

4. Setelah itu salin kode di bawah ini dan paste tepat di bawah kode <div id='content-wrapper'>

copy paste kode ini:

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

selesai, jangan lupa untuk Save / Simpan Template Anda dan Lihat hasilnya.

Semoga informasi di atas bermanfaat bagi anda semua.
Terima kasih.

2 komentar:

Ahmad Yusuf mengatakan...: div id='content-wrapper' yg langkah ke-4 tdk ditemukan; 9 Januari 2013 pukul 04.56
Ahmad Yusuf mengatakan...: bagaimana cara mengganti warna background Link-Name-1, 2, 3 dan 4 yg skrng warnanya hitam? mohon bantuannya; 9 Januari 2013 pukul 06.41

translate

menu Horizontal Drop Down di bawah header