Cara Membuat Horizontal Menu Dropdown

Artikel cara membuat horizontal menu dropdown ini saya buat atas permintaan dari sahabat +kunio Diablo melalui komentarnya di artikel tutorial membuat back to top button.
Berhubung template blog yang digunakan oleh sahabat Kunio mempunyai label berwarna biru, maka horizontal menu yang akan saya buat kali ini pun akan bernuansa warna biru, semoga cocok dengan templatenya ya sobat, dan semoga bermanfaat juga untuk pengunjung lainnya yang membutuhkan menu horizontal di blog nya.


Cara membuat horizontal menu dropdown


Untuk demo nya, silahkan anda buka terlebih dahulu tautan demo horizontal menu.

Jika anda tertarik untuk membuatnya, mari kita menuju ke tutorial.

Pertama-tama kita akan membuat kode HTML nya terlebih dahulu, berikut contohnya,

<div id='tsadropdown'><ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Modifikasi blog</a></li>

<li class='kidnapper'>
<a href='#'>
Search engine</a>
<ul>
<li><a href='#'>
Onpage SEO</a></li>
<li><a href='#'>
Offpage SEO</a></li>
</ul>
</li>

<li class='kidnapper'>
<a href='#'>
Google Optimization</a>
<ul>
<li><a href='#'>
White hat</a></li>
<li><a href='#'>
Gray hat</a></li>
<li><a href='#'>
Black Hat</a></li>
</ul>
</li>

<li><a href='#'>
Archive</a></li>
<li><a href='#'>
About</a></li>
</ul></div>


Perhatikan pada kode di atas, tautan yang memiliki sub menu saya tandai dengan nama 'kidnapper' , dan sub menu dari 'kidnapper' tersebut di mulai dari tag <ul> sampai tag penutup </ul> yang saya beri warna merah. silahkan anda ganti tanda # dengan alamat link yang anda inginkan, dan tulisan berwarna biru dengan anchor text (tulisan label) yang sesuai, setelah selesai, saya sarankan anda simpan terlebih dahulu kode tersebut ke notepad karena kita akan masuk ke menu template blog anda.

Memasang horizontal menu


Silahkan masuk ke menu edit HTML blog anda, tidak perlu menambahkan centang pada kotak expand template widget, silahkan anda cari kode </header> di template blog anda, gunakan ctrl+f untuk memudahkan pencarian.

Setelah anda menemukan kode </header> ( perhatikan! bukan kode </head> ) silahkan anda pastekan kode HTML yang sudah anda siapkan di notepad tadi tepat di bawah tag </header>

Sudah? sekarang saatnya memasukkan kode css

Membuat menu dropdown


Sepertinya untuk kode css yang akan kita pasang saya tidak akan menjelaskan rinciannya karena akan sangat panjang sekali. Silahkan anda cari kode ]]></b:skin> di template blog anda, kemudian anda pastekan kode berikut di atas markah ]]></b:skin>

#tsadropdown {
height:24px;
display:block;
border:1px solid #b6cfea;
border-radius:5px;
margin:0 auto;
padding:0;
}

#tsadropdown > ul {
list-style:inside none;
margin:0;
padding:0;
}

#tsadropdown > ul > li {
list-style:inside none;
float:left;
display:block;
position:relative;
margin:0;
padding:0;
}

#tsadropdown > ul > li > a {
outline:none;
display:block;
position:relative;
font-size:15px;
text-align:center;
text-decoration:none;
text-shadow:3px 3px 4px #000;
color:#fff;
padding:4px 20px;
}

#tsadropdown > ul > li:first-child > a {
border-radius:5px 0 0 5px;
}

#tsadropdown > ul > li > a:after {
content:'';
position:absolute;
border-right:1px solid #fff;
top:-1px;
bottom:-1px;
right:-2px;
z-index:99;
border-color:#fff;
}

#tsadropdown ul li.kidnapper:hover > a:after {
top:0;
bottom:0;
}

#tsadropdown > ul > li.kidnapper > a:before {
content:'';
position:absolute;
top:50%;
right:3px;
border:5px solid transparent;
border-top:5px solid #fff;
}

#tsadropdown > ul > li.kidnapper:hover > a:before {
top:50%;
}

#tsadropdown ul li.kidnapper:hover > a {
background:#008ebe;
top:-1px;
z-index:999;
}

#tsadropdown ul li.kidnapper:hover > ul,#tsadropdown ul li.kidnapper:hover > div {
display:block;
}

