Monday, March 25, 2013

Cara Membuat Menu Dropdown horizontal Floating Keren di Blog

Cara Membuat Menu Dropdown horizontal Floating Keren di Blog 
   Kenal dengan Menu Dropdown kan ?, Menu Navigasi ini memang banyak digemari oleh para blogger karena dapat menghemat tempat dengan mengelompokan beberapa kategri dalam satu wadah.
Contoh Menu navigasi yang akan kita buat bisa sobat lihat dibawah ini. jika ingin melihat Demonya Klik saja pada Teks Link Demo dibawah gambar




Nah gimana keren kan ?. Bagai mana caranya, langsung saja ikuti langkah-langkah berikut ini :
  1. Seperti biasa sobat harus login dulu di akun blog sobat
  2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
  3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
  4. Jika semua sudah sekarang Cari Kode ]]></b:skin> Gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode
  5. Jika kode sudah ketemu,, Copy kode berikut dan letakan diatas kode ]]></b:skin> 
  6. /* Horyzontal Droupdown menu
    ----------------------------------------------- */
    #top-wrapper{background:url(http://1.bp.blogspot.com/-Dz55XjfHfIU/T2AtDWgb0aI/AAAAAAAAA9I/vZgjL1iEbgk/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}
    #topbar{width:980px;height:40px;margin:0 auto}
    #top{width:100%}
    #top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
    #top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}
    #top a.arrow{background-image:url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
    #top li{float:left;position:static;width:auto}
    #top li ul,#top ul li{width:170px}
    #top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
    #top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}
    #top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}
    #top li:hover ul,#top li.hvr ul{display:block}
    #top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
    #top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
    #top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
    #top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
    #top li:hover a span,#top li:hover a.arrow span{color:#f1c822}

    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .clearfix{display:inline-block}
    #inner{padding-top:40px;}
    #fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
    #fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
    * html, * html body{overflow-y:hidden;height:100%;}
    * html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
    * html #fixedinner{margin-right:17px;}
    * html #fixed {position:absolute;}
  7. Kode Warna Biru diatas adalah ukuran panjang menu
  8. Kalau sudah, langkah selanjutnya cari salah satu kode berikut :
  9. <div id='header-wrapper'>  
    (disini nanti letak kode menu dropdown)
    </b:section>
        </div>


    Jika Tidak Ketemu Kode Diatas Cari Kode Yang Ini

    <div class='header-outer'>
       (disini nanti posisi kode menu dropdown)
    </b:section>
        </div>
  10. Jika Sudah ketemu salah satu kode diatas letakan Kode dibawah ini dibawah salah satu kode Diatas
  11. <div id='fixed'>
    <div id='fixedinner'>
    <div id='top-wrapper'>
    <div id='topbar'>
    <ul id='top'>
    <li><a href='/'><span>Welcome</span>Homepage</a></li>
    <li><a href='#'><span>This is</span>About Us</a></li>

    <li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    </ul>
    </li>

    <li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    </ul>
    </li>

    <li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 5</a></li>
    </ul>
    </li>

    </ul>
    <br class='clearit'/>
    </div>
    <div style='clear:both;'/>
    </div>
    </div></div>
  12. Sehingga susunannya menjadi seperti ini
  13. <div class='header-outer'>

    <div id='fixed'>
    <div id='fixedinner'>
    <div id='top-wrapper'>
    <div id='topbar'>
    <ul id='top'>
    <li><a href='/'><span>Welcome</span>Homepage</a></li>
    <li><a href='#'><span>This is</span>About Us</a></li>

    <li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    </ul>
    </li>

    <li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    </ul>
    </li>

    <li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 5</a></li>
    </ul>
    </li>

    </ul>
    <br class='clearit'/>
    </div>
    <div style='clear:both;'/>
    </div>
    </div></div>

    </b:section>
        </div>
  14. Sekarang Klik Simpan Template 
  15. Selesai dan Lihat hasilnya
Demikianlah cara Cara Membuat Menu Dropdown horizontal Floating Keren di Blog semoga bisa bermanfaat bagi para blogger.

Sumber:  http://dapur-tutorial.blogspot.com

Suka Dengan Artikel Ini ?

0 comments "Cara Membuat Menu Dropdown horizontal Floating Keren di Blog ", Baca atau Masukkan Komentar

Post a Comment

Recent Comment

 
 
Copyright © 2013. Giarto Blog - All Rights Reserved
Design by Luhur Muhammad Fatah | Edited By ARSIP