Cara Membuat Menu Drop Down Horizontal Chrome ~ http://syamsudinnamaku.blogspot.com

Menu Drop Down Horizontal acapkali umumnya kita
lihat pada bagian atas maupun bawah header sebuah
blog. Anda tentu sudah tak asing lagi pada menu yang
satu ini yang salah satu previewnya adalah
yang seperti anda lihat di bawah ini :

Contohnya bisa Anda lihat di sini.

Untuk membuatnya cukup mudah hanya perlu
ketelitian dari anda dalam menempatkan kode
atau link yang anda ingin letakkan pada menu ini.
Ikuti langkahnya seperti berikut ini :

1.   Masuk ke Edit HTML

2.   Carilah kode </b:skin>

3.   Copy kode berikut dan letakkanlah
      di atas kode </b:skin> tadi.

.chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #0000CC;
width: 100%;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG6FP2QaKyHgkqs7qUmC5uAtgsjnrMeSu3d6Wj_epXXgxCiEIgAa0ejAz_Et6uyrGorwh38PrXzNNPAub6Gg4eGD-3-5v1ipmZlgw6XMPI8tyadsJqid1BeelBEHbLJDtPA0vsP7aaKfB_/) center center repeat-x;
padding: 4px 0;
margin: 0;
text-align: center;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #333300;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #B5E2FE;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiePZpkAHLGkZA7QuaTDphxU8t0f7kYUbTFPvk7041JCNtAdDScy15MOG58MmSru2hx5Qhscb8EBEAFma9KxLckt28x9qQbK7yWehvLmKAWOL55x2v55IhKvZ4gRWyn9HPUk7YG3Fdmhyphenhyphens_/) center center repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #B5E2FF;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:20px;
z-index:100;
background-color: white;
width: 220px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 4px;
border-bottom: 1px solid #B2E2FF;
padding: 4px 0px;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{
background-color: #D8F7FF;
}

4.   Cari lagi kode </head>

5.   Copy kode berikut dan letakkan
      di atas kode </head> tersebut,
    lalu simpan template anda.

6. Cari juga kode yang seperti berikut :

<b:includable id='description'>

</div>

</b:includable>

<b:includable id='main'>

Atau yang seperti ini :

<b:includable id='description'>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

7. Letakkan kode berikut ini di bawahnya :

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://syamsudinnamaku.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu 1</a></li>
<li><a href="#" rel="dropmenu2">Menu 2</a></li>
<li><a href="#" rel="dropmenu3">Menu 3</a></li>
<li><a href="#" rel="dropmenu4">Menu 4</a></li>
<li><a href="#" rel="dropmenu5">Menu 5</a></li>
<li><a href="#" rel="dropmenu6">Menu 6</a></li>
</ul>
</div>

<div id="dropmenu1" class="dropmenudiv">
<a href="URL sub menu 1A">Sub Menu 1A</a>
<a href="URL sub menu 1B">Sub Menu 1B</a>
<a href="URL sub menu 1C">Sub Menu 1C</a>
<a href="URL sub menu 1D">Sub Menu 1D</a>
<a href="URL sub menu 1E">Sub Menu 1E</a>
<a href="URL sub menu 1F">Sub Menu 1F</a>
</div>

<div id="dropmenu2" class="dropmenudiv">
<a href="URL sub menu 2A">Sub Menu 2A</a>
<a href="URL sub menu 2B">Sub Menu 2B</a>
<a href="URL sub menu 2C">Sub Menu 2C</a>
<a href="URL sub menu 2D">Sub Menu 2D</a>
<a href="URL sub menu 2E">Sub Menu 2E</a>
<a href="URL sub menu 2F">Sub Menu 2F</a>
</div>

<div id="dropmenu3" class="dropmenudiv">
<a href="URL sub menu 3A">Sub Menu 3A</a>
<a href="URL sub menu 3B">Sub Menu 3B</a>
<a href="URL sub menu 3C">Sub Menu 3C</a>
<a href="URL sub menu 3D">Sub Menu 3D</a>
<a href="URL sub menu 3E">Sub Menu 3E</a>
<a href="URL sub menu 3F">Sub Menu 3F</a>
</div>

<div id="dropmenu4" class="dropmenudiv">
<a href="URL sub menu 4A">Sub Menu 4A</a>
<a href="URL sub menu 4B">Sub Menu 4B</a>
<a href="URL sub menu 4C">Sub Menu 4C</a>
<a href="URL sub menu 4D">Sub Menu 4D</a>
<a href="URL sub menu 4E">Sub Menu 4E</a>
<a href="URL sub menu 4F">Sub Menu 4F</a>
</div>

<div id="dropmenu5" class="dropmenudiv">
<a href="URL sub menu 5A">Sub Menu 5A</a>
<a href="URL sub menu 5B">Sub Menu 5B</a>
<a href="URL sub menu 5C">Sub Menu 5C</a>
<a href="URL sub menu 5D">Sub Menu 5D</a>
<a href="URL sub menu 5E">Sub Menu 5E</a>
<a href="URL sub menu 5F">Sub Menu 5F</a>
</div>

<div id="dropmenu6" class="dropmenudiv">
<a href="URL sub menu 6A">Sub Menu 6A</a>
<a href="URL sub menu 6B">Sub Menu 6B</a>
<a href="URL sub menu 6C">Sub Menu 6C</a>
<a href="URL sub menu 6D">Sub Menu 6D</a>
<a href="URL sub menu 6E">Sub Menu 6E</a>
<a href="URL sub menu 6F">Sub Menu 6F</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

KETERANGAN :

Ganti http://syamsudinnamaku.blogspot.com
dengan nama URL blog anda.

Ubah kata Menu 1 s/d Menu 6 dengan
kata apa saja terserah anda.

Ganti URL sub menu 1A s/d URL URL sub menu 6F
dengan URL yang anda kehendaki.

Ganti Sub Menu 1A s/d Sub Menu 6F
dengan menyesuaikan URL anda tersebut.

Kurangi atau tambahkan Menu dan URL sub menu-
nya sesuai dengan yang anda inginkan.

Selamat mencoba, good luck!