#tsadropdown ul li > ul,#tsadropdown ul li > div {
display:none;
width:auto;
position:absolute;
top:24px;
background:#008ebe;
border-radius:0 0 5px 5px;
z-index:999;
padding:4px 0;
}

#tsadropdown ul li > ul {
width:100%;
}

#tsadropdown ul li > ul li {
display:block;
list-style:inside none;
position:relative;
margin:0;
padding:0;
}

#tsadropdown ul li > ul li a {
outline:none;
display:block;
position:relative;
color:#fff;
text-decoration:none;
text-shadow:2px 2px 4px #000;
margin:0;
padding:10px;
}

#tsadropdown,#tsadropdown > ul > li > ul > li a:hover {
background:rgba(52,170,252,0.72);
}

#tsadropdown ul li.kidnapper > a:hover,#tsadropdown > ul > li > a:hover {
background:#008ebe;
}


Silahkan simpan template anda setelahnya, kemudian lihat hasilnya di homepage blog anda.

Jika anda rasa artikel tutorial membuat horizontal menu dropdown yang saya tulis kali ini bermanfaat, silahkan anda tambahkan komentar atau bantu saya dengan membagikan artikel ini melalui tombol share di bawah postingan ini, terima kasih.
al ghifari
Artikel Cara Membuat Horizontal Menu Dropdown ini 100% bukan hasil copy paste
Dibaca oleh12606 pembaca dari 12727 pengunjung.
Ditulis Oleh
Semua artikel terproteksi DMCA.
Hanya script dan kode tutorial yang boleh di copy paste, dengan menyertakan sumbernya.
Artikel The Art of SEO lainnya bisa anda temukan pada menu related post berikut ;

13 comments

3/02/2013 02:05:00 AM

sorry sob baru balas abis gua utak-atik dulu templatenya yg rumit abis, bayangin code yg agan suruh cari aja gak ada jd gua pake instink aja yg mana mesti di edit dan hasilnya working sob!!!cuman warnanya kurang pas aja mohon bimbingannya lagi tp kalo agan gak tahu bagian mana yg mesti di edit gak masalah kan ni template bukan agan yg buat. thanx alot and buat tutorial yg ini saya kasih 99,5 % ketepatannya 0,5 persennya buat warnannya yang udah hampir tepat sekali lagi thanx a lot buat postx yg makin hari-makin lengkap and clear

3/02/2013 02:11:00 AM

maksud saya code "/header" ada(di sini commentx tag html gak bisa masuk jd gua ganti aja dgn tanda aphosthrope )

3/02/2013 02:52:00 AM

@kunio Diablo masalahnya horizontal menu yang ada di template sobat menggunakan gambar yang diunggah oleh pemilik template, jika saya memasukannya ke dalam tutorial yang saya buat, nanti saya dianggap mencuri hak cipta dari gambar tersebut,hehe..
tapi jika sobat ingin horizontal menunya mirip dengan di atas, silahkan ganti kode css nya saja (semua) dengan :

#tsadropdown {
height:24px;
display:block;
border:1px solid #606060;
border-radius:5px;
margin:0 auto;
padding:0;
}

#tsadropdown > ul {
list-style:inside none;
margin:0;
padding:0;
}

#tsadropdown > ul > li {
list-style:inside none;
float:left;
display:block;
position:relative;
margin:0;
padding:0;
}

#tsadropdown > ul > li > a {
border-right: 1px solid #999;
border-left: 1px solid #999;
color: #fff;
display: block;
float: left;
font-size:15px;
padding:4px 20px;
text-decoration:none;
}

#tsadropdown > ul > li:first-child > a {
border-radius:5px 0 0 5px;
}

#tsadropdown > ul > li > a:after {
content:'';
position:absolute;
border-right:1px solid #eee;
top:-1px;
bottom:-1px;
right:-2px;
z-index:99;
}

#tsadropdown ul li.kidnapper:hover > a:after {
top:0;
bottom:0;
}

#tsadropdown > ul > li.kidnapper > a:before {
content:'';
position:absolute;
top:50%;
right:3px;
border:5px solid transparent;
border-top:5px solid #fff;
}

#tsadropdown > ul > li.kidnapper:hover > a:before {
top:50%;
}

#tsadropdown ul li.kidnapper:hover > a {
background:#008ebe;
top:-1px;
z-index:999;
}

#tsadropdown ul li.kidnapper:hover > ul,#tsadropdown ul li.kidnapper:hover > div {
display:block;
}

