Friday, May 11, 2012

Cara Membuat Menu Horisontal dengan Sub menu Vertikal


Posted by: Bloggertrik // 3:18 AM | Kategori: trik blog

Biasanya pada tempalate akan ditemui yang namanya menu horisontal. Letaknya di bawah header blog namun ada juga yang tidak disediakan menu horisontal pada template.

Kali ini tutorial yang Fauzionline berikan adalah cara membuat Menu horisontal dengan tambahan sub menu vertikal. Bagi blog yang templatenya belum mempunyai menu horisontal dengan tambahan submenu vertikal silahkan simak caranhya, siapa tahu anda tertarik untuk mencoba memasang di template blog anda.

Untuk membuat menu horisontal dengan submenu vertikal silahkan simak tutorialnya dibawah ini:

1. login ke akun blog anda
2. klik menu rancangan, pilih edit HTML
3. Centang Expand Template Widget
3. Pastekan kode dibawah ini diatas kode ]]></b:skin>
.chromestyle{

width: 90%;

font-weight: regular;

}



.chromestyle:after{

content: ".";

display: block;

height: 0;


clear: both;

visibility: hidden;

}



.chromestyle ul{

border: 1px solid #000000;

width: 100%;

background: #000000

repeat-x;


padding: 10px 10px 0 45px;

margin: 0;

text-align: left;

}



.chromestyle ul li{

display: inline;

}



.chromestyle ul li a{


color: #7CFC00;

padding: 4px 7px;

margin: 0;

text-decoration: none;

border-right: 1px solid #000000;

}



.chromestyle ul li a:hover, .chromestyle ul li a.selected{

background: #202020


repeat-x;

}



.dropmenudiv{

position:absolute;

top: 0;

border: 1px solid #000000;

border-bottom-width: 0;

font:regular 11px Trebuchet;


line-height:18px;

z-index:100;

background-color: black;

width: 200px;

visibility: hidden;

filter: color=#7CFC00

,direction=135,strength=4);

}




.dropmenudiv a{

width: 100%;

display: block;

text-indent: 3px;

border-bottom: 1px solid #000000;

padding: 5px 0;

text-decoration: none;

text-align: left;

font-weight: regular;


color: Lawngreen;

}



.dropmenudiv a:hover{

background-color: #202020;

}


Kemudian copy dan pastekan kode dibawah ini setelah kode ]]></b:skin>
<script src='http://emoticmastergomaster.googlecode.com/files/chrome.js' type='text/javascript'>

</script>


copy kode dibawah ini dan pastekan di bawah kode <body>
<div class='chromestyle' id='chromemenu'>



<ul>

<li><a href='/'>Home</a></li>

<li><a href='#' rel='dropmenu1'>Menu1</a></li>


<li><a href='#' rel='dropmenu2'>Menu2</a></li>

<li><a href='#' rel='dropmenu3'>Menu3</a></li>

<li><a href='#' rel='dropmenu4'>Menu4</a></li>


<li><a href='#' rel='dropmenu5'>Menu5</a></li>

<li><a href='#' rel='dropmenu6'>Menu6</a></li>

<li><a href='#' rel='dropmenu7'>Menu7</a></li>


<li><a href='#' rel='dropmenu8'>Menu8</a></li>

</ul>

</div>



<!--code sub menu vertikal -->

<div class='dropmenudiv' 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>





<!--code sub menu vertikal2 -->

<div class='dropmenudiv' 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(&quot;chromemenu&quot;)


</script>


5. klik tombol simpan template

pada tulisan "URL sub menu1" ganti dengan url yang akan anda masukkan dan "Sub Menu1" dengan judul url yang akan anda cantumkan
Cara Membuat Menu Horisontal dengan Sub menu Vertikal
Cara Membuat Menu Horisontal dengan Sub menu Vertikal Bloggertrik
By:
Published:
Rating Artikel : 5 rates
Jumlah Voting : 160 Orang Total time:

Link Url: http://bloggertrik.blogspot.com/2012/05/cara-membuat-menu-horisontal-dengan-sub.html