Home » » Cara Membuat Menu Drop Down Tanpa Edit Template/Html

Cara Membuat Menu Drop Down Tanpa Edit Template/Html

Written By RACHMAT SR on Kamis, 20 Februari 2014 | 23.26

Bagi yang masih belum mengerti apa itu Drop Down artikel kali ini akan menjelaskan mengenai Menu Drop Down.
Menu Drop Down adalah Menu link yang apabila disentuh dengan Mouse akan ada menu link yang jatuh kebawah.
Memasang pada blog anda dengan Menu Drop Down juga bisa menambah peningkatan SEO Friendly Blog, karena dengan adanya menu Drop Down pengunjung akan lebih mudah  mencari Informasi kategori yang anda posting.
Untuk Membuat menu Drop Down silahkan anda Copypas Kode di bawah ini:

header-gif

<style>
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 0px #9c9c9c;
-webkit-box-shadow: 0 2px 0px #9c9c9c;
box-shadow: 0 2px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href='/'>Home</a></li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='nofollow'>Drop menu</a>
<ul>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 1</a></li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 2</a></li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 3</a></li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 4</a></li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 5</a></li>
</ul>
</li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='nofollow'>Drop menu 2</a>
<ul>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 1</a></li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 2</a></li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 3</a>
<ul>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 3.1</a></li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 3.2</a></li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 3.3</a></li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 3.4</a></li>
</ul>
</li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 4</a></li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 5</a></li>
</ul>
</li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='nofollow'>Drop menu 3</a>
<ul>
<li><a href='http://blogger-indonesia-sr.blogspot.com/search/label/SEO' rel='dofollow'>Menu 1</a></li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 2</a></li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 3</a></li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 4</a></li>
<li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='dofollow'>Menu 5</a></li>
</ul></li></ul>

 

Setelah anda Copy silahkan anda masuk ke dasbor dan pilih >> Tata Letak dan Pilih Tambah Gadget kemudian pilih Javascript/HTML kemudian Paste Kode diatas.

Jika anda ingin meletakkan-nya diatas header, seret gadget tadi dan letakkan diatas gadget header, jangan lupa klik simpan.

Untuk mengubah warna silahkan anda rubah sesuwai selerah, tinggal cari kode-kode sebagai contoh:  background: #0186ba; ganti kode yang berwarna merah dengan selera anda.

Semoga Cara Membuat Menu Drop Down Tanpa Edit Template Html ini bermanfaat.

NB: Link ‘http://blogger-indonesia-sr.blogspot.com/’ ganti dengan link anda, untuk menambahkan kategori dan ganti Judul contohnya sebagai berikut:

lihat kode warna merah ganti umpamanya dengan Judul <li><a href='http://blogger-indonesia-sr.blogspot.com/' rel='nofollow'>SEO</a> dan tambahkan search label kategori Posting anda, contohnya : <a href='http://blogger-indonesia-sr.blogspot.com/search/label/SEO' rel='dofollow'>SEO</a>

Lihat Contoh Menu Drop Down dibawah.

Semoga Posting Artikel mudah dimengerti dan bermanfaat Insya Allah.

Share this article :

2 komentar:

  1. makasih bnayak buat infonya,, tutornya sangat bermanfaat sekali

    http://goo.gl/R4TQx2

    BalasHapus
  2. sob sub menu nya gak keluar, gmana??

    BalasHapus

Thank for your visit, leave your suggestions and comments in the fields below ...

Silahkan meninggalkan komentar anda sehingga kita dapat berbagi pemikiran Anda dengan pengunjung lainnya.



 
Support : Al Islam | Paalem 3 | Mushola
Copyright © 2013. Panduan Blogger - All Rights Reserved
Template Created by Creating Website Modified by CaraGampang.Com
Proudly powered by Blogger