Cara Paling Mudah Memasang Menu Navigasi Drop Down Pada Blog

198 views

Trikotti.Com – Cara Paling Mudah Memasang Menu Navigasi Drop Down Pada Blog, Cara Paling Mudah Memasang Menu Navigasi Drop Down Pada Blog

Cara Paling Mudah Memasang Menu Navigasi Drop Down Pada Blog

Artikel kali ini tentang Menu Navigasi Drop Down yang dulu pernah saya posting di blog lama saya The Next Level
Banyak kode2 html menu drop down yang saya cari di mbah google.. tetapi mungkin hanya kode ini yang paling pas menurutku.. juga sangat mudah memasangnya..
okelah, langsung saya beri tahu langkah-langkah untuk memasang menu navigasi dropdownya..
  1. Login ke Blogger >> klik Tata Letak >> Edit HTML.
  2. Backup dulu template anda. caranya pasti sudah taulah.. >> Download Template Lengkap

  3. Cari Code :
    ]]>
  4. Copy paste code di bawah ini tepat di atasnya

    /* Navigasi Dropdown Menu */
    #navdropdownmenu{
    background:black; /*Warna Latar Belakang */
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    }
    #navdropdownmenu ul{
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    }
    #navdropdownmenu li{
    list-style:none;
    float:left;
    }
    #navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
    color:yellow; /* Warna Teks */
    display:block;
    padding:9px 10px 9px 10px;
    font-size: 12px; /* Ukuran Teks */
    font-family: verdana; /* Jenis font */
    text-decoration:none;
    }
    #navdropdownmenu li a:hover{
    background:yellow; /* Warna latar saat kursor mouse berada di atasnya (hover) */
    color:black; /* Warna teks saat kursor mouse berada di atasnya */
    padding:9px 10px 9px 10px;
    }
    #navdropdownmenu li ul{
    z-index:10;
    position:absolute;
    height:auto;
    width:200px; /* Lebar submenu */
    border-width:1px 0 0 0; /* Tebal garis pinggir submenu */
    border-style:solid;
    border-color:#ffff66; /* Warna garis pinggir submenu */
    }
    #navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
    float:none;
    background:black; /* Warna latar belakang submenu */
    width:200px; /* Lebar submenu. Isi dengan nilai yang sama */
    border-width:0 1px 1px 1px; /* Tebal garis pinggir submenu */
    border-style:solid;
    border-color:#ffff66; /* Warna garis pinggir submenu */
    }
    #navdropdownmenu li ul li a:hover{
    background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
    color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
    }
    #navdropdownmenu li:hover ul, #navdropdownmenu li a:hover ul#submenu, #navdropdownmenu li:hover a:hover ul#submenu{
    z-index:10;
    position:absolute;
    height:auto;
    width:200px; /* Lebar submenu */
    left:auto;
    }
    .ngumpet{
    display:none;
    }
    .muncul{
    display:block;
    }

  5. Cari kode berikut.

  6. Ketikkan code berikut diatasnya


  7. Cari kode yang mirip kode berikut.



  8. Dibawahnya, ketikkan kode berikut:

    • #'>Home
    • #'>Software PC
      • #'>Application
      • #'>Anti Virus
      • #'>Internet Browser
      • #'>Utility
      • #'>Themes
      • #'>Desktop
      • #'>Games
      • #'>Hack Tools

    • #'>Mobile Software
      • #'>Application
      • #'>Games
      • #'>Themes
      • #'>Anti Virus

    • #'>Tips And Tricks
      • #'>Blogger
      • #'>Tutorials
      • #'>Computers

    • #'>Music
      • #'>Indo Hits
      • #'>Rock

    • #'>News Update

    Keterangan: 
    * Tanda # pada kode #'> adalah link. Ganti dengan URL yang diinginkan (bisa dari link url label blog anda)
    * Anda bisa menambah atau mengurangi menu diatas.

  9. Lalu klik >> Simpan Template (Di anjurkan untuk mempratinjau dulu sebelum menyimpan!)
  10. Lihat Hasilnya..

NB: apabila hasilnya tumpukan dengan menu navigasi bawaan template.. anda bisa menghapus menu navigasi bawaan template tsb..

Oke.. selamat mencoba.. dan semoga berhasil.. ;D

Terima Kasih Atas kunjungan anda di halaman  Cara Paling Mudah Memasang Menu Navigasi Drop Down Pada Blog, Jangan lupa untuk Membookmars Halaman ini jika  Cara Paling Mudah Memasang Menu Navigasi Drop Down Pada Blog berguna untuk anda.

Leave a reply "Cara Paling Mudah Memasang Menu Navigasi Drop Down Pada Blog"