Membuat Menu Horizontal Sederhana

Menu horizontal/vertikal memang dibutuhkan karena bisa membuat blog kamu menjadi tampak lebih proffesional dan salah satu alternatif dimana ...

Menu horizontal/vertikal memang dibutuhkan karena bisa membuat blog kamu menjadi tampak lebih proffesional dan salah satu alternatif dimana kamu bisa menghemat tempat dengan menampilkan label atau link URL kamu sesuai dengan tema / label blog kamu.

Disini kamu bisa membuat menu dengan langkah sederhana dan sudah tentu hasilnya juga sederhana, tapi dengan sedikit kreativitas kamu bisa membuat menu ini jadi tampil lebih bagus.
Nah..! kalau kamu pingin ikuti langkah2 berikut :

Langkah Pertama
  • Login ke akun Blogger kamu.
  • Dari halaman dashboard, pilih Edit HTML.
  • Pada halaman Edit HTML, cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
  • Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut..

/* Menu Horizontal
----------------------------------------------- */
.menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #000000;}
.menuhorisontal ul{margin:0; padding:0; padding-left:0px; font:13px Arial; list-style-type:none}
.menuhorisontal li{display:inline; margin:0}
.menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:2px; padding:2px 2px 2px 2px; color:#ffffff; background:#000000;}
.menuhorisontal li a:hover{color:#FFFFFF; background:#2E2EFE}

Pada bagian yang diberi warna merah, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada warna huruf maupun background sesuai dengan blog kamu. 

Langkah Kedua

  • Masuk Layout
  • Pilih tab Elemen Halaman ( Page Element ).
  • Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
  • Copykan script berikut dan letakkan pada kotak Content yang tersedia:

<div style="overflow:no; width:100%; height:100%; padding:0px; border:1px solid #FFFFFF; background:#FFFFFF;">

<div class="menuhorisontal">
<li>

<a href="http://hdesign05.blogspot.com/" target="_blank">HOME</a>

<a href="#" target="_blank">menu 1</a>

<a href="#" target="_blank">menu 2</a>

<a href="#" target="_blank">menu 3</a>

<a href="#" target="_blank">menu 4</a>

<a href="#" target="_blank">menu 5</a>

<a href="http://hdesign05.blogspot.com/" target="_blank">Hdesign05-com</a>

</li>
</div>
</div>


Pada tulisan yang tercetak merah dapat kamu ubah disesuaikan dengan Alamat URL kamu tuju. Begitupun dengan judul Menu-1, dst dapat kamu buat sendiri sesuai dengan isi blog kamu.

Selain itu kamu juga bisa menambahkan menu-menu lain asalkan lebar sidebar blog kamu mencukupi. Atau bisa juga dengan cara mengatur ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kamu.

simpan dan lihat hasilnya... contohnya adalah menu yang ada di blog punyaku ini...!!
Selamat Mencoba...!

COMMENTS

BLOGGER: 9
  1. kapan kapan aku coba neh tutornya...bagus aku suka tutornya lengkap dan jelas.makasih

    BalasHapus
  2. hemat tempat dan rapi...
    makasih tutorialnya ya.

    BalasHapus
  3. hasilnya seperti yg diatas artikel inikah?

    BalasHapus
  4. @master, sda, makasih..!
    @narti, bener bangetz... gimana nurut kamu...?
    bagus nggak...? thanks kommentnya...!!
    sukses...!

    BalasHapus
  5. thanks so much y.., aku jd bisa namabh Menu lagi, karena ganti template menunya sempet hilang dan sempet pusinh nyari kodenya.., tapi dengan bantuan kamu .., kodenya jadi ketemu lagi...
    Thanks a slot

    BalasHapus
  6. @yeyet salam persahabatan
    sukses..!

    BalasHapus
  7. nice post, mau tukar link gak sob??

    BalasHapus
  8. Makasih banyak ya mas buad infonya.
    skrng aq bsa bikin mnu hrzntl lgy.
    sblumx ruwet cri caranya, ada tpi ribet bngt.
    tpi disini singkat, jelas, nd padat.
    o ya lamb kenal ya mas :D

    BalasHapus
  9. @alifiandasari..! mkasih.. menu ini simple tapi menarik..

    BalasHapus
Note :

. Komentar yang mengandung usur pornografi / sara / kekerasan akan dihapus.
. Terima kasih komentarnya...!
. Semoga bermanfaat...!

Aluminium,4,Amdal,15,Arsitektur,64,Bahan bangunan,8,Bangunan Air,2,budaya indonesia,26,Denah Rumah,22,Galeri,32,Green house,6,Info sekilas,27,Interior,1,Irigasi,2,Jembatan,3,K3 konstruksi,4,Konservasi tanah,5,Konstruksi,48,Konstruksi Beton,15,Konstruksi kayu,38,Kuda kuda Baja,1,Kuda kuda kayu,4,Kusen,4,Lingkungan,15,Masjid,12,Mebelair,2,Menu navigasi,3,Opini,13,Pemberdayaan Masyarakat,7,Pendidikan,3,Peraturan,31,Pondasi,4,Profil Kusen,4,Property,46,RAB,28,Rumah adat,21,S E O,7,Sambungan Kayu,30,Sertifikasi,12,sipil,53,SNI,22,Software,2,Tangga,3,Tips trik blogger,27,Undang undang,12,Wisata,2,
ltr
item
Home Design and Ideas: Membuat Menu Horizontal Sederhana
Membuat Menu Horizontal Sederhana
Home Design and Ideas
https://www.hdesignideas.com/2009/12/membuat-menu-horizontal-sederhana.html
https://www.hdesignideas.com/
https://www.hdesignideas.com/
https://www.hdesignideas.com/2009/12/membuat-menu-horizontal-sederhana.html
true
2215255630784927830
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content