Cara Mudah Membuat Menu Navigasi Dropdown pada Blog

Posted by Unknown Jumat, 11 Mei 2012 0 komentar

 Cara Membuat Menu Navigasi Dropdown. Tentu banyak blogger yang menginginkan menu jenis ini, karna selain bisa mempercantik blog, juga memudahkan pengunjung dalam menemukan sesuatu yang ingin dicari, contohnya ingin mencari artikel berdasarkan label, yang biasanya berada di sub menu dari menu navigasi dropdown ini.Menu Drop Down ini sudah saya, coba... Dan Hasilnya Berhasil...!!!

ini dia, langkah"nya,, Please, you follow it..!!
  • Login ke Blogger >> klik Tata Letak >> Edit HTML. 
  • Backup dulu template anda. caranya pasti sudah taulah.. >> Download Template Lengkap 
  • Cari Code :
    ]]></b:skin>
     
  • Copy paste code di bawah ini tepat di atasnya

    #Menumainwrapx {
    background:url(http://farm2.static.flickr.com/1046/5118494385_6bed6df208_t.jpg) repeat-x scroll 0 0 #222222;
    border-bottom:1px solid #CCCCCC;
    height:42px;
    margin:0;
    padding:0;
    }
    #NavbarMenux {
    width: 950px;
    height: 41px;
    font-size: 13px;
    color:#333333;
    margin: 0px;
    padding: 0;
    font-weight:bold;
    font-family:arial;
    margin: 0 auto;
    }
    #NavbarMenuleftx {
    width: 950px;
    margin: 0;float:left;}
    #navx { margin: 0;
    padding: 0; }
    #navx ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0; }
    #navx li {
    list-style: none;
    margin: 0px;
    padding: 0; }
    #navx li a,
    #navx li a:link,
    #navx li a:visited {
    height: 22px;
    color: #333333;
    display: block;
    font-size: 13px;
    text-decoration: none;
    margin: 0;
    padding:10px 13px 9px 13px;
    border-right: 1px solid #CFCFCF; }
    #navx li a:hover,
    #navx li a:active {
    color: #333;
    margin: 0;
    text-decoration: none;
    background:#F0F0F0;
    }
    #navx li li a, #nav li li a:link,
    #navx li li a:visited {
    background:url(http://farm2.static.flickr.com/1190/5119105082_e113afd892_t.jpg) repeat-x scroll 0 0 #f5f5f5;
    min-width: 150px;
    color: #333333;
    font-size: 14px;
    font-weight: normal;
    float: none; margin: 0;
    padding: 5px 10px;
    font-weight:bold;
    font-family:arial;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.8);
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);
    text-align:left;}
    #navx li li a:hover,
    #navx li li a:active {
    background: #F5F5F5;
    color: #333;
    }
    #navx li {
    float: left;
    padding: 0; }
    #navx li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin:0;
    padding: 0;
    border-top:1px solid #242424;
    }
    #navx li ul a {
    width: 140px; }
    #navx li ul ul {
    margin: -41.5px 0 0 176px;
    border:none;}
    #navx li:hover ul ul,
    #navx li:hover ul ul ul, #navx li.sfhover ul ul,
    #navx li.sfhover ul ul ul {
    left: -999em; }
    #navx li:hover ul,
    #navx li li:hover ul,
    #navx li li li:hover ul,
    #navx li.sfhover ul,
    #navx li li.sfhover ul,
    #navx li li li.sfhover ul {
    left: auto; }
    #navx li:hover,
    #navx li.sfhover {
    position: static; }

    Buka page element cari gadget dengan nama ‘MembuatMenu’ yang berada di atas gadget posting blog, lalu klik edit dan masukkan kode berikut pada kotak content.
    <div id='navbarmenuleftx'>
    <ul id='navx'>

    <li><a href='/'>Home</a></li>
    <li><a href='#yourlink'>Menu 1</a>
    <ul>
    <li><a href='#yourlink'>Menu 1.1</a>
    <ul>
    <li><a href='#yourlink'>Menu 1.1.1</a></li>
    <li><a href='#yourlink'>Menu 1.1.2</a></li>
    <li><a href='#yourlink'>Menu 1.1.3</a></li>
    <li><a href='#yourlink'>Menu 1.1.4</a></li>
    </ul>
    </li>

    <li><a href='#yourlink'>Menu 1.2</a>
    <ul>
    <li><a href='#yourlink'>Menu 1.2.1</a></li>
    <li><a href='#yourlink'>Menu 1.2.2</a></li>
    <li><a href='#yourlink'>Menu 1.2.3</a></li>
    <li><a href='#yourlink'>Menu 1.2.4</a></li>
    </ul>
    </li>

    <li><a href='#yourlink'>Menu 1.3</a>
    <ul>
    <li><a href='#yourlink'>Menu 1.3.1</a></li>
    <li><a href='#yourlink'>Menu 1.3.2</a></li>
    <li><a href='#yourlink'>Menu 1.3.3</a></li>
    <li><a href='#yourlink'>Menu 1.3.4</a></li>
    </ul>
    </li>
    </ul>
    </li>

    </ul>
    </div>


    • Keterangan:
            Sesuaikan dengan link dan menu yang akan anda buat dengan mengedit tulisan yang berwarna merah diatas. Misal
      #yourlink, bisa anda ganti dengan http://namablogmu.blogspot.com/search/label/NamaLabelBlogmu
      Menu, anda ganti dengan judul tampilan yang muncul

       
    • Lalu klik >> Simpan Template (Di anjurkan untuk mempratinjau dulu sebelum menyimpan!)
    Semoga hasilnya memuaskan anda semua,,, GooD LucK....!!!

    0 komentar:

    Posting Komentar