0 Trik Ngeblog Membuat Menu Horizontal

Oke kawan kita ketemu lagi ya, semoga pertemuan ini dapat menjadi salah satu ilmu yang bermanfaat demi kemajuan blogger indonesia. oke langsung saja hari ini saya akan memcoba membuat menu horizontal drop down, bagi teman - teman yang ingin membuat menu horizontal drop down silahkan coba cara berikut ini yang saya kutip dari tutorial-website:

Sebelum menjalankan langkah dibawah ada baiknya untuk membeckup template kesayangan dengan cara klik Download Template Lengkap pada Edit HTML.
dan apabila sudah melakukan langkah diatas langsung kita olah TKP :

1. Masuk ke halaman Dasboard > Tata Letak > Edit HTML > Ceklist 'Expand Template Widget'.

2. Gunakan Ctr+f pada kyboard untuk mencari ( Find ) kode.

3. Copy Paste kode berikut diatas kode </head>

<script type="text/javascript"
src="http://nestoriko.googlepages.com/chrome.js">
</script>

4. Setelah itu tambahkan kode CSS berikut diatas kode ]]></b:skin>


.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. Jika langkah diatas telah selesai, sekarang carilah kode seperti ini :

<b:includable id='description'>

<div class='descriptionwrapper'>

<p class='description'><span><data:description/></span></p>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

6. Dan Copy Pastekan kode berikut tepat dibawah kode diatas :

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://rifweb.blogspot.com">Home</a></li>
<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" class="dropmenudiv">
<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" class="dropmenudiv">
<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>



KET :
atau apabila ada kesusahan mencarinya letakan saja tepat dibawah kode </header>

7. Simpan Template dan Lihatlah Hasilnya.

Artikel Terkait