Home » Tutorial Blogger » Cara Membuat Menu Horizontal

55

Cara Membuat Menu Horizontal

Bisnis Berkah Halal
Cara Membuat Menu Horizontal di blog, atau lebih tepatnya di blogspot. Blogger dengan kelebihannya yaitu bisa mengedit template atau bahkan mengubah keseluruhan template membuat para blogger jadi lebih semangat memodifikasi blog mereka. Kali ini saya akan share cara membuat menu horizontal di atas header atau judul blog. Contoh menu horizontal seperti dibawah ini.
Cara Membuat Menu Horizontal

Cara membuat Menu Horizontal

  • Login ke blog anda > Design > Edit HTML ( tidak perlu centang Expand Widget templates )
  • Cari Kode ]]></b:skin> ( Gunakan CTRL + F untuk mempermudah pencarian )
  • Copy Css di dibawah ini dan paste tepat diatas kode ]]></b:skin>
#NavbarMenuAtas{ background:#000 url(http://lh4.ggpht.com/_pt7i0nbIOCY/Sm5QZkDvCUI/AAAAAAAACKE/8-OPdORCKI8/bgnav_thumb%5B1%5D.jpg?imgmax=800) repeat-x; width:960px; height:40px; color:$navcolor; margin:0 auto; font: bold 8px Arial, Tahoma, Verdana;}
#NavbarMenuAtasleft{ width:650px; float:left; }
  • Langkah selanjutnya cari kode <div id='header'> atau <div id='header-wrapper'>
  • Jika sudah ditemukan, Copy kode dibawah ini dan paste tepat di atas kode <div id='header'> atau <div id='header-wrapper'>
<div id='NavbarMenuAtas'>
       <div id='NavbarMenuAtasleft'>
      <ul id='nav'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li>
          <a href='#'>Page #1</a>
          <ul>
            <li><a href='#'>Sub Page #1</a></li>
            <li><a href='#'>Sub Page #2</a></li>
            <li><a href='#'>Sub Page #3</a></li>
          </ul>
        </li>
        <li><a href='#'>Page #2</a></li>
      </ul>
    </div>
  </div>
  • Linknya bisa anda ganti sendiri sesuai keinginan lalu preview, kalau sudah benar silahkan di save.

Cara Membuat Menu Horizontal

Cara Membuat Menu Horizontal sangat bermacam-macam, tergantung dari kreativitas anda. Yang paling penting adalah belajar HTML dan CSS. Jika sudah mahir HTML atau bahkan javascript pasti sangat mudah untuk membuat tampilan apa saja. Oh iya Anda juga bisa mengganti Background menunya dengan cara mengganti link gambar yang ini
http://lh4.ggpht.com/_pt7i0nbIOCY/Sm5QZkDvCUI/AAAAAAAACKE/8-OPdORCKI8/bgnav_thumb%5B1%5D.jpg?imgmax=800
Atau anda ingin backround warna saja, silahkan hapus :
url(http://lh4.ggpht.com/_pt7i0nbIOCY/Sm5QZkDvCUI/AAAAAAAACKE/8-OPdORCKI8/bgnav_thumb%5B1%5D.jpg?imgmax=800)
Untuk mengubah warna yang ini background:#000
OK deh selamat mencoba membuat menu horizontal di blog anda, saya doakan sukses. Jika anda bingung tanyakan saja pada kotak komentar atau bisa hubungi saya disini

NB : Sesuaikan lebar menu dengan lebar header blog anda, untuk menyesuaikan misalkan kurang lebar atau sebalikanya silahkan ubah kode yang berwarna biru
Tweet
Di Terbitkan oleh BamZ Gz → Selasa, November 15, 2011

Kategory → Cara Membuat Menu Horizontal » » BLog Bamz

55 comments:

  1. SERBA SERBI BUKAN SERIBUNov 15, 2011 07:14 AM

    thanks lur.....

    BalasHapus

  2. @SERBA SERBI BUKAN SERIBU Yup sama sama. thanks sudah mampir sob

    BalasHapus

  3. thanks sob, sudah berhasil..

    BalasHapus

  4. ok sob makasih sudah berkunjung

    BalasHapus
  5. Technology &amp;amp; LearningNov 16, 2011 11:18 PM

    Mantaaap......

    BalasHapus

  6. @Technology haha masih edit2 reh... majuh ben tak tok otek jih

    BalasHapus
  7. Rudy HartonoNov 18, 2011 04:55 PM

    engkok deri bondowoso kiah (kauman), be'en e dimma, salam kenal ye, balas

    BalasHapus

  8. wah salah kenal... perbatasan situbondo mz..saiki nang jmber

    BalasHapus
  9. Rudy HartonoNov 18, 2011 07:29 PM

    mas bamz, aku atene pasang template sampeyan, cara ganti about piye (kan about tak klik, isine nek sampeyan, piye mas

    BalasHapus

  10. @Rudy Hartono melebuh Design > Edit HTML > Golek kata About (gae CTRL + F ben gampang , nek wis ktemu, iku link dek ngarepe diganti tek sampean mz.

    BalasHapus
  11. Rudy HartonoNov 18, 2011 08:34 PM

    kesuwun mas, atene tak coba

    BalasHapus

  12. @Rudy Hartono iyo mas podo, nek sek durung iso..ngomong ae g po2 hehe

    BalasHapus
  13. l&#39;ekspresi artistiqueNov 19, 2011 07:03 AM

    makasich tutornya

    BalasHapus
  14. l&#39;ekspresi artistiqueNov 19, 2011 07:05 AM

    mas gimana caranya menu home,kontak,about pindah kekanan

    BalasHapus

  15. #NavbarMenuAtasleft{ width:650px; float:left; } << left diganti right . silahkan dicoba, kalo gagal lanjut laporannya :D

    BalasHapus
  16. sukrihamdaniNov 19, 2011 07:12 PM

    pening aku maz....

    BalasHapus

  17. apanya yg pening mz?

    BalasHapus

  18. Programs, reviews of new products, reviews of software http://bestsoftwarehere.com/

    BalasHapus

  19. @Anonim: ok thanks bro :)

    BalasHapus

  20. pak kalau di menu horisontal ada katagori psikologi terus kita mau entry baru di menu psikologi itu bgmn ya mas???

    BalasHapus

  21. @Anonim: waduh maksudnya gmn pak? rada bingung nih hehe

    BalasHapus

  22. thx info nya Mass....
    :D

    BalasHapus
  23. driver laptop for xpDec 12, 2011 12:59 AM

    tengkyu tak coba gan...

    BalasHapus

  24. @dhanil: yup sama2 bro :)

    BalasHapus

  25. @driver laptop for xp: silahkan di coba sampai berhasil, kalau kesulitan bisa tanya langsung :0

    BalasHapus

  26. mau tak coba...

    BalasHapus

  27. @Anonim: silahkan bro.. thanks kunjungannya :D

    BalasHapus

  28. mas saya kan pake bamz style tuh la cara nambahinya di dekat home tuh gimana,salam knal

    BalasHapus

  29. @Anonim: cari kode Home nah tambahkan di bawahnya , pake li juga yah

    BalasHapus
  30. Setya BhaktiFeb 7, 2012 10:17 PM

    Terima Kasih Banyak gan..........

    BalasHapus

  31. yoi sama2 sob

    BalasHapus
  32. iwa jaya santikaFeb 14, 2012 04:39 PM

    mas aku nyari code div id='header'
    atau div id='header-wrapper' di edit html ga ketemu2?

    BalasHapus
  33. Zenita AhmadFeb 18, 2012 07:00 AM

    * Langkah selanjutnya cari kode < div id = ' header ' > atau < div id =' header - wrapper ' >
    * Jika sudah ditemukan, Copy kode dibawah ini dan paste tepat di atas kode < div id = ' header ' > atau < div id = ' header - wrapper ' >

    Bang,, ane mo tanya, tahap pertama udeh saya coba..
    yaitu men-copy diatas tapi giliran bagian yang ini,, ga ada..
    didalam kode css ane ga ada kode <div header tersebut, gimana nih gan?

    mohon penjelasannya...

    BalasHapus
  34. FIKRI SHARE - Free Download Software Full VersionFeb 20, 2012 02:22 AM

    sepertinya ini akan membuat template saya menjadi lebih keren deh. save dulu ah kode2nya..

    BalasHapus

  35. Thanks tutornya gan, tp sudah saya coba di blog saya n tidak berhasil, mungkin berbeda2 tergantung themenya ya.

    BalasHapus

  36. @iwa jaya santika: brati templatenya g sama :)

    BalasHapus

  37. @Zenita Ahmad: bisasaja, paste di bawah kode < body> tapi nanti hasilnya berada di atas header bukan di bawahnya :)

    BalasHapus

  38. @FIKRI SHARE - Free Download Software Full Version: templatenya sudah tersedia kok wkakwaka

    BalasHapus

  39. @Ngurah: yup tergantung elemen blog. tapi bisa saja dg simpel pasang di bawah kode < body> nanti hasilnya di atas header

    BalasHapus
  40. RIISCKY MIZAMar 5, 2012 08:07 PM

    KOK G BERHASIL EA BOS DTEMPAT AKU,,,MALAH JADI LIST

    BalasHapus
  41. puisi cinta sejatiMar 8, 2012 06:14 PM

    nyoba, buat belajar

    BalasHapus
  42. Admin FikriShare.ComMar 9, 2012 09:53 PM

    mas saya coba membuat menu horizontal ini di template dengan menambahkan
    <li>
    <a href='http://www.fikrishare.com/search/label/Tools'>Tools</a>
    <ul>
    <li><a href='http://www.fikrishare.com/2012/01/tools-free-sms.html' target='blank' title='Free SMS to All Operator'>Free SMS</a></li>
    <li><a href='http://www.fikrishare.com/2012/01/tools-game-online.html' target='blank'>Game Online</a></li>
    <li><a href='http://www.fikrishare.com/2012/01/tools-love-calculator.html' target='blank'>Love Calculator</a></li>
    <li><a href='http://www.fikrishare.com/2012/01/parse-html.html' target='blank' title='parse html'>Parse HTML</a></li>
    <li><a href='http://www.fikrishare.com/2012/01/tools-super-translator.html' target='blank'>Super Translator</a></li>
    <li><a href='http://www.fikrishare.com/2012/01/tool-world-clocks.html' target='blank'>World Clock</a></li>
    </ul>
    </li>
    tapi submenunya kok tidak tampil ya mas, hanya menu tools saja yang tampil

    BalasHapus

  43. blognya di private yah mas. heuhee. g bisa liat :D

    BalasHapus
  44. Admin FikriShare.ComMar 9, 2012 10:17 PM

    dari pagi saya private mas mau nguprek2 templatenya dulu. kl sekarang sudah di buka untuk umum wkwk

    BalasHapus

  45. walah pasti visitor ngurang tuh wkkwkwkw

    BalasHapus
  46. Admin FikriShare.ComMar 9, 2012 10:38 PM

    lumayan lah mas kurang sedikit wkwk

    BalasHapus

  47. hihii nyak saya naek turun 4.300 - 4.800 huhuh. apalagi skrg g bisa rutin update

    BalasHapus
  48. Admin FikriShare.ComMar 10, 2012 04:25 AM

    alhamdulillah ya mas sesuatu kalau meningkat pengunjung blognya.. semoga saya ikut kecipratan pengunjung ^_^

    BalasHapus
  49. Rafi Damar BungsadewoMar 14, 2012 06:49 AM

    mas admin saya terkesan deh sama template blog ini

    BalasHapus

  50. masih bingung mas,,, ?_?

    BalasHapus
  51. PalingkompletMar 17, 2012 12:44 AM

    Mampir sini sekalian cari sahabat sesama blogger

    BalasHapus
  52. Arif RudiantoroMar 17, 2012 08:40 PM

    Komentar ini telah dihapus oleh administrator blog.

    BalasHapus

  53. Mas kenapa kok warnanya g bisa diganti dengan warna yg lain ya????

    BalasHapus
  54. RIISCKY MIZAMar 27, 2012 05:42 PM

    hebattttt,,,,

    BalasHapus
  55. belajarblogspotApr 1, 2012 07:05 AM

    ane ijin ngintip tutor nya gan..trims info nya..ane cba dlu ni gan..salam.

    BalasHapus

◄ Posting Baru Posting Lama ►
Langganan: Poskan Komentar (Atom)