Nggak mau ketinggalan artikel baru Blogger-Holic? Subscribe Sekarang
Hot Categories: Blogger News | Hack | SEO | Tips | Tutorial | more

Horizontal Link Tab Menu di Blogger

28.12.08 | 40 comments

Phew.. Akhirnya bisa ngepost lagi..
Udah 2 minggu ini susah bener rasanya mao bikin post baru.. Niatnya pas abis Studi Lapangan ke Djokja tanggal F24 kemaren mao bikin, malah koneksi internet nya yg matek.. hadohh >.<

Mumpung bisa online, saya mao nge-share gimana caranya bikin Menu Horizontal Tab sederhana. Sekalian juga buat ngebantuin si Ardhin yg dari dulu kayaknya ga kelar2 bikin menu horizontal tab ini..

Sistem navigasi yang baik dalam blog sangatlah diperlukan yang jelas2 dapat mempermudah pengunjung blog saat sedang menjelajahi isi blog kamu. Sistem navigasi ini bisa berupa Menu, baik horizontal maupun vertikal, atau berupa post yg dengan sedemikian rupa diubah menjadi halaman navigasi. Lalu, apa yg menarik dari Menu Horizontal Tab ini?

horizontal menu
Menu Horizontal bisa menjadi alternatif buat Menu Vertikal biasanya dan bisa jadi ngebuat halaman blog jadi lebih hemat. Melihat dari pentingya keberadaan nya, Menu Horizontal Tab biasanya diletakkan di tempat yg mudah dilihat pengunjung. Di bawah Header contohnya.

1. Langkah pertama, masuk ke Layout > Edit HTML.

2. Masukkan kode CSS ke dalam template, gampangnya letakkan di atas kode ]]></b:skin>

#navigation{font-size:110%;
height:2.2em;
line-height:2.2em;
margin:0 1px;
color:#999;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ccc;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #999;
}
* html #navigation a {width:1%;}
#navigation a:hover{
background:#ccc;
color:#fff;
text-decoration:none;
}

3. Selanjutnya cari kode ini:
<b:section class="header" id="header" maxwidgets="1" showaddelement=”no”>

Kalo engga ketemu cari section dengan class="header".
Lalu ubah menjadi:
<b:section class="header" id="header" maxwidgets="10" showaddelement="yes">

Ini dilakukan supaya kamu bisa memasukkan element di bawah bagian header blog kamu.

4. Lalu masuk ke Page Elements. Di bawah bagian Header, klik Add a Gadget. Pilih HTML/JavaScript

5. Masukkan kode2 ini ke dalamnya:
<div style="text-align: center;">
<div id="navigation">
<ul>
<li class="selected">
<a href="http://blogkamu.blogspot.com/">Home</a></li>
<li><a href="http://blogger-holic.blogspot.com/search/label/LABEL" >Link Label</a></li>
<li><a href="http://blogger-holic.blogspot.com/">Blogroll Links</a></li>
</ul>
</div>
</div>

6. Klik save.


Menu horizontal tab sebaiknya diisi dengan link yg bisa menjadi 'pintu2' bagi artikel lainnya. Contohnya dengan link menuju label tertentu. Dan jangan juga mengisi nya dengan terlalu banyak link, tentunya bakal bikin jadi penuh nantinya.

Pas lagi2 jalan ke blognya O-OM, saya nemuin ada sebuah online tools yg bisa ngedesain menu, horizontal bisa.. vertikal apalagi. Namanya MyCSSMenu. Tools ini rasanya perlu dicoba, selain prosesnya yg mudah, pilihan menunya juga banyak. Thanks infonya O-OM ^.^b


Update:
Ok, menu sudah terpasang, terus bagaimana caranya nambah isi link ke dalam menunya?
Caranya mudah aja koq..
tinggal tambahkan:
<li><a href="LINK_YANG_DIINGINKAN" >Anchor text</a></a></li>

diantara <ul> dan </ul>. Ubah LINK_YANG_DIINGINKAN dengan link yang akan dimasukkan ke dalam menu dan ubah Anchor text sesuai link yang dituju (baca juga: Apa itu Anchor Text? Teks Jangkar?).

