Cara Membuat Menu Horizontal Drop Down Pada Blog Anda

Dalam hal optimasi blog, selalu saja anda bahkan mungkin juga saya selalu mencoba hal baru untuk penampilan blog anda. Dan salah satu hal tersebut yaitu Cara Membuat Menu Horizontal Drop Down Pada Blog Anda. Nah, jika anda ingin mencoba hal tersebut, maka silahkan ikuti langkah-langkah dibawah ini :

1. Seperti biasanya anda Login ke akun blog anda.
2. Selanjutnya klik menu Rancangan —> klik Edit HTML (jangan lupa centang Expand Template Widget buat cadangan jika ada masalah).
3.  Cari kode tersebut </head> dan selanjutnya letakkan kode dibawah ini tepat di atas kode </head>

// <![CDATA[
javascript" src="http://sites.google.com/site/zyztem33/js/chrome.js">
// ]]>

4. Selanjutnya kode dibawah ini letakkan tepat diatas kode ]]>//
javascript” src=”http://sites.google.com/site/zyztem33/js/chrome.js”&gt;
// ]]>

.chromestyle{
width: 100%;
font-weight: bold;
}
.chromestyle:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://nestoriko.googlepages.com/chromebg2.gif) center center repeat-x;
padding: 4px 0;
margin: 0;
text-align: left;
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #494949;
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(http://nestoriko.googlepages.com/chromebg2-over.gif) center center repeat-x;
}
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #B5E2FE;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA
,direction=135,strength=4);
}
.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #B5E2FE;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
.dropmenudiv a:hover{
background-color: #EBF7FF;
}

5. Selanjutnya cari kode berikut ini :

<b:includable id=’description’>
<div class=’descriptionwrapper’>
<p class=’description’><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

5. Selanjutnya copy kode berikut dan letakkan di bawah di bawah kode

chromemenu”>

<ul>
<li><a href=”http://rifweb.blogspot.com”>Home</a></li&gt;
<li><a href=”#” rel=”dropmenu1″>Menu1</a></li>
<li><a href=”#” rel=”dropmenu2″>Menu2</a></li>
</ul>
</div>
<!–menu drop down pertama –>
<div id=”dropmenu1″>
<a href=”URL sub menu1″>Sub Menu1</a>
<a href=”URL sub menu2″>Sub Menu2</a>
<a href=”URL sub menu3″>Sub Menu3</a>
</div>

<!–menu drop down kedua –>
<div id=”dropmenu2″>
<a href=”URL sub menu1″>Sub Menu1</a>
<a href=”URL sub menu2″>Sub Menu2</a>
<a href=”URL sub menu3″>Sub Menu3</a>
</div>
<script type=”text/javascript”>
cssdropdown.startchrome(“chromemenu”)
</script>

6. Terakhir klik simpan template

Nah, begitulah langkah-langkah yang harus anda lakukan dalam hal Cara Membuat Menu Horizontal Drop Down Pada Blog Anda, selamat mencoba.

Tinggalkan komentar