2010-04-26

Membuat menu navigasi horizontal


Menu navigasi horizontal ini bisa ditambahkan pada blog anda jika pada blog anda belum memiliki, menu navigasi horizontal ini akan mempermudah dan memperindah tampilan blog anda dimata pengunjung, penambahan menu ini disarankan bagi blog anda yang belum memiliki navigasi horizontal.
seperti apa menu navigasi horizontal dengan CSS menu navigasi horizontal ini biasanya terletak tepat dibawah element header, anda bisa melihat pada tampilan blog ini! atau bisa langsung melihat demo menu navigasi yang akan dibuat disini, nah untuk menambahkan menu tersebut anda bisa menggunakan kode/script punya saya dibawah ini :


Cara membuat navigasi horizontal dengan CSS:
1. Login ke blogger
2. Klik Rancangan
3. Klik Edit HTML
4. Carilah kode ]]></b:skin> kemudian letakkan CSS berikut tepat diatasnya (tekan Ctrl + F untuk memper mudah pencarian)
ul#menu{
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    position:relative;
    display:block;
    height:36px;
    text-transform:uppercase;
    font-size:12px;
    font-weight:bold;
    background:transparent url("http://3.bp.blogspot.com/-CG-MmQM5z-w/TbZiLBlW_dI/AAAAAAAABJ4/rbb3KKGqn2c/s320/OFF.gif") repeat-x top left;
    font-family:Helvetica,Arial,Verdana,sans-serif;
    border-bottom:1px solid #74b0c6;
    border-top:1px solid #74b0c6;
}
ul#menu li{
    display:block;
    float:left;
    margin:0;
    pading:0;}
ul#menu li a{
    display:block;
    float:left;
    color:#6d7078;
    text-decoration:none;
    font-weight:bold;
    padding:12px 20px 0 20px;
    height:24px;
    background:transparent url("http://1.bp.blogspot.com/-O9yYPx6o-30/TbZiLIpcwaI/AAAAAAAABJo/PclGFOClDAs/s320/DIVIDER.gif") no-repeat top right;
    }
ul#menu li a:hover{
    background:transparent url("http://2.bp.blogspot.com/-b_LDy0UTuqw/TbZiLNqpqgI/AAAAAAAABJw/RwEkYdOsMUU/s320/HOVER.gif") no-repeat top right;   
    }
5. Selanjutnya tuju bagian bawah cari kode seperti dibawah ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
6. Pastekan kode berikut tepat di bawah kode tadi "Langkah 5" :
<ul id='menu'>
    <li><a href='http://u-sup.blogspot.com' title=''>Home</a></li>
    <li><a href='http://templatemaxs.com' title=''>Free templates</a></li>
    <li><a href='http://spot-id.co.cc' title=''>Spot-id</a></li>
    <li><a href='http://zonablogger.com' title=''>Artikel Directory</a></li>
    <li><a href='http://www.techradar.com/' title=''>Techradar</a></li>
</ul>
7. Rubahlah teks warna merah dengan URL milik anda
8. Jika sudah simpan template

Untuk menyesuaikan dengan tampilan blog anda rubahlah gambar dengan gambar yang sesuai warnanya dengan blog anda dibawah ini contoh gambarnya silahkan simpan dan edit menggunakan PhotoShop sesuaikan dengan warna tampilan blog anda, Kemudian uploadlah gambar tersebut, jika sudah diupload rubahlah teks berwarna hijau diatas "langkah 4" dengan URL gambar yang baru saja anda upload.
URL gambar :
http://3.bp.blogspot.com/-CG-MmQM5z-w/TbZiLBlW_dI/AAAAAAAABJ4/rbb3KKGqn2c/s320/OFF.gif
http://1.bp.blogspot.com/-O9yYPx6o-30/TbZiLIpcwaI/AAAAAAAABJo/PclGFOClDAs/s320/DIVIDER.gif
http://2.bp.blogspot.com/-b_LDy0UTuqw/TbZiLNqpqgI/AAAAAAAABJw/RwEkYdOsMUU/s320/HOVER.gif

Jika blog anda sudah memiliki menu navigasi ini sebaiknya tidak usah ditambahkan karena jika ditambahkan blog anda malah bisa kurang enak dilihat, jika ingin memakai menu diatas sebaiknya hapus dulu menu navigasi yang lama kemudian ganti dengan kode menu yang baru. Dikarenakan kode template pastinya berbeda-beda saya tidak bisa memberi tau persisnya sepertiapa persisnya kode menu milik anda, tetapi anda bisa mencarinya sendiri biasanya terletak dibawah kode header.

Dapatkan artikel terbaru seperti Membuat menu navigasi horizontal langsung ke Email kamu..!!!


Ada 15 komentar untuk Membuat menu navigasi horizontal

  1. sorrry mas U-sup : ditemplate html saya tulisannya begini : "Mohon petunjuknya"




    Thanks
    salam suksesok

    BalasHapus
  2. Rachman Abdillah@
    Maaf mksudnya gmn ne...hehe....

    BalasHapus
  3. mas u-sup, kalau punya saya gak ada yang kode di langkah 5.

    ada cara lain gak mas??

    BalasHapus
  4. RT@Alfian
    Klw blh sy lihat alamat blognya...! biar sya bs lgsung liat sumbernya.
    karena memang template kadang berbeda pembuat brbeda kode scriptnya.

    BalasHapus
  5. aku juga ingin seperti itu...tapi masih bingung

    BalasHapus
  6. mas punya saya juga tidak ada kode seperti di ats langkah 5 ?

    cara lain gak mas ?

    BalasHapus
  7. Numpang tanya ya mas.
    Saya dah bikin menu horizontal nd berhasil. Tapi, saya bingung gimana cara ngelompokkan hasil posting saya berdasarkan menu di menu horizontal saya. Nd pas saya buka salah satu menunya, keluarnya " laman tidak tersedia ". Mohon pencerahannya ya. Makasih.

    BalasHapus
  8. Alifiandasari Balqis :
    Itu masukkan saja link Label, contoh untuk blog kamu :
    http://alifiandblqz.blogspot.com/search/label/Tips
    http://alifiandblqz.blogspot.com/search/label/IPTEK

    BalasHapus
  9. Maaf masih kurang paham dikit. Itu maksudnya link labelnya dimasukkan di mana ya mas ? Makasih

    BalasHapus
  10. Alifiandasari Balqis :
    Masuk aja ke Edit HTML >> TRUS CARI >> kode menuhorisontal disitu ganti url ini alifiand.blqz.blogspot.com
    dengan URL yg tadi kek gini contohnya:
    http://alifiandblqz.blogspot.com/search/label/Tips
    http://alifiandblqz.blogspot.com/search/label/IPTEK

    klw msh bingung biar lbh jelas add YM sy usup_crew aq OL mlm.

    BalasHapus
  11. numpang nanya kalo blogger tampilan baru 2012 nyari edit HTML nya di mna???

    BalasHapus
  12. Mas saya mau tanya.
    klo artikle di home page biar tampilannya seperti toko online bagaimana yah??

    BalasHapus
  13. Numpang nanya gan ...... kalo kode langkah 5 gak ketemu gmanain eaw ????

    nie blog saya : http://erasmart.blogspot.com

    bang u-sup blang tiap template beda ,,,, Mohon pencerahannya

    BalasHapus
  14. sob di blog ane gak ada kode yang ke 5 nih nama blog ane sob http://alvinhadiansyah.blogspot.com

    BalasHapus