Cara Memasang Menu Horisontal Dengan CSS

Cara memasang menu horisontal dengan CSS

Hampir semua blog menggunakan menu horisontal dengan sub menu vertikal,di samping untuk memudahkan pengunjung blog untuk mengeksekusi is dsri blog kita juga menu seperti ini juga bisa mempercantik blog kita,
lewat postingan saya kali ini saya akan mencoba meberikan tips memasangnya pada blog:

1.  Sigin dulu ke akun Blogger sobat
2.Klik Template >> Edit HTML >> Klik Lanjutkan >> Centang Expand widged Template
3. Tekan control+F cari Code seperti ini : ]]></b:skin> lalu letakkan code CSS berikut tepat di atasnya:

ul#css3menu1,ul#css3menu1 ul{
    margin:0;list-style:none;padding:0;background-color:#000;background-image:url("mainbk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 ul{
    display:none;position:absolute;left:0;top:100%;-moz-box-shadow:0.7px 0.7px 1px #777777;-webkit-box-shadow:0.7px 0.7px 1px #777777;box-shadow:0.7px 0.7px 1px #777777;background-color:#005500;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#5A5E60;padding:0 9px 9px;}
ul#css3menu1 li:hover>*{
    display:block;}
ul#css3menu1 li{
    position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
    z-index:1;}
ul#css3menu1{
    padding:1px 1px 1px 0;font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;
    *display:inline;}
ul#css3menu1>li{
    margin:0 0 0 1px;}
* html ul#css3menu1 li a{
    display:inline-block;}
ul#css3menu1 ul>li{
    margin:1px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;}
ul#css3menu1 a{
    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Comic Sans MS;color:#ffffff;cursor:default;padding:10px;background-color:#333;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{
    float:none;margin:9px 0 0;}
ul#css3menu1 ul a{
    text-align:left;padding:8px 0 0 0;background-color:#005500;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#262626;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:11px Trebuchet MS;color:#ffffff;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 a.pressed{
    background-color:#55ff7f;border-style:none;color:#ffffff;text-decoration:none;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu1 img{
    border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu1 img.over{
    display:none;}
ul#css3menu1 li:hover > a img.def{
    display:none;}
ul#css3menu1 li:hover > a img.over{
    display:inline;}
ul#css3menu1 li a.pressed img.over{
    display:inline;}
ul#css3menu1 li a.pressed img.def{
    display:none;}
ul#css3menu1 span{
    display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
    background-color:#55ff7f;background-image:url("mainbk.png");background-position:0 100px;border-style:none;color:#ffffff;text-decoration:none;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
    background-color:#ff557f;background-image:none;border-style:solid;border-color:#262626;color:#1F80AE;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
    border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topfirst:hover>a,ul#css3menu1 li.topfirst>a.pressed{
    text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.topmenu>a{
    -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu>a.pressed{
    text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.toplast>a{
    border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.toplast:hover>a,ul#css3menu1 li.toplast>a.pressed{
    text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 _>li>a{
    padding:0;}
ul#css3menu1 li.subfirst>a{
    border-width:0;border-style:none;padding:0;}
ul#css3menu1 li.subfirst:hover>a,ul#css3menu1 li.subfirst>a.pressed{
    border-style:none;}

4. Cari lagi code berikut: </head> letakkan code berikut tepat di atasnya:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <!-- Start css3menu.com HEAD section -->
    <link rel="stylesheet" href="MENU 1. html_files/css3menu1/style.css" type="text/css" /><style>._css3m{display:none}</style>
    <!-- End css3menu.com HEAD section -->

5.Selesai,>> Kilk Simpan Template Dan tutup Edit Template.
Santai dulu untuk tahap pertama sudah selesai kini kembali ke blogger dasbor:
1.Klik >> Tata Letak >> Tambah gadged >> HTML/Javscript paste code berikut di dalamnya:

<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a href="#">Home</a></li>
    <li class="topmenu"><a href="#" style="height:24px;line-height:24px;">item 1</a></li>
    <li class="topmenu"><a href="#" style="height:24px;line-height:24px;">item 2</a></li>
    <li class="topmenu"><a href="#" style="height:24px;line-height:24px;"><span>item 3</span></a>
    <ul>
        <li class="subfirst"><a href="#">sub item 3-1</a></li>
        <li><a href="http://dyenps-cabangsipon.blogspot.com/">sub item 3-2</a></li>
    </ul></li>
    <li class="topmenu"><a href="#" style="height:24px;line-height:24px;">item 4</a></li>
    <li class="topmenu"><a href="#" style="height:24px;line-height:24px;">item 5</a></li>
    <li class="topmenu"><a href="#" style="height:24px;line-height:24px;">Item 6</a></li>
    <li class="topmenu"><a href="#" style="height:24px;line-height:24px;">Item 7</a></li>
    <li class="topmenu"><a href="#" style="height:24px;line-height:24px;">item 8</a></li>
    <li class="topmenu"><a href="#" style="height:24px;line-height:24px;"><span>Item 9</span></a>
    <ul>
        <li class="subfirst"><a href="#">sub Item 9 -1</a></li>
    </ul></li>
    <li class="toplast"><a href="#" style="height:24px;line-height:24px;"><span>Item 10</span></a>
    <ul>
        <li class="subfirst"><a href="#">sub Item 10- 1</a></li>
        <li><a href="#">sub Item 10 -2</a></li>
    </ul></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">Simple CSS Menu Css3Menu.com</a></p>
<!-- End css3menu.com BODY section -->

     Terakhir kilk simpan,dan cara membuat menu horisontal sub menu dengan code CSS,dan sekarang lihat hasinya ,keren kan..??
Keterangan:
1. Kode # warna merah ganti dengan URL blog sobat seperti contoh berwarna orange di atas.
2.Kode berwarna Biru adalah judul menu dari blog yang sobat inginkan, bisa di isi sesuai kebutuhan.
3. Height 25px adalah tinggi dari bidang menu yang kita buat,bisa di ubah sesuai keinginan sobat.
4.Letakan Gadgednya Diatas Header atau dibawah header sesuai keinginan .
Bila sobat inginkan code di atas masih bisa di modifikasi sesuai selera misalnya mengganti tulisan Home dengan gambaratau menambah sub menu dari menu utama:
Bila ingin menambah menu utama cukup tambahkan code yang sama seperti ini:
 <li class="topmenu"><a href="#" style="height:24px;line-height:24px;">item 4</a></li>
Tambahkan di bawah atau di atas code yang sama seperti di atas.
Atau bila ingin menambahkan sub menu cukup tambahkan code seperti ini:
  <li class="subfirst"><a href="#">sub Item 9 -1</a></li>
Tambahkan di bawah atau di atas code yang sama seperti di atas.

Demikian Cara Membuat Menu Horisontal dengan Sub menu vertikal ,semoga ada manfaatnya terutama bagi newbie atau pemula seperti saya ini.....heheheh.
Jangan lupa di komentari ya..?biar kita bisa memperbaiki bila ada kekurangan .....

Sumber : http://dyenps-cabangsipon.blogspot.com/2012/06/cara-memasang-menu-horisontal-dengan.html

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara Memasang Menu Horisontal Dengan CSS. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://azka-veiro.blogspot.com/2012/07/cara-memasang-menu-horisontal-dengan.html" target="_blank">Cara Memasang Menu Horisontal Dengan CSS</a>

:: Get this widget ! ::