#tsadropdown ul li > ul,#tsadropdown ul li > div {
display:none;
width:auto;
position:absolute;
top:24px;
background:#008ebe url(http://lh4.googleusercontent.com/-UG8asAhrEhM/UGlrnMtaC7I/AAAAAAAAATQ/SspIbaJxlwk/s128/menu-nav.png);
border-radius:0 0 5px 5px;
z-index:999;
padding:4px 0;
}

#tsadropdown ul li > ul {
width:100%;
}

#tsadropdown ul li > ul li {
display:block;
list-style:inside none;
position:relative;
margin:0;
padding:0;
}

#tsadropdown ul li > ul li a {
outline:none;
display:block;
position:relative;
color:#fff;
text-decoration:none;
margin:0;
padding:10px;
}

#tsadropdown,#tsadropdown > ul > li > ul > li a:hover {
background:#008ebe url(http://lh4.googleusercontent.com/-UG8asAhrEhM/UGlrnMtaC7I/AAAAAAAAATQ/SspIbaJxlwk/s128/menu-nav.png);
}

#tsadropdown ul li.kidnapper > a:hover,#tsadropdown > ul > li > a:hover {
background:rgba(52,170,270,0.55);
}

tampilan masih sedikit agak saya bedakan.

3/02/2013 03:12:00 AM

hehehehe... kirain entar siang balasx ternyata kita berdua masih online. ok ke topik utama yang gini jg gak apa-apa sob malah gua jadi bingung sm skill agan,(serba bisa!!!) rankx gua ubah jadi 110% ketepatan (bonus 10% karena skill modifikasi agan)hahahahaha

3/02/2013 03:13:00 AM

@kunio karena template yang sobat gunakan bukan bawaan blogger, maka kode </header> menjadi tidak ada atau lebih tepatnya diganti(tergantung pembuat template), tapi karena sobat kunio ini jago bahasa inggris, saya rasa sobat tidak akan lama lagi menguasai kode HTML dan CSS,hehe..
o ya, untuk memasukkan kode HTML di komentar, silahkan parse dulu kode HTML yang akan di masukkan, saya biasa menggunakan
http://www.blogcrowds.com/resources/parse_html.php

3/02/2013 03:20:00 AM

gua ramalin blog sobat bakal jadi numero uno entar gua share di yahoo answer kalo gua ketemu blogger pemula jg blog agan menurut saya pantas di jadikan referensi utama belajar blogging. ( enggak lebay nih sob )

3/02/2013 03:21:00 AM

@kunio Diablohehe.., kebetulan saja sedang online.
Alhamdulillah.., jangan sungkan untuk bertanya, jika saya bisa, pasti saya bantu.
o ya, terima kasih untuk ranking nya,hehe..

3/02/2013 03:31:00 AM

@kunio Diabloamin, amin sobh.
Sebenarnya mungkin semua penulis blog tutorial pasti mau membantu atau menjawab pertanyaan dari pembacanya, hanya perbedaan nya untuk blog-blog besar, jumlah komentar dan pertanyaan terlalu banyak untuk direspon satu-persatu, jika pengunjung blog saya ini melonjak pun saya takutnya akan seperti itu, namun mudah-mudahan saja tidak, hehe..
terima kasih banyak sebelumnya.
(nah, giliran saya request artikel di blog sobat, mana yang benar, thanks before atau thank in advance),hehe..

3/02/2013 10:25:00 AM

Gan, ane pernah menemui suatu blog yang terdapat menu dropdown tapi menggunakan image,,kira-kira gimana caranya ya gan??

3/02/2013 03:49:00 PM

sorry sob baru bisa balas abis baru online lagi request sobat udah gua usahain buat tapi ini cuma post yg gua bikin secepat gua bisa karena ada lagi kesibukan sob kapan-kapn gua edit lagi thanx buat requestnya

3/02/2013 03:52:00 PM

eiits tambahan jgn lupa berikan tanda share google+ nya hehehehehe

3/02/2013 09:07:00 PM

@Blognya VennySebenarnya untuk membuat menu menggunakan gambar cukup mengganti tulisan yang berwarna biru pada tutorial di atas dengan url gambar, kode HTML nya <img src="alamat url gambar" alt="keterangan gambar"> , kecuali konsepnya berbeda, Venny mungkin bisa memberikan contoh menu horizontal yang di maksud?

Post a Comment

Copyright © The Art of SEO

Designed By: the Art of SEO