Membuat Menu Drop Down Dengan CSS Pada Blogspot

Posted by Unknown on 3/31/2009
35 komentar
This item was filled under , ,

Di postingan sebelumnya kita telah mempelajari bagaimana membuat menu drop down dengan menggunakan CSS. Nah, sekarang kita akan mempraktekkan bagaimana memasang menu drop down dengan CSS pada blog, dan kali ini tentu masih pada blogspot. Kebetulan saya webwalking (istilah apaan tuh?) tadi malam dan menemukan sebuah situs yang meyediakan struktur menu drop down CSS yang sangat bagus menurut saya. Oleh karena itu, saya akan memberikan tips bagaimana memasang menu tersebut pada blog pembaca. Jika pembaca ingin melihat struktur lain, silahkan kunjungi situsnya langsung di www.cssmenumaker.com. Untuk membuat menu drop down tersebut pada blogspot caranya sama dengan yang sebelum-sebelumnya. Berikut langkah-langkahnya:
  1. Silahkan login terlebih dahulu pada akun Blogspot pembaca.
  2. Klik link Tata Letak kemudian pilih sub tab menu Edit HTML
  3. Silahkan backup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa mengembalikannya kembali. Untuk melakukannya silahkan klik link Download Template Lengkap pada bagian Backup/Restore Template
  4. Beri centang pada kotak kecil disamping tulisan Expand Template Widget
  5. Cari struktur ]]></b:skin> pada kotak Edit Template tersebut
  6. Jika sudah ketemu, copy paste struktur CSS berikut ini tepat diatas struktur ]></b:skin>.
    @charset "utf-8";
    /* CSS Document */
    /*^'^ Navigation Structure ^'^*/
    .nav-container-outer{
    background: #990000;
    padding: 0px;
    height: 74px;
    background: url(http://nestoriko.googlepages.com/nav-bg.jpg);
    }
    .float-left{
    float: left;
    }
    .float-right{
    float: right;
    }
    .nav-container .divider{
    display:block;
    font-size:1px;
    border-width:0px;
    border-style:solid;
    }
    .nav-container .divider-vert{
    float:left;
    width:0px;
    display: none;
    }
    .nav-container .item-secondary-title{
    display:block;
    cursor:default;
    white-space:nowrap;
    }
    .clear{
    font-size:1px;
    height:0px;
    width:0px;
    clear:left;
    line-height:0px;
    display:block;
    float:none;
    }
    .nav-container{
    position:relative;
    zoom:1;
    margin: 0 auto;
    }
    .nav-container a, .nav-container li{
    float:left;
    display:block;
    white-space:nowrap;
    }
    .nav-container div a, .nav-container ul a, .nav-container ul li{
    float:none;
    }
    .nav-container ul{
    left:-10000px;
    position:absolute;
    }
    .nav-container, .nav-container ul{
    list-style:none;
    padding:0px;
    margin:0px;
    }
    .nav-container li a{
    float:none
    }
    .nav-container li{
    position:relative;
    }
    .nav-container ul{
    z-index:10;
    }
    .nav-container ul ul{
    z-index:20;
    }
    .nav-container ul ul ul{
    z-index:30;
    }
    .nav-container ul ul ul ul{
    z-index:40;
    }
    .nav-container ul ul ul ul ul{
    z-index:50;
    }
    li:hover>ul{
    left:auto;
    }
    #nav-container ul {
    top:100%;
    }
    #nav-container ul li:hover>ul{
    top:0px;
    left:100%;
    }
    /*^'^ Primary Items ^'^*/
    #nav-container a{
    padding:7px 17px 7px 18px;
    margin: 10px 0px 0px 0px;
    color: #FFFFFF;
    font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
    font-size:14px;
    text-decoration:none;
    font-weight: bold;
    background: url(http://nestoriko.googlepages.com/item-primary-bg.gif);
    background-repeat: no-repeat;
    background-position: top;
    }
    #nav-container a:hover{
    color: #6C3600;
    background: url(http://nestoriko.googlepages.com/item-primary-bg.gif);
    background-repeat: no-repeat;
    background-position: center;
    }
    /*^'^ Secondary Items Container ^'^*/
    #nav-container div, #nav-container ul{
    padding:10px 4px 10px 4px;
    margin:0px 0px 0px 0px;
    background: url(http://nestoriko.googlepages.com/item-secondary-container-bg.jpg);
    background-repeat: repeat-x;
    background-color: #FF9900;
    border-bottom: 1px solid #CA6500;
    }
    /*^'^ Secondary Items ^'^*/
    #nav-container div a, #nav-container ul a{
    padding:3px 10px 3px 6px;
    background-color: #FFFFFF;
    background: url(http://nestoriko.googlepages.com/item-secondary-bg.jpg);
    background-repeat: no-repeat;
    background-position: 0px 22px;
    font-size:11px;
    border-width:0px;
    border-style:none;
    margin: 0px 0px 0px 0px;
    width: 149px;
    }
    /*^'^ Secondary Items Hover State ^'^*/
    #nav-container div a:hover, #nav-container ul a:hover{
    background-color: #FFFFFF;
    background: url(http://nestoriko.googlepages.com/item-secondary-bg.jpg);
    background-repeat: no-repeat;
    color:#CC0000;
    }
    /*^'^ Secondary Item Titles ^'^*/
    #nav-container .item-secondary-title{
    cursor:default;
    padding:4px 0px 3px 7px;
    color: #6C3600;
    font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
    font-size:11px;
    /* background: url(http://nestoriko.googlepages.com/item-secondary-title-bg.jpg); */
    background-repeat: no-repeat;
    font-weight:bold;
    }
    /*^'^ Horizontal Dividers ^'^*/
    #nav-container .divider-horiz{
    border-top-width:1px;
    margin:5px 5px;
    border-color: #C16100;
    }
    /*^'^ Vertical Dividers ^'^*/
    #nav-container .divider-vert{
    border-left-width:1px;
    height:15px;
    margin:4px 2px 0px 2px;
    border-color:#AAAAAA;
    }
  7. Temukan struktur berikut pada template pembaca:
    <b:includable id='description'>
    <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
    </div>
    </b:includable>
    </b:widget>
    </b:section>
    </div>
  8. Copy paste struktur menu berikut ini tepat dibawah struktur yang Anda temukan pada langkah 7:
    <div class="nav-container-outer">
    <img src="http://nestoriko.googlepages.com/nav-bg-l.jpg" alt="" class="float-left" />
    <img src="http://nestoriko.googlepages.com/nav-bg-r.jpg" alt="" class="float-right" />
    <ul id="nav-container" class="nav-container">
    <li><a class="item-primary" href="#" target="_self">MENU1</a>
    <ul style="width:150px;">
    <li><a href="URL" title="sample" target="_self" >Sub Menu1</a></li>
    <li><a href="URL" title="sample" target="_self" >Sub Menu2</a></li>
    <li><a href="URL" title="sample" target="_self" >Sub Menu3</a></li>
    </ul>
    </li>
    <li><span class="divider divider-vert" ></span></li>
    <li><a class="item-primary" href="#" target="_self">MENU2</a>
    <ul style="width:150px;">
    <li><a href="URL" title="sample" target="_self" >Sub Menu1</a></li>
    <li><a href="URL" title="sample" target="_self" >Sub Menu2</a></li>
    <li><a href="URL" title="sample" target="_self" >Sub Menu3</a></li>
    </ul>
    </li>
    <li><span class="divider divider-vert" ></span></li>
    <li class="clear"> </li>
    </ul>
    </div>
  9. Perhatikan bagian yang diberi warna merah. Bagian tersebut merupakan struktur untuk 1 buah menu beserta sub menu-seb menu di dalamnya. Jika pembaca ingin menambah menu baru, silahkan buat lagi struktur seperti yang berwarna merah tersebut dan letakkan setelah struktur menu yang lain, misalnya setelah struktur "MENU2", dan seterusnya. Kemudian ganti "URL" dengan alamat halaman yang akan dituju jika sub menu diklik.
  10. Setelah itu klik tombol SIMPAN TEMPLATE
Untuk melihat hasilnya, silahkan buka disini.

Bookmark and Share

POSTINGAN LAIN YANG BERHUBUNGAN :




Dapatkan Tutorial Website Via Email:
Setelah membaca artikel diatas, jangan lupa ngasi komentar ya...

35 komentar on "Membuat Menu Drop Down Dengan CSS Pada Blogspot"



Post a Comment