Membuat Menu Horizontal Sederhana

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://kibagus-homedesign.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://kibagus-homedesign.blogspot.com/" target="_blank">Kibagus-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...!

About Mahdi e

- Berbagi itu indah -

9 comments:

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