Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Menu Navigasi Horizontal

Membuat Menu Navigasi Horizontal
Blog yang bagus itu harus didukung oleh navigasi yang mudah dan tepat. Sekarang kita akan belajar membuat menu navigasi horizontal. Itu tu, menu yang biasanya ada di header blog, ada home, about me dan lain-lain. Dengan menu navigasi yang pas akan membuat pembaca mudah untuk melacak apa yang ada di blog kita.

Cara Membuat Menu Navigasi Horizontal
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode ]]></b:skin>
6. Jika sudah ketemu taruh kode berikut di atasnya:

/*-- (Menu/Nav) --*/
#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:600px}
#nav-right{float:right; display:inline; width:100px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Arial,Helvetica,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}

/*-- (Search) --*/
#search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px 2px no-repeat; -moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right; height:25px; margin:0 0px 0 0; width:180px}
* html #search{margin-right:8px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif; background:transparent; border:0; color:#555; float:left; font-size:12px; margin:5px 0 0; padding:0px 2px 2px 27px; width:140px}

7. Kemudian cari kode  <div id='outer-wrapper'><div id='wrap2'>
8. Jika sudah ketemu taruh kode berikut di bawahnya:

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML3' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form expr:action='data:blog.homepageUrl + &quot;search&quot;' id='searchform' method='get' name='searchform'>
<b:if cond='data:title'/>
<div id='search'>
<input class='s' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Cari artikel disini&apos;;}' onfocus='if (this.value == &apos;Cari artikel disini&apos;) {this.value = &apos;&apos;;}' type='text' value='Cari artikel disini'/>
<input id='searchsubmit' type='hidden' value='Search'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

9. Kita dapat menganti kode warna sesuai dengan template blog kita, dan Simpan Template jika sudah selesai.
10. Untuk menambahkan menu yang ada di navigasi horintal, kita klik Elemen Halaman. Lihat gadget paling atas, disitu sudah terlihat witget baru dengan title "Top Tabs" silahkan klik edit dan tambahkan menu yang ingin ditampilkan.
*) dikutip dengan perubahan dari Horizontal Menu Navigasi

36 komentar untuk "Membuat Menu Navigasi Horizontal"

  1. Hanya bisa menyimak saja, Mas. Soalnya urusan kutak-katik template gini mesti hati-hati saya karena itu bukan bidang keahlian saya. :)

    BalasHapus
  2. tq info nya di coba dulu

    http://www.jasaadsense-termurah.blogspot.com

    BalasHapus
  3. cukup menarik tapi sayang saya masih bingung untuk mengotakngatik nya

    BalasHapus
  4. Terimakasih komentarnya, ini hal mudah untuk membuat navigasi blog kita lebih baik.

    BalasHapus
  5. bagus juga untuk mempermudah navigasi blog kita dan juga memperbagus tampilan

    salam kenal,
    RegiAdi

    BalasHapus
  6. keren gan..boleh copas gak artikelnya?

    BalasHapus
  7. Kalo menggunakan CSS gimana gan ?

    BalasHapus
  8. keren, tapi sayang cuman buat blogger.com ya kang?

    BalasHapus
  9. Kang Kurnia Septa, sya request donk cra biar cpat akun sya di approve sma Goggle AdSense.. Thx..

    BalasHapus
  10. @Kurnia Septa:
    ass....
    bagus banget artikelnya.. tapi kang, saya ga dapet tuh cari kode yang ke2 nya <div id= 'outer wraper.....
    udah berkali2 di cari tapi ga nemu
    gimana tuh kang??

    BalasHapus
  11. mas, saya udah bikin menuhorizantalnya,tapi kenapa ada beberapa yang kebawah jadinya, padahal masih ada tempat kosong disamping kanannya,,.gimana caranya supaya bisa di geser dan di sejajarkan semua,mksih.

    BalasHapus
  12. "Kami tidak dapat menyimpan template Anda.
    Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
    Lebih dari satu widget ditemukan dengan id: HTML3. ID Widget seharusnya unik." <--- Mas klo ini knpa y?

    BalasHapus
  13. ass, gan, ane mau bagi” seputar informasi seputar astronomi nie kunjungin za di blog ane di bawah ini and sekalian nie minta pendapat seputar blog ane : )

    http://nanosciencerooms.blogspot.com/

    terimakasih nie sebelumnye hehe

    wss

    BalasHapus
  14. wah kalo yang ini ane g brani mas,,skrip codenya panjang bgt,,heheeee tapi lumayan buat tabungan il mu ane,,nakasih mas :D

    BalasHapus
  15. terimakasih atas pencerahannya mas...:)

    BalasHapus
  16. gan ko ane g nemu <div id='outer-wrapper dst. . . ya d edit html???
    mklum bru 2 hri blajar ngblog

    BalasHapus
  17. gk isa kk di punya ku udah gk isa lagi soalnya dah lebih dari 3 yng sama HTML3

    BalasHapus
  18. saya gk isa2 mas beri solusinya dong mas soalnya kalimat yng di suruh cari tuh gk ad sma sekali nah itu gimana mas solusinya ?

    BalasHapus
  19. Saya sudah mencoba buat tombol navigasi tapi selalu gagal.

    BalasHapus
  20. Saya sudah mencoba buat tombol navigasi tapi selalu gagal.

    BalasHapus
  21. gan ko ane g nemu <div id='outer-wrapper dst. . . ya d edit html???Please bijimana gan solusina ya....maturnuwun

    BalasHapus
  22. saya tidk menemukan div id nya gan, udah di cari berkali - kali pun ga ketemu.. kasih solusinya dong...

    BalasHapus
  23. grazie ya bang
    sedang dicoba nih hehe

    BalasHapus
  24. kok kode keduanya gak bisa bang ?
    mampir ke blog ane http://briliantdiamond.blogspot.com/

    BalasHapus
  25. MASIH BINGUNG MASS...
    nggak nemuin pilin EDIT HTML nya....

    BalasHapus
  26. @resep masakan: ya mengapa tdk ada?? div id

    BalasHapus
  27. This is very interesting, You're an excessively professional blogger. I have joined your rss feed and look ahead to in the hunt for more of your magnificent post. Also, I've shared your site in
    my social networks
    Here is my blog ; Kohls-Printable-Coupons.Net

    BalasHapus
  28. aq dah coba untuk yang pencarian pertama ketemu, tapi untuk yang pencarian di bawahnya
    ngga ketemu, jadinya ngga jadi nyoba. tp penasaran, gmn ya?

    BalasHapus
  29. aku baru minggu ini mengenal dunia blogger alhdllah udh punya blog,mngganti tmplate,tpi yg blum aku pahami cara memisahkan artikel kita sesuai kategorinya misal
    HOME,PENDIDIKAN,UMUM,CERITA,CURHAT,IKLAN

    Cara untuk memisahkan diatasnya yg blum saya pahami mnta bantuannya.bisa langsung ke suherdiantihuruhara@gmail.com
    terimksih ditunggu ovininya

    BalasHapus
  30. saya belum paham tentang nama nma yg ada diblog dan fungsinya maklum aku masih pemula,yg blum aku pahami itu cara tata letak dan horizontal dalam memisahkan dan mengelompokan setiap artikel yg berbeda di bagian paling atas
    minta ovininya mksih

    BalasHapus

Berlangganan via Email