Membuat Menu Drop Down di Blogspot

Kemarin saya ditanya oleh seorang temen, apa itu menu drop down dan bagaimana cara membuatnya. Perlu teman-teman semua ketahui menu drop down adalah menu horisontal yang terdapat di bawah header blog. Dan apabila mouse kita letakkan ke salah satu menu tersebut akan muncul sub menu yang susunannya ke bawah. yang tentunya menu yang berkaitan Ah... pokoknya gitulah menurut pengertian saya. 

Untuk cara membuatnya, saya akan jelaskan satu persatu, perhatikan baik-baik ya..........

1.  Cari kode berikut ]]></b:skin>
2.  Lalu letakkan kode berikut ini.

#navdropdownmenu{

background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgmGc_xzoAmpGi54vgxsIESacl4_pCXSbBM-q3xpjUEX9xlQodhhlF9RJ69IjIBJOwTabJvAOmWadmxQBf2ij821lWcJF-pIaot1EBg1UqVdlRRZ1dJ21XDOxgQMWGSczwr1PweLHJnky2/s800/navbar.gif) repeat-x top;

width:700px;

height:auto;

margin:0;

padding:0;

border-top: 1px solid #AFAFAF;

border-bottom: 1px solid #FFFFFF;

}

#navdropdownmenu ul{

float:left;

list-style:none;

margin:0;

padding:0;

}

#navdropdownmenu li{

list-style:none;

float:left;

}

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

color:#000000;

font-weight:bold;

display:block;

text-shadow: 0px 1px 1px #fff;

padding:9px 10px 9px 10px;

font-size: 12px;

font-family: verdana;

text-decoration:none;

}

#navdropdownmenu li a:hover{

background:#9f9f9f;

color:#ffffff;

}

#navdropdownmenu li ul{

z-index:10;

position:absolute;

height:auto;

width:200px;

visibility:hidden;

}

#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{

float:none;

background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgmGc_xzoAmpGi54vgxsIESacl4_pCXSbBM-q3xpjUEX9xlQodhhlF9RJ69IjIBJOwTabJvAOmWadmxQBf2ij821lWcJF-pIaot1EBg1UqVdlRRZ1dJ21XDOxgQMWGSczwr1PweLHJnky2/s800/navbar.gif) repeat-x top;

width:200px;

border-width:1px;

border-style:solid;

border-color:#575757;

}

#navdropdownmenu li ul li a:hover{

background:#000000;

color:#ffffff;

}

#navdropdownmenu li:hover ul{

left:auto;

visibility:visible;
}

Oya,. jika anda telah menggunakan navigasi menu yang biasa, hapuslah semua kode CSS dari navigasi menu tersebut.

3.  Cari kode yang mirip dengan kode dibawah.

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='It's a Hardlife' type='Header'/>

</b:section>

</div>

4.  Dibawahnya, ketikkan kode berikut.

<div id='navdropdownmenu'>

<ul id='navdropdownmenu'>

<li><a href='http://blackyz-art.blogspot.com/search?max-results=1000'>Daftar Isi</a></li>

<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Norah Jones</a>

<ul>

<li><a href='#'>Don&#39;t Know Why</a></li>

<li><a href='#'>Feelin The Same Way</a></li>

<li><a href='#'>Come Away With Me</a></li>

</ul>

</li>

<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Sting</a>

<ul>

<li><a href='#'>Englishman In Newyork</a></li>

<li><a href='#'>Shape Of My Heart</a></li>

<li><a href='#'>Fields Of Gold</a></li>

<li><a href='#'>If I Ever Lose My Faith In You</a></li>

<li><a href='#'>Fragile</a></li>

<li><a href='#'>Desert Rose</a></li>

</ul>

</li>

<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Sade</a>

<ul>

<li><a href='#'>Smooth Operator</a></li>

<li><a href='#'>Kiss Of Life</a></li>

<li><a href='#'>Your Love Is King</a></li>

</ul>

</li>

<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Alanis</a>

<ul>

<li><a href='#'>That I Would Be Good</a></li>

<li><a href='#'>Front Row</a></li>

<li><a href='#'>One</a></li>

</ul>

</li>

<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Meja</a>

<ul>

<li><a href='#'>Dindi</a></li>

<li><a href='#'>Venus</a></li>

<li><a href='#'>Red Light</a></li>

<li><a href='#'>The One</a></li>

<li><a href='#'>Circle Game</a></li>

<li><a href='#'>Aqua de Beber</a></li>

</ul>

</li>
</ul>
</div>

Gantilah tulisan http://blackyz-art.blogspot.com dengan link yang anda inginkan dengan url yang anda inginkan. Anda bisa menambah atau mengurangi jumlah kode tersebut.

5.  Klik Simpan Template.

6.  Lihat hasilnya.

Gampang bukan, jika ada yang mau ditanyakan isi aja kotak komentar yang ada di bawah, saya akan berusaha menjawabnya.

Semoga bermanfaat......

Related Posts

Trik Blog

• Mengapa Lantarandigital.co.id adalah Senjata Rahasia Digital Marketing Anda
• Cara membuat populer post slider
• Connect warna HTML
• Cara Membuat Tulisan Bervariasi di Buku Tamu/CBox
• Efek Ringan
• jQuery Carousel dengan UI Kit untuk Blogger
• Membagi Sidebar Menjadi 2 Kolom di Blogspot
• Modifikasi Sidebar di Blogspot
• Memasang Menu Slide-In di Blogspot
• Cara Merubah Lebar Kolom Template
• Cara Membuat Spolier Di Blogspot
• Membuat Border Dan Background Template Blogger
• Mengganti Pager Link Blogger Dengan Icon
• Modifikasi Blockquote Di Blogspot
• Membuat Tombol Back To Top Di Blogger
• Membuat Widget Hanya Tampil di Halaman Tertentu
• Menghilangkan Link Posting Lama dan Posting Baru di Blog
• Membuat Menu dTree di Blogger
• Cara Membuat Read More Otomatis Versi 3
• Pasang Banner di Header Blog
• Membuat 3 Kolom di Bawah Header Blogspot
• Tutorial Membuat Text Area
• Membuat Tab View di Blogspot

Anda sedang membaca artikel tentang Membuat Menu Drop Down di Blogspot dan anda bisa menemukan artikel Membuat Menu Drop Down di Blogspot ini dengan url https://blackyz-art.blogspot.com/2013/07/membuat-menu-drop-down-di-blogspot.html. Anda boleh menyebarluaskan atau mengcopy artikel Membuat Menu Drop Down di Blogspot ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.