Cara Membuat Menu Horizontal Drop Down

Pernahkan anda melihat blog yg pd kolom paling atas banyak sekali tulisan seperti : Home, About Me, Link Exchange, Guest Book, dll. Nah..pd postingan kali ini saya akan memberi tips tentang Cara Membuat Menu Horizontal Drop Down. Menu horizontal merupakan kumpulan beberapa link yg diletakkan secara horizontal dan biasanya berada di bawah header. .

Sebenarnya hal itu tidaklah sulit, tetapi desain template antara satu dgn yg lain sangatlah berbeda, sehingga kita harus mengatur ukuran besar dan kecil, panjang dan lebar, dan link yg ada. Untuk itu, kalau anda berminat membuat Menu Horizontal Drop Down ini, lebih baik anda membuat satu blog percobaan, agar jika terjadi kesalahan tdk merusak blog utama anda. Kalau sdah berhasil anda dpat mengerjakannya di blog utama anda.

Langsung saja caranya sebagai berikut :

1. Login ke blogger
2. Klik rancangan.
3. Pilih edit HTML.
4. Sebelum melakukan langkah berikutnya lebih baik klik Download Template Lengkap (Antisipasi jika ada kesalahan)
5. Cari kode ]]></b:skin> , utk mempermudah pencarian tekan Ctrl + F.
6. Copy paste kode di bawah ini, di atas kode ]]></b:skin>

#NavbarMenu
{
background:#CEE0E6;
width:930px;
height:32px;
color:#000000;
font:bold 8px Arial, Tahoma, Verdana;
clear:both;
margin:0 auto;
padding:0}
#NavbarMenuleft
{
width:955px;
float:left;
margin:0;
padding:0
}
#nav li
{
list-style:none;
float:left;
margin:0;
padding:0
}
#nav li a,#nav li a:link,#nav li a:visited
{
color:#000000;
display:block;
text-transform:capitalize;
font:bold 13px Georgia, Times New Roman;
margin:0;
padding:12px 11px 8px
}
#nav li a:hover,#nav li a:active
{
background:#ccc;
color:#000000;
text-decoration:none;
border-right:1px solid #296204;
border-bottom:1px solid #296204;
border-left:1px solid #296204;
margin:0;
padding:12px 9px 8px
}
#nav li li a,#nav li li a:link,#nav li li a:visited
{
background:#ccc;
width:200px;
color:#000000;
text-transform:capitalize;
float:none;
border-bottom:1px solid #0d2601;
border-left:1px solid #0d2601;
border-right:1px solid #0d2601;
font:bold 12px Georgia, Times New Roman;
margin:0;
padding:7px 10px
}
#nav li li a:hover,#nav li li a:active
{
background:#CEE0E6;
color:#000000;
padding:7px 10px
}
#nav li a.enclose,#nav li a.enclose:visited
{
border-top:1px solid #000
}
#nav li ul
{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0;
padding:0
}
#nav li ul a
{
width:140px
}
#nav li ul ul
{
margin:-75px 0 0 171px
}
#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul
{
left:-999em
}
#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul
{
left:auto
}
#nav li:hover,#nav li.sfhover
{
position:static
}
#subnavbar
{
background:#004313;
width:968px;
height:24px;
color:#FFF;
margin:0;
padding:0
}
#subnav li a,#subnav li a:link,#subnav li a:visited
{
color:#f9fc01;
display:block;
font-size:11px;
text-transform:capitalize;
margin:0 5px 0 0;
padding:3px 13px
}
#subnav li a:hover,#subnav li a:active
{
color:#DCD900;
display:block;
text-decoration:none;
margin:0 5px 0 0;
padding:3px 13px
}
#nav ul,#subnav ul,#subnav li
{
float:left;
list-style:none;
margin:0;
padding:0
}
*,#nav,#subnav

7. Lalu cari kode yg mirip dgn kode di bawah ini (Mirip bukan sama)

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Life Is Blogging (Header)' type='Header'/>
</b:section>
</div>

8. Jika sudah ketemu, copy kode di bawah ini setelah kode </div>

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='http://infotipsblogging.blogspot.com/2011/06/daftar-isi.html' title='Daftar Isi'>Daftar Isi</a></li>
<li><a href='http://infotipsblogging.blogspot.com/2011/06/blog-post.html' title='Guest Book'>Guest Book</a></li>
<li><a href='http://infotipsblogging.blogspot.com/2011/06/enter-your-link.html' title='Link Exchange'>Link Exchange</a></li>
<li><a href='http://www.facebook.com/pages/My-Life-Is-Blogging/120236454727772?sk=wall' title='FanPage'>FanPage</a></li>
<li><a href='#'>Cheats</a>
<ul>
<li><a href='http://infotipsblogging.blogspot.com/search/label/Ninja%20Saga' title='Cheat Ninja Saga'>Ninja Saga</a></li>
<li><a href='http://infotipsblogging.blogspot.com/search/label/Point%20Blank' title='Cheat Point Blank'>Point Blank</a></li></ul></li>
<li><a href='#'>Komputer</a>
<ul>
<li><a href='http://infotipsblogging.blogspot.com/search/label/Game' title='Game'>Game</a></li>
<li><a href='http://infotipsblogging.blogspot.com/search/label/Software' title='Software'>Software</a></li></ul></li>
<li><a href='#'>Member Of</a>
<ul>
<li><a href='http://infotipsblogging.blogspot.com/2011/06/member-of-kbw-20.html' title='KBw /20’'>KBw /20&#8217;</a></li>
<li><a href='http://infotipsblogging.blogspot.com/2011/07/member-of-bool.html' title='The Bo’OL'>The Bo&#8217;OL</a></li>
<li><a href='http://infotipsblogging.blogspot.com/2011/06/member-of-always-bw.html' title='Always Bw'>Always Bw</a></li></ul></li>
<li><a href='#'>Tips</a>
<ul>
<li><a href='http://infotipsblogging.blogspot.com/search/label/Tips%20Blogging' title='Tips Blogging'>Tips Blogging</a></li>
<li><a href='http://infotipsblogging.blogspot.com/search/label/Tips%20Internet' title='Tips Internet'>Tips Internet</a></li>
<li><a href='http://infotipsblogging.blogspot.com/search/label/Tips%20Komputer' title='Tips Komputer'>Tips Komputer</a></li></ul></li>
</ul></div>
</div>

9. Kemudian simpan template dan lihat hasilnya.

NB : untuk lebarnya anda bisa menggantinya. Cari kode #NavbarMenu , di bagian bwah anda akan melihat kode width:930px; , maka jika ukuran itu tidak sesuai anda dpat menggantinya.
Kemudian anda juga harus mengubah link yang ada, karena yang anda postingkan tadi adalah blog saya maka anda harus mengganti link nya ke blog anda.

Semoga Bermanfaat.

Related Post :

Tips Blogging

• Tips Agar Blog Anti Klik Kanan
• Membuat Efek Bubble Pada Cursor
• Membuat Efek Bintang Berjatuhan Dari Cursor
• Cara Menampilkan Widget Hanya Di Homepage Dan Halaman Posting Saja
• Cara Membuat Recent Post Slide Show
• Membuat Daftar Isi Tampilan Explorer
• Membuat Artikel Terkait / Related Post
• Cara Menampilkan Status YM Di Blog
• Cara Membuat Menu Navigasi BreadCrumb
• Cara Membuat Back To Top Dengan JQuery
• Cara Daftar Envolve Dan Memasang Widget Envolve Di Blog
• Cara Membuat Widget Icon Burung Terbang Twitter
• Cara Membuat Link Open New Tab
• Memasang Tombol Komentar Klasik Di Atas Kotak Komentar Blog
• Cara Memasang Lagu Di Blog
• Cara Membuat Iklan Melayang Dengan Tombol Close
• Cara Membuat Scroll Pada Kotak Komentar Blogger
• Cara Menyembunyikan NavBar Pada Blogger
• Cara membuat Tab View
• Scan Blog atau Website Anda
• Cara Membuat Daftar Isi
• Cara Memasang Widget Translate Pada Blog
• Pasang Widget Internet Speed Test Di Blog Anda
• Menambahkan Reply Buttoon Pada Komentar Blogger

Subcribe Via Email :

Jika Anda Menyukai Artikel Blog ini, Masukan Alamat Email Anda Pada Kolom di Bawah, Maka Anda Akan Mendapatkan Kiriman Email Setiap Kali Ada Posting Baru. Terima Kasih Atas Partisifasinya

Enter Your Email Address :