OZY-W On Facebook

Minggu, 27 Maret 2011

Cara Membuat Menu Horizontal Dengan Sub Menu Vertikal

Lagi tutorial blogger sob. tapi apa boleh buat cuma itu yang ada dipikiran saya, kalau mau bantu saya silahkan request.

Srceenshot :


Langkah-langkah Cara Membuat Menu Horizontal Dengan Sub Menu Vertikal :
  • Masuk ke Dasbor
  • Rancangan
  • Edit HTML
  • Centang Expend Template Widget
  • Copy Srcipt di bawah ini dan Paste-kan di atas 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;
}

Copy Srcipt di bawah ini dan Paste-kan di bawah kode ]]></b:skin>

<script src='http://emoticmastergomaster.googlecode.com/files/chrome.js' type='text/javascript'>
</script>

Copy Srcipt di bawah ini dan Paste-kan 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>

Tambahan : Jangan lupa untuk mengganti kode yang seharusnya di ganti

Langkah terakhir lakukan adalah menekan tombol save template. Terima kasih atas atas perhatiannya dan semoga tips membuat menu horizontal ini bermanfaat.

.:Selamat mencoba:.




  • Buat yang ingin copy paste harap baca aturannya di sini
  • Cara download di bolg OZY-W di sini


Buat sobat blogger yang suka dengan artikel saya, silahkan anda share/post di mana saja anda suka (Blogger, WordPress, facebook, twitter, dll). Namun, diwajibkan untuk mencantumkan link sumber dari artikel yang sobat blogger share/post (copy/paste). Terima kasih,,,

Artikel Terkait:

19 komentar:

  1. Ada demonya gak gan? Ane mau liat dulu ...
    Tolong hantarkan saya ke penampakanya. Ok :)

    BalasHapus
  2. oke gan dah sukses ni mantap hasil tinggal aku terapin di blog klikmarva.blogspot.com ya tar kalau ada pertanyaan lainnya jangan bosan ya

    BalasHapus
  3. Salam blogger, hemmm berkunjung untuk silaturahmi kawan, oy BTW templatenya sama nih ma ane,,,hehehe,,,i like its oke kawan sukses sll

    BalasHapus
  4. artikel yang mntab gan,,,, BTW ane udah follow tu,,, follow back ya gan,,, thanks,,,,,

    BalasHapus
  5. Info yang menarik sob...

    BalasHapus
  6. kalau di klik kanan ga bisa, gmn carany??

    BalasHapus
  7. ini kok beda ama yang kamu pake ya??

    BalasHapus
  8. kan itu beda dikit, coz itu menu yang saya pake pertama kali,

    BalasHapus
  9. di q g da body solusi?

    Kalu bisa q minta templatenya yang udah di modif jd entar q tinggal edit dikit....

    terimakasih sebeleumnnya...

    BalasHapus
  10. permisi gan, saya masih pemula dalam dunia blogg, penginya punya tampilan blogg yang interaktif tetapi sayang, mau bikin menu tab dan sub menunya aja nda bisa, so...than atas artikelnya ini mudahan bisa bantu ana gan,.

    BalasHapus
  11. @komputer store : Mana templatenya biar saya bantu modif
    @JAENAL MASKUN : Amiin

    BalasHapus
  12. Saya sudah coba...tapi kok ga bisa di edit ya ? terus kok adanya di bawah...? bagaimana mengaturnya ? Mohon dibalas melalu email saya ....terimakasih banyak ya Boss .....:)

    BalasHapus
  13. wow bisa dicoba ini, terimakasih sudah sharing :D

    BalasHapus
  14. Bagus..Bagus nih Tips nya...???

    BalasHapus

Saya percaya esok sudah tidak boleh mengubah apa yang berlaku hari ini, tetapi hari ini masih boleh mengubah apa yang akan terjadi pada hari esok

Walaupun kita tidak saling kenal, tetapi tiada salahnya kita berbagi sapa atau hanya tulisan " Hai " pada kolom komentar di bawah ini.
.:Terimakasih atas komentar Anda :.

OZY-W
© 2011 copyright OZY-W is proudly powered by Blogger.com
Free Download Software Full | Tips n Trik | Free Security Tool