Cara membuat menu dropdown dibawah dan diatas header

Dalam membuat sebuah blog maka secara default kita sudah memiliki menu dengan bentuk horizontal yang letaknya diatas Header yang disebut navbar (Navigasi Bar). Pada navbar default tersebut kita sudah disediakan navbar tinggal memilh saja, namun bagi sebagian para blogger menu tersebut dihilangkan dan di atur ulang sesuai selera sehingga tampilan blog terlihat menarik.

Contoh gambar


Untuk mengaturnya kembali atau membuat menu sendiri diperlukan beberapa kode CSS dan langkah-langkah dibawah ini :
  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode ]]></b:skin>  (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  7. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>  

  8. /* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: #ff0000 repeat-x;width:980px;margin:0 auto;padding:0 auto} #menuwrapper{width:980px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#000000;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{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:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar 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} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

  9. Kemudian cari kode

    1. <header> : untuk menu di atas header blog
    2. </header>: untuk menu di bawah header blog

  10. Copy dan pastekan kode dibawah ini dan letakkan diatas kode <header> dan atau </header> untuk menu dibawah header

  11. <div id='menuwrapperpic'>
    <div id='menuwrapper'>
    <ul id='menubar'>
    <li><a href='nama-alamat-blog.html' target='new'>Home </a></li>
    <li><a href='nama-alamat-blog.html' target='new'>Menu 1</a></li>
    <li><a href='nama-alamat-blog.html' target='new'>Menu 2</a></li>
    <li><a class='trigger'>Menu 3</a>
    <ul>
    <li class='hr'/>
    <li><a href='nama-alamat-blog.html' target='new'>Sub Menu 3</a></li>
    <li class='hr'/>
    <li><a href='nama-alamat-blog.html'  target='new'>Sub Menu 3</a></li>
    <li class='hr'/>
    <li><a href='nama-alamat-blog.html'  target='new'>Sub Menu 3</a></li>
    </ul>
    </li>
    <li><a class='trigger'>Menu 4</a>
    <ul>
    <li class='hr'/>
    <li><a href='nama-alamat-blog.html'  target='new'>Sub Menu 4</a></li>
    <li class='hr'/>
    <li><a href='nama-alamat-blog.html'  target='new'>Sub Menu 4</a></li>
    </ul>
    </li>
    </ul> <div class='menusearch'>
    <div style='float:right;padding:8px 8px 0 0;'>
    <form action='http://ketutjoel.blogspot.com/search' method='get' target=''>
    <input name='sitesearch' style='display:none;' value='http://ketutjoel.blogspot.com'/>
    <input id="search-box" name="q" size="25" type="text" style="background: #EEEDED; border: 1px solid #000000 "/>
    <input id="search-btn" value="Search" type="submit"/>
    </form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

    Keterangan

    1. Kode berwarna merah adalah Warna background, lebar Menu utama , lebar menu dan lebar Menu Search (sesuaikan dengan lebar blognya kawan)
    2. Kode berwarna merah adalah Url tujuan, ganti dengan Url pada blognya kawan
    3. Kode berwarna kuning adalah judul menu bar ganti dengan judul nya kawan
    4. Kode berwarna biru adalah sub judul dropdown ganti dengan judul nya kawan
    5. Kode berwarna hijau adalah alamat pencarian ganti dengan alamat blognya kawan

Demikianlah postingan saya kali ini tentang cara membuat menu dropdown diatas header atau dibawah header, semoga bermanfaat.

38 comments:

  1. terima kasih info nya boss . . . .

    ReplyDelete
  2. header gak ada terus taruh di mana gan?

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. copy paste dibawah kode 'content-inner'

    ReplyDelete
  5. makasih yah untuk infonya :)

    ReplyDelete
  6. mantap gan....
    mampir ya http://satupekan.blogspot.com/

    ReplyDelete
  7. terima kasih tips dan tutorialnya min :) sudah ane terapin , sukses besar ni :)

    ReplyDelete
  8. mau tanya gan."trigger' itu apa gan? yang terletak antara class='triger'>. terima kasih

    ReplyDelete
  9. @yon,,,tanda segitiga kebawah menunjukkan submenu

    ReplyDelete
  10. makasih infonya kk,
    langsung dicoba dulu deh

    ReplyDelete
  11. dari semua blog yg saya lihat, cara di blog ini yg berhasil sya terapkan di blog saya.. terima kasih

    ReplyDelete
  12. gan itu gantinya harus url di blog ya? kalo dibuat kaya blognya agan gimana caranya? jadi bisa nyambung ke web lain

    ReplyDelete
  13. Raden Raditya D@ tinggal copy paste saja alamat blognya dan ganti "nama-alamat-blog.html" dengan alamat blognya sendiri atau copy paste alamat labelnya blog

    ReplyDelete
  14. Mantaap sob artikelnya :)
    Ijin share http://grosiracemaxstasik.com/obat-alami-insomnia/
    http://grosiracemaxstasik.com/
    http://apotekherbalkita.com/
    http://pengobatanalamimustajab.com/

    ReplyDelete
  15. makasih ya atas tutorialnya, rinci sekali tahapan-tahapannya.

    ReplyDelete
  16. mantep banget bro makasih ya berhasil :D

    ReplyDelete
  17. Terimakasih infonya Gan (y)
    Ini yang sedang saya cari-cari
    http://grosirobatjellygmat.com/
    http://jamutradisionalmujarab.com/

    ReplyDelete
  18. bro, cara edit size bar nya dibagian mana ? tq

    ReplyDelete
  19. Wah ternyata jadi n cocok mas. dari kemaren ane nyoba di blog lain gak cocok. yang ini baru cocok mas. makasih

    ReplyDelete
  20. Bagus banget nih buat blog, langsung ane coba gan.

    ReplyDelete
  21. Tupat Kai@ Lihat size nya di kode css yang warna merah "width:980px;" sesuaikan atau bisa diganti dengan width:100%;

    ReplyDelete
  22. Mantaap sob artikelnya, ditunggu artikel yang lainnya

    ReplyDelete
  23. ijin sedot ilumnya gan.. ane terapin di blog ane ya.. maksih

    ReplyDelete
  24. makasih yah atas informasinya, jangan lupa kunjungi blog aku juga.
    QUEENXXX92

    ReplyDelete
  25. Work gan makasih
    udah ane kasih dan letakkan di website ane ini

    URL: http://agenobatbiushirup.blogspot.co.id/

    ReplyDelete
  26. izin penerapan ya gan...ternyata mantap banget....klo mau ganti warna gmn,gan sebelumnya terima kasih artikelnya sangat berguna bagi saya....www.odzzal65.com

    ReplyDelete