Cara Membuat Menu Horizontal

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

63 comments:

SERBA SERBI BUKAN SERIBU mengatakan...

thanks lur.....

BamZ mengatakan...

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

Anonim mengatakan...

thanks sob, sudah berhasil..

BamZ mengatakan...

ok sob makasih sudah berkunjung

Technology & Learning mengatakan...

Mantaaap......

BamZ mengatakan...

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

Rudy Hartono mengatakan...

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

BamZ mengatakan...

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

Rudy Hartono mengatakan...

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

BamZ mengatakan...

@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.

Rudy Hartono mengatakan...

kesuwun mas, atene tak coba

BamZ mengatakan...

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

l'ekspresi artistique mengatakan...

makasich tutornya

l'ekspresi artistique mengatakan...

mas gimana caranya menu home,kontak,about pindah kekanan

BamZ mengatakan...

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

sukrihamdani mengatakan...

pening aku maz....

BamZ mengatakan...

apanya yg pening mz?

Anonim mengatakan...

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

BamZ mengatakan...

@Anonim: ok thanks bro :)

Anonim mengatakan...

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

BamZ mengatakan...

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

dhanil mengatakan...

thx info nya Mass....
:D

driver laptop for xp mengatakan...

tengkyu tak coba gan...

BamZ mengatakan...

@dhanil: yup sama2 bro :)

BamZ mengatakan...

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

Anonim mengatakan...

mau tak coba...

BamZ Gz mengatakan...

@Anonim: silahkan bro.. thanks kunjungannya :D

Anonim mengatakan...

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

BamZ Gz mengatakan...

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

Setya Bhakti mengatakan...

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

BamZ Gz mengatakan...

yoi sama2 sob

iwa jaya santika mengatakan...

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

Zenita Ahmad mengatakan...

* 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...

FIKRI SHARE - Free Download Software Full Version mengatakan...

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

Ngurah mengatakan...

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

BamZ Gz mengatakan...

@iwa jaya santika: brati templatenya g sama :)

BamZ Gz mengatakan...

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

BamZ Gz mengatakan...

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

BamZ Gz mengatakan...

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

RIISCKY MIZA mengatakan...

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

puisi cinta sejati mengatakan...

nyoba, buat belajar

Admin FikriShare.Com mengatakan...

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

BamZ Gz mengatakan...

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

Admin FikriShare.Com mengatakan...

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

BamZ Gz mengatakan...

walah pasti visitor ngurang tuh wkkwkwkw

Admin FikriShare.Com mengatakan...

lumayan lah mas kurang sedikit wkwk

BamZ Gz mengatakan...

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

Admin FikriShare.Com mengatakan...

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

Rafi Damar Bungsadewo mengatakan...

mas admin saya terkesan deh sama template blog ini

capcus mengatakan...

masih bingung mas,,, ?_?

Palingkomplet mengatakan...

Mampir sini sekalian cari sahabat sesama blogger

Arif Rudiantoro mengatakan...
Komentar ini telah dihapus oleh administrator blog.
Blog shidik mengatakan...

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

RIISCKY MIZA mengatakan...

hebattttt,,,,

belajarblogspot mengatakan...

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

yyoga mengatakan...

gan, kalo mau ngubah menu'nya kaya'mana tuh gan?

gerai pelangsing mengatakan...

itu menu yg posisi dimana gan?diatas header kah?

djiesoft mengatakan...

keren.. makasih bos!!!

pinto mengatakan...

makasi mas..

Kelvin's Kingdom mengatakan...

woi iklanya ma sponsornaya ganti dong,,,

berita online mengatakan...

pak boss saya mau nanya kalau templete bawaan dari blogger kode  <div id='header-wrapper'> kok nggak ada yah pak boss tolong penjelasaanya skalian kasih tutotnya yah pak boss udah beberapa hari nyari info nggak ada thanks

belajar mengatakan...

bikin blog tambah bagus aja nih sob,.,,thanks atas tutorialnya sob,,profesional sekali...

9beritaterbaru.blogspot.com mengatakan...

keren nih,

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

◄ Posting Baru Posting Lama ►
 
Exit Di Like yah Sob!! Makasih