logoblog

Membuat Menu Drop Down di Blogspot

PUSAT ILMU & TEKNOLOGI >>>> www.eyuana.com
Topik :Membuat Navigasi Menu Drop Down

Langkah- Langkah untuk buat menu Drop Down :
  1. Buka Blogspot kemudian Log In
  2. Masuk Rancangan >>> pilih Edit HTML
  3. Beri centang pada kotak kecil disamping tulisan Expand Template Widget
  4. Cari struktur ]]></b:skin> pada kotak Edit Template tersebut
  5. Jika sudah ketemu, copy paste struktur CSS berikut ini tepat diatas struktur ]></b:skin>.
    @charset "utf-8";
    /*-- Drop Down Navigasi--*//*--- www.eyuana.com --*/
    .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%;}
    #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;}
    #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;}
    #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;}
    #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;}
    #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-repeat: no-repeat;
    font-weight:bold;}/*---http://www.eyuana.com----*/
    #nav-container .divider-horiz{
    border-top-width:1px;
    margin:5px 5px;
    border-color: #C16100;}
    #nav-container .divider-vert{
    border-left-width:1px;
    height:15px;
    margin:4px 2px 0px 2px;
    border-color:#AAAAAA;}/*end navigasi--www.eyuana.com*/

  6. 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>

  7. 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>
  8. Ganti warna biru dengan alamat URL yang akan kamu link sesuai keinginan kamu. Menu  untuk nama menu km dan sub menu adalah bagian yang muncul saat kamu menekan menu dengan cursor pada mouse.
  9. Simpan Perubahan 
  10. Lihat Hasilnya dan jangan lupa tinggalkan komentar
  11. Terimakasih atas kunjungan Anda di www.eyuana.com