40 comments:

  1. tanks sip banget...q kebetulan baru mengenal dunia blogger

    sangat bermanfaat

    sukses yaw

    ReplyDelete
  2. Terima kasih, sudah saya terapkan di blog saya, berhasil. Mudah-mudahan terus sukses.

    ReplyDelete
  3. trims triknya nih lagi sedang dicoba, yg jelas oke banget....

    http://suksescpns.net

    ReplyDelete
  4. Terima kasih sekali mas...sampai2 khusus buat saya. Ahahah sangat sangat bermanfaat. Thx ya

    ReplyDelete
  5. Aduh.. masih agak bingung nih... tapi mau aku coba.. thank's

    ReplyDelete
  6. thanks nih infonya, tapi pas dicoba incorect mulu.... gmn yah ?

    ReplyDelete
  7. udah dicoba, tp koq muncul sidebar baru di atas header yaa?

    ReplyDelete
  8. @ Masrul: maksudny sidebar baru gmn ya??

    ReplyDelete
  9. oke coy...salam blogger holic..

    ReplyDelete
  10. makasih tipsnya....dah tak pasang di blogku nih

    ReplyDelete
  11. Klo cara buat ngrubah warnanya gimana bos, saya bingung nih..:(

    ReplyDelete
  12. @ Kenali dan Kunjungi Objek Wisata di Pandeglang: buat ngubah warna, silakan otak-atik background-color (buat warna background) dan color (buat warna teks)

    ReplyDelete
  13. Thanks yaa.. info@ sangangat2 bermanfaat ,bloknya tambah keren ja, salam my best freen..!

    ReplyDelete
  14. ko malah vertikal deh ? trus ada tompelnya pula -_-

    ReplyDelete
  15. tq bro turorialnya.. jadi tambah cantik blog ane.. ^^

    ReplyDelete
  16. mantaav euy...
    yg mau jualan pulsa murah kunjungi ---->
    http://shinobi-cell.blogspot.com/
    gak pake bo'onk ,,,,

    ReplyDelete
  17. untung nemu nih blog,,,
    udah nyari kemane2 g da yg pas,,,,
    thanks...

    ReplyDelete
  18. thanks bangett...very helpfull setelah berhari2 cari.....lam kenal Ary. www.aryokosuggestion.co.cc

    ReplyDelete
  19. thanks, it works! but how to change navbar color into black or blue?

    ReplyDelete
  20. @9198604672642229527.0

    just add backround:#your_hex_number (eg. #000 for black, check Color Schemer Online to know your desired hex number color) inside

    #navigation{

    }

    thats all.. have a try :D

    ReplyDelete
  21. om kita udah bisa menu tabnya keluar tapi pas ngisi tab tersebut(link) susah sekali tolong dong

    ReplyDelete
  22. @3249289947507414633.0
    silakan dibaca lagi post nya mas.. udah saya update sedikit :D

    ReplyDelete
  23. This comment has been removed by the author.

    ReplyDelete
  24. salam
    saya sedikit kesusahan untuk menambah linknya . . cara update an yang di atas uda saya coba tapi ga mudeng

    apakah tulisan "LINK_YANG_DIINGINKAN" diisi dengan judul postingan kita??? dan cara penulisannya apa harus memakai underscore???
    thnx

    ReplyDelete
  25. @5820055038683201513.0
    saya kasih contoh lagi aja ya :)
    misal di horizontal menu di atas kan ada menu:
    <a href="http://blogger-holic.blogspot.com/">Home</a></li>

    lalu, kita mau nambahin link di sebelahnya. Sesuai cara update di atas, tambahin:
    <li><a href="http://Alamat URL.apakek" >Anchor text</a></a></li>
    di bawah kode di atas

    misal saya nambahin
    <li><a href="http://blogger-holic.blogspot.com/2008/02/contact-form.html" >Contacts</a></a></li>

    maka setelah menu Home nanti bakal ada menu Contacts

    baca juga Membuat HTML Link

    semoga jelas dan membantu :)

    ReplyDelete
  26. @4907036143258455320.0

    maaf mas pertanyaan saya salah
    maksud saya begini
    misal saya sudah punya menu horizontal yang berisi Home contact saintek aboutme

    kemudian
    ketika saya menulis sebuah tulisan dan ingin memasukkan nya ke dalam menu "saintek" apa yang harus dilakukan?????
    kode html nya bagaimana

    maaf ya mas ngerepotin

    ReplyDelete
  27. @7444232258107213886.0
    ooo.. maksudnya menunya mau dibuat menuju post blog kita gitu?

    mudah aja kok. berarti tinggal kita tambahin kayak di atas, cuma link tujuan diubah menjadi link post blog kita. contoh misal saya ingin buat menu HorTabMenu yg menuju post ini:
    <li><a href="http://blogger-holic.blogspot.com/2008/12/horizontal-link-tab-menu-blogger.html" >HorTabMenu</a></a></li>

    link http://blogger-holic.blogspot.com/2008/12/horizontal-link-tab-menu-blogger.html di situ bisa diganti sesuai dengan link post blog yg diinginkan..

    semoga kali ini bisa membantu :)

    ReplyDelete
  28. @8970423302661240801.0
    heheee
    maaf ya mas ngerepotin tapi maksud saya bukan begitu
    ato memang pertanyaan saya ga tepat sasaran x ya

    begini mas
    misalnya saya punya menu horizontal "saintek" yang sudah saya isi dengan entri matematika.
    berarti di awal saya nulis gini kan seperti yang mas kasih

    selesai
    di blog kita akan muncul menu "saintek" yang berisi entri matematika.

    kemudian
    saya ingin menulis entri baru tentang biologi ke dalam menu "saintek".
    kalau saya menulis begini lagi seperti kode diatas

    maka otomatis di menu horizontal nya kan jadi ada 2 menu "saintek" (double).
    nah
    apa kode html nya agar entri biologi masuk kedalam menu "saintek" tanpa harus penggandaan menu saintek
    hehe
    semoga kali ini pertanyaan saya tepat sasaran
    thnx mas


    note : kode html nya sama dengan yang komen mas. cuma saya hapus karena coment saya ini ga bisa terkirim karena ada kode html tsb. semoga mas bisa mengerti tulisan saya ini.
    klo mas blm mudeng pertanyaan saya sudilah kiranya berbagi email biar saya kirim melalui email saja.
    thnx mas

    ReplyDelete
  29. @5210403372671716328.0
    ooo.. maksudnya itu toh hehe
    maap baru mudeng :D

    mungkin maksudnya Drop down menu ya.. mohon maap kalo salah lagi :p
    tapi silakan disearch gugel contohnya, bener apa ngga hehe

    kalo untuk drop down menu,dulu saya pernah nyoba, tp sekarang udah lupa hehe

    tp nanti kalau ada waktu akan saya bahas.. mohon maaf sebelumnya kalau jarang update :)

    ReplyDelete
  30. Kalau untuk merubah panjang tabnya bagaimana mas? Dalam arti, bukan tab menu view yang berisi home, about me, dll. Tetapi, tab disini yang saya maksud tab backgroundnya. Karena, punya saya panjang tabnya kelewat batas...

    Terima kasih.

    ReplyDelete
  31. @3144333268160301674.0
    saya agak bingung maksudnya gimana.. tp kalo ngubah lebar menu keseluruhan sih di ID navigationnya ditambahin width, jadi:

    #navigation {
    ...
    width:500px;
    }

    kalo widthnya ga disebutin, nanti lebarnya bakal menyesuaikan..begitu

    semoga bisa membantu :)

    ReplyDelete
  32. Itu dia masalahnya mas, width punyaku diubah berapapun tetep aja lebar. Sebagai contohnya, seperti tab menu punya mas yang lebarnya sampai tepi itu.

    Check this out: http://aaimut.blogspot.com

    ReplyDelete
  33. @325703717185556325.0
    oo kalo header yg saya pakai itu agak sedikit tricky hehe

    trus knp lebar bar nya ga berubah padahal udah diperbesar width-nya? kmungkinan itu karena width tabmenu nya itu udah maksimal segitu sesuai dgn section/div tempat tab menu itu berada.
    coba width-nya tabmenu diperkecil, pasti berubah jadi kecil tabmenu-nya :)

    jadi gimana kalo mau ngelebarin tabmenu-nya? yaa, width section/div header-nya yg ditambahin..
    coba mas cari bagian yg ngatur width headernya, trus coba width-nya diperbesar..

    sok dicoba heula :)

    ReplyDelete