Friday 12 March 2010

Cara Membuat Menu Horizontal di Blog

      Terus terang postingan ini saya buat karena ada permintaan dari teman blogger yang bertanya melalui buku tamu saya.  
      Sebenarnya Menu Horizontal yang terdapat pada sebuah web/blog selain berguna untuk memudahkan pengunjung membuka halaman-halaman tertentu, juga bisa menambah estetika. Harus diakui bahwa pada template blogspot standart, fasilitas menu horizontal tidak ada didalamnya.  jadi anda harus sedikit mengutak atiknya agar dapat memperolehnya. Berbeda dengan beberapa template gratis dari pihak lain, template tersebut ada yang telah menyediakan menu horizontal jadi tidak usah repot lagi..
      Untuk membuatnya anda bisa menggunakan tutorial berikut:

  1. Login ke akun Blogspot pembaca
  2. Klik link menu Tata Letak, kemudian pilih Edit HTML.
  3. Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
  4. JANGAN beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
  5. Cari kode seperti dibawah ini pada template pembaca:
    b:section class='header' id='header' maxwidgets='1' showaddelement='no' jika tidak ada bisa di coba dengan klik ctrl+f dan masukkan kata b:section class='header
  6. kemudian ganti angka 1 dengan 2 dan no dengan yes 
  7. terus dibawahnya ada kode: b:widget id='Header1' locked='true'  
  8. Ganti true dengan false Terus save template 
  9. Setelah itu untuk menambah menu horizontal tinggal kopi kode berikut


<div id="nav">
<ul>
<li><a href="URL">nama</a></li>
<li><a href="URL">nama</a></li>
<li><a href="URL">nama</a></li>
<li><a href="URL">nama</a></li>
<li><a href="URL">nama</a></li>
</ul>
</div>
   10.  Jangan lupa mengganti kode URL dan nama yang berwarna merah.
  
11.  Paste dibawah kode
<b:widget id='Header1' locked='false' .....dst.........'/>
</b:section>
</div>
 Langkah Selanjutnya Copy Kode Dibawah Ini:
#nav ul{
    display:block;
    margin: 0px;
    padding: 0px;
}
#nav li{
    float:left;
    list-style-type:none;
    padding:3px 5px 3px 5px;
    margin:1px;
    border:#CCCCCC 1px solid;
}
#nav li a{
    text-decoration:none;
    color: #FFF;
    display: block;
    font-weight: normal;
    text-transform: uppercase;
    margin: 0;
    padding: 7px 10px;
}
#nav li a:hover{
    background:#00FFFF;
    color:#FFF;
    margin: 0;
    padding: 7px 10px;
    text-decoration: none;
}

Untuk warna menu horizontal ini bisa diganti sendiri jika ingin menggunakan warna yang lain, silahkan menuju ke postingan saya tentang kode warna dan contohnya
Khusus kode color:#FFF; ini adalah kode buat warna hurufnya, jadi silahkan diganti dengan kode warna lainnya dengan mengubah huruf yang saya warnai biru.

Setelah itu paste diatas ]]></b:skin> lalu save template.

Lihat hasilnya.
 

Semoga berhasil dan sukses. 

Jika ingin menu horizontal model lain seperti milik saya, silahkan klik disini

Silahkan komentar dibawah bila anda gagal/berhasil,  juga bila ada yang ingin anda ditanyakan.

5 comments:

  1. kk bagusan mana ya menu horizontalnya?? yang ini apa yang atas???? thx dah di kabulkan requestnya

    ReplyDelete
  2. Kalo ditanya bagus yang mana, ya saya ga bisa jawab,coz penilaian seseorang berbeda2 terhadap sesuatu, lebih baik dicoba saja satu2, trus pilih sendiri yang mana yang bagus, kalo menurut anda tidak bagus silahkan diedit sendiri, sampai terlihat srek di hati, oke!!

    ReplyDelete
  3. kk nur4dik dah bisa neh saya edit semoga enak dilihat walaw gak sebagus punya kk,,hehe thx yaaa

    ReplyDelete
  4. mas gimana caranya supaya menunya ada di atas judul blog? thanks

    ReplyDelete
  5. kalo mau diatas judul blog taru kode diatas kode:
    "<div id='header'
    pada dasarnya kode awalan "<div id" adalah urutan loading blog. sukses ya buat penanya tanpa nama!!

    ReplyDelete