Membuat Menu di Bawah Header / Judul Blog

Bagi rekan blogger yang menggunakan template yang belum difasilitasi dengan menu horisontal dibawah header pada blognya, berikut saya postkan bagaimana cara membuat menu tersebut. Fungsi dan kegunaan menu ini adalah agar memudahkan kita dalam menelusuri  semua isi yang terkandung didalam blog tersebut (baca: easy to navigate)  .Yuk kita mulai...



Update Okt-2013 !!
Langsung pergi menuju Layout--Add a Gadget(pilih yang berada dibawah header/diatas post body)--HTML/Javascript , copy kode dibawah ini..
Jika elemen / Gadget dibawah header belum ada, baca ini dolo..

<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav { background :silver repeat-x bottom left;margin:0 px;padding:0;height:35px;}
#cat-nav a { color:black; text-decoration:none; text-shadow: #000000  0px 0px 0px;border-right:1px solid  white;}
#cat-nav a:hover { color:#000; }
#cat-nav li:hover { background:#bbb repeat-x; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#ddd; }
#secnav a { font-family:Trebuchet MS; font-style:none; font-weight:700; font-size:15px; display:block; z-index:100; padding:0 10px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -960em; width: 170px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family: Verdana, Geneva, sans-serif; width:150px; line-height:30px; padding:0 10px; font-size:13px; font-style:bold ; font-weight:400; color:black; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-960em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin: auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='http://# '>Beranda</a></li>
<li><a href='http://# ' target='_blank'>MENU 1</a>
<ul id='sub-custom-nav'>
<li><a href='http://# ' target='_blank'>SUB MENU1</a></li>
<li><a href='http://# ' target='_blank'>SUB MENU2</a></li>

</ul>
</li>
<li><a href='http://# ' target='_blank'>MENU2</a>
<ul id='sub-custom-nav'>
<li><a href='http://# ' target='_blank'>SUB MENU2.1</a></li>
<li><a href='http://# ' target='_blank'>SUB MENU2.2</a></li>
</ul>
</li>
<li><a href='http://# ' target='_blank'>MENU3</a>
<ul id='sub-custom-nav'>
<li><a href='http://# ' target='_blank'>SUB MENU3.1</a></li>
<li><a href='http://# ' target='_blank'>SUB MENU3.2</a></li>
</ul>
</li>

<li><a href='http://# ' target='_blank'>MENU4</a>
<ul id='sub-custom-nav'>
<li><a href='http://# ' target='_blank'>SUB MENU4.1</a></li>
<li><a href='http://# ' target='_blank'>SUB MENU4.2</a></li>
</ul>
</li>

<li><a href='http://# 'target='_blank'>MENU5</a><ul id='sub-custom-nav'>
<li><a href='http://# 'target='_blank'>SUB MENU5.1</a></li>
<li><a href='http://# 'target='_blank'>SUB MENU5.2</a></li>
</ul>
</li>

<li><a href='http://# 'target='_blank'>MENU6</a><ul id='sub-custom-nav'>
<li><a href='http://# 'target='_blank'>SUB MENU6.1</a></li>
<li><a href='http://# 'target='_blank'>SUB MENU6.2</a></li>
</ul>
</li>
<li><a href='http://# 'target='_blank'>MENU7</a><ul id='sub-custom-nav'>
<li><a href='http://# 'target='_blank'>SUB MENU7.1</a></li>
<li><a href='http://# 'target='_blank'>SUB MENU7.2</a></li>
</ul>
</li>
<li><a href='http://www.masbugie.com' rel='dofollow' target='_blank'>About Me</a>
<ul id='sub-custom-nav'>
<li><a href='http://id-id.facebook.com/people/Bugie-Down/1359919635' rel='dofollow' target='_blank'>FACEBOOK</a></li>
<li><a href='http://twitter.com/masbugie' rel='dofollow' target='_blank'>TWITTER</a></li>
</ul></li></li></li></ul></div>

*Alamat url diatas silahkan sesuaikan dengan blog Anda dan teks warna biru sesuaikan dengan selera.
Lebar kotak pada menu sudah saya setting menyesuaikan dengan panjang tulisan pada menu beroo. Lebih jelas dan detailnya lagi silahkan lihat videonya

Untuk mengetahui kode-kode warna dalam HTML silahkan lihat juga dsini
Selesai, semoga bermanfaat....salam

130 komentar:

  1. Ilmu ini bagus tapi pengunaannya tergantung kebutuhan juga sih, tapi yang mau serius jangan lewatkan ini.

    BalasHapus
  2. maksaih info nya,mampir ya di blog saya..
    http://infobersama.blogspot.com

    BalasHapus
  3. mas, blognya sudah saya follow...
    follow balik yaa..

    BalasHapus
  4. saya kesulitan merubah ukuran Tabs nya,.sebab terlalu panjang melebihi width header saya, 945px,..

    Cat, proses diatas saya tambahkan setelah saya pasang Pages List bawaan draft.blogger

    Bagaimana cara atasinya gan?

    BalasHapus
  5. KLO MO MERUBAH UKURAN HURUFNYA GIMANA YAKH MAS...THANKS SEBELUMNYA

    BalasHapus
  6. blognya oke mas top,n semoga sukses selalu...dan exis terus
    bagi teman2 juga bisa contoh blog2 yang alin..

    contohnya...hehehehehe,,,,,,

    by.http://risma-com.blogspot.com

    BalasHapus
  7. thx bgt mas, postingannya sangat membantu. "I like it"!

    BalasHapus
  8. sangat berguna nih blog mas .
    hhee

    BalasHapus
  9. izin copy mas ,,,, sangat membantu sekali,,,,

    BalasHapus
  10. mas..gimana cara mengatur jarak antar menunya??atau adakah cara mengubah tampilan menunya??

    BalasHapus
  11. izin minta informasinya ya om, skaligus mempelajari,, trima kasih...
    :)

    BalasHapus
  12. Thanx buangett, dah mumet-mumet nih cari cara, begitu nyobain cara dari bro satu ini...langsung well done....two tumbs up!

    BalasHapus
  13. wah...... Mantap nih, kebetulan lagi nyari cara bikin menu tab ini, ntar saya coba.......

    BalasHapus
  14. assalamualaikum wr wb,makasih mas masukannya,salam kenal

    BalasHapus
  15. Thanks infonya sangat berguna dan langsung sy praktekkan, tp gimana cara mengatur jarak antar menunya atau cara mengubah tampilan menunya, thanks

    BalasHapus
  16. sebelum'a trim's untuk ilmu'a...
    saya mau nnya mas, setelah itu semua selesai..
    bagaimana cara meletakkan artikel agar sesuai..
    misal ada HOME, DOWNLOAD, TUKAR LINK.
    Qt mmbuat Link download dan ingin meletakkan artikel tersebut di DOWNLOAD...
    mhon bmbingannya mas, maklum saya baru buat blog 2 hari yang lalu.. trima kasih

    BalasHapus
  17. trim's sgat mmbantu...
    saya mau nnya kalo semisal saya bikin laman judulnya software...
    trus saya posting entry baru, kategori software...
    nah agar bisa masuk ke laman software-nya itu gimana ya mas...
    mohon bimbingannya karna saya masih baru dalam blog.. trimakasih...

    BalasHapus
  18. mantap sekali mas.terimakasih banyak informasinya.sangat bermanfaat sekali.ini yang selama ini saya cari tapi baru ketemu sekarang.terimakasih banyak mas.semoga blognya makin jaya....

    BalasHapus
  19. makasih infonya gan.....sdh berhasil aku coba,tp kok gak bisa muncul berita postingannya ya gan????tolong di cek blog pemula saya ya gan & tolong di kasih pencerahanya.http://dampoawang-news.blogspot.com
    terimakasih gan...smg tetap jaya

    BalasHapus
  20. gan,nanya lg nich...maklum msh pemula
    tolong di kasih pencerahannya supaya kalau di klik menu tokoh,yang berita yg terkait dgn tokoh itu muncul.jadi kalau itu bs muncul biar labelnya saya hapus aja gan..tolong ya gan pencerahannya
    dampoawang-news.blogspot.com

    hormat saya

    inspirasi/satrio menggolo

    BalasHapus
  21. info yg good bnget gan,
    mau nanya gan, kan d'situ text-transform'x uppercase(d'bagian atas), nah klo d'bagian tengah kya puxa agan gimana ya???

    BalasHapus
  22. makasih banyak gan infonya membantu sakli.

    maklum masih katro...
    salam kenal

    BalasHapus
  23. Mohon pencerahan,.. baru belajar nih,.. heheeee !!

    Bagaimana biar tampilan menunya bisa tetep DIAM berada ditengah ???
    alian tetep center dengan tampilan blog, andaikan diamainkan zoom halaman.

    punya saya kok lari diam di sebelah kiri,.. mas bro ???
    http://aslinerodoedansithixreppublik.blogspot.com
    hellp me,.. ! mohon di koreksi dan kasih pencerahan.


    tanks... All.

    BalasHapus
  24. Mantap Boss
    Sangat Berguna
    ane izin Copas yak :)

    BalasHapus
  25. ijin coba n copas ya mas.. mau praktek, maklum masih newbie..

    BalasHapus
  26. mas, cara mengisi menu trsbut dengan artikel bagaimana mas..??? harap bantuan nya... kunjung balik ke blog saya mas, terima kasih,

    http://www.tokoh-pulsa.co.cc/

    BalasHapus
  27. nice info mas, kalo sempet pada mampir ya di blog saya http://bajinglumpat.blogspot.com

    BalasHapus
  28. mantab mas !
    cek aja hasilnya di blog ane.

    BalasHapus
  29. gan! Ane pake hp.. Jd cra yg di ats kaga bs..!! Ada cara lain gak gan !? Yg lewat hp?

    BalasHapus
  30. salam. postingannya bagus dan berguna buat saya, yang baru memulai blogging, thank,s infonya..!!!

    BalasHapus
  31. makasih yaaa...
    infro x..

    by http://info-trik-computer.blogspot.com/

    BalasHapus
  32. cara buat sub menu gimana ya mas?trus supaya sub menu atau menu nya waktu di klik menuju ke tempat yang dimaksud cara html menu dan sub menunya gimana tuh.kasi contoh sekali pake httpnya donk.blogger pemula nih.sik bingung.trimakasih mas:)

    BalasHapus
  33. Wah,,,, ini yang ku cari... muakasih banyak mas info blognya..... sukses selalu...

    BalasHapus
  34. Makasih banget mas infonya,sukses slalu

    BalasHapus
  35. wah mantap gan infonya, kayaknya bakal di subscribe nih website !!
    hehe, artikelnya mantab-mantab,,,,
    thanks gan, lain kali masih boleh mampir donk ?
    :D

    BalasHapus
  36. supaya menunya berada di atas coment gmana

    BalasHapus
  37. Ini yang saya cari-cari, trims sob atas ilmunya. Cuma saya kan masih baru sebagai blogger, jadi belum banyak artikel artikel yang saya tulis. ntar kalau udah banyak ide dan isi blognya, saya akan praktekan ilmunya. Sekali lagi makasih ya...

    BalasHapus
  38. tips nya bermanfaat..tapi bagaimana cara me-link-kan tiap2 navigasi nya?

    BalasHapus
  39. ok,,,,trims infonya, luar biasaa....

    BalasHapus
  40. wow gk sengaja nemu blog bermanfaat ini...thanks ini yang dibutuhkan pemula kayak ane ..sukses slalu selamat berkarya.I LOVE INDONESIA
    my blog
    www.infokerjainternet.blogspot.com

    BalasHapus
  41. lagi punya masalah sama itu, sudah ada tp bawaan template.. mau ngedit, pusing nih >.<

    makasi inponya kaka...
    maen juga yaa.. http://sukabaca-baca.blogspot.com/

    follback dong ^^

    BalasHapus
  42. bagus ni infonya
    tolong mampir ke poenyakintan.blogspot.com

    BalasHapus
  43. Mksh ya Mas untuk posting ny.. ^__^

    BalasHapus
  44. permisi mas, mau tanya nih, kalo menyisipkan gambar diblog tuh gmn ya mas? mksh

    BalasHapus
  45. permisi......

    saya mau tanya nie???
    pas aq buat daftar menu ikut petunjuk mas, kok masih belum bisa ya?????

    salahnya dimana ya?????
    tolong dibantu ya???
    terima kasih.........

    BalasHapus
  46. THAKS GAN INFONYA...YAHUT BGT..

    BalasHapus
  47. kok tampilannya melebar kekiri gak rata dengan kotak templatenya gan!! gimana dong ratainnya?

    BalasHapus
  48. kang,......mau tanya.....
    lalu gimana caranya agar di satu menu terdapat banyak tulisan???
    misalnya di Tips dan Trik.kan banyak kan seharusnya???
    kalau yang dari mas bugie kasih itu cuma ke 1 link saja.....
    minta pencerahanya.....
    matur nuwun........

    BalasHapus
  49. makasih mas bugie...ini dapat menambah pengalaman saya..dan minta izin untuk saya ajarkan bagi anak2 anak sekolah komunitas kami......

    BalasHapus
  50. keren infonya..
    jgn lupa berkunjung ke

    88-revolutionaryrebellion.blogspot.com

    BalasHapus
  51. thanks atas infonya yang sangat bermanfaat dan mudah dicerna, salam kenal
    http://caramembuatyangakumau.blogspot.com

    BalasHapus
  52. gan, mohon pencerahannya, kemaren saya mau tambah gadget yang seperti agan tapi disitu (elemen rancangan) udah ada pilihannya (gadget2nnya gitu) dan gx ada pilihan HTML/Javascript. itu gmn gan ?

    BalasHapus
  53. @kanjenk BB : betul masgan dulu Tata Letak sekarang Rancangan, pada halaman Elemen Laman klik tambah gadget gan, ntar pada halaman popup muncul tuh beberapa pilihan termasuk HTML/JavaScript yg masgan maksudkan, makasih dah mampir

    BalasHapus
  54. BAGUS BANGET TRIKNYA MAS... eh mas, cara masukan postingan ke menu2 yang udah dibuat gmn ya???

    BalasHapus
  55. klw mau buat menu kayak di web in gmana kak cara buatnya. Tolong caranya kirim lewat email saya ya. Makasih :)

    BalasHapus
  56. cara ngisi menunya gmna mas????mnunya ad tp isinya g ad

    BalasHapus
  57. artikelnya bagus mas, sangat membantu. tp jujur sy blm bisa meletakkan artikel/entry agar masuk di menu yang tepat,,..misalkan saya ingin menulis artikel di menu HOME, gmna caranya agar bisa tampil hanya di HOME???.. mf mas sy masih pemula bgt, mhon pencerahannya ...

    arief.endah1331@gmail.com

    BalasHapus
  58. Sipp bgt om.. ini yg saya cari dr dulu..
    Tapi masalahnya sekarang gimana cara entry ke tiap tiap menu tadi..??
    butuh bimbingan lebih lanjut, thx

    BalasHapus
  59. @iBajuzz :pada bagian <a href="http://www.masbugie.com " class="navigation">HOME</a> dan seterusnya kebawah silahkan ganti URL dan sesuaikan nama menu yang sampyan inginkan, smoga membantu , makasih kunjungan dan commentnya, sukses buat Anda

    BalasHapus
  60. makasih infonya..,manfaat bangrt buat blogger pemula.
    www.cobacoba-herbal.blogspot.com

    BalasHapus
  61. follow blok q balik ya http://puisir3maja.blogspot.com/

    BalasHapus
  62. info yg bagus.. kebetulan ane baru belajar blog.. mksh atas infonya.. lgsung ane praktekkin.

    BalasHapus
  63. Nice gan ! visit dr-pesek.blogspot.com

    BalasHapus
  64. bang klo template standart bisa tidak tlong di jwab.....

    BalasHapus
  65. saya cari2 kemana-mana tapi ngga ngerti karena ngga lengkap penjelasannya..
    *maklum saya masih pemula*
    ehh disini saya nemu yg lengkapnya...
    makasih ya mas bugie

    BalasHapus
  66. Nah ini nih panduan yang mudah diikuti. Makasih infonya Mas Bugie...

    BalasHapus
  67. Nice info gan ^_^
    Mapir ya :D
    rgs-share.blogspot.com

    BalasHapus
  68. wah..mantap sekali sob.....sukses... tp gimana kalau mau nambahin croscol jadi dua bagian, maksudnya ada dua sob...

    BalasHapus
  69. akhirnya aku bs gan berkat lihat blog ini.thank gan.

    BalasHapus
  70. Thx Ya Kaka Info Nya ....

    Tolong Mampir Ya Kalau Sempat Tpi Hruz Di Sempatin Ya

    BalasHapus
  71. mas, bagaimana mengisi menu-menu itu setelah kita buat, supaya ketika kita klik foto contoh salah satu menunya, terus gambar foto dan supaya teratur dia.

    www.marinus-laia.blogspot.com

    BalasHapus
  72. thanks ya buat postingannya. salam kenal

    BalasHapus
  73. Bang kok saya cari ngak ada kalo tau plis kasi tau yaa

    BalasHapus
  74. baguss gan.. haha blogspot ku skrg sudah punya menu. asik asik..

    BalasHapus
  75. terimakasih gan,, sangat membantu ,, akhirnya saya bsa .

    BalasHapus
  76. siiiippp dah. visit back ea http://www.bocahdoko.co.cc/

    BalasHapus
  77. oke, visit back http://www.bocahdoko.co.cc/

    BalasHapus
  78. ko di theme yang saya pake gak ada ya kodenya..

    BalasHapus
  79. akhirnya berhasil juga membuat menu di blogku ^_^ Thankyuu...

    BalasHapus
  80. akhirnya bisa juga bikin menu diblogku.. thankyu...

    BalasHapus
  81. terjawab sudah tanda tanya besar yang mengerak dibenak. matur thank you om

    BalasHapus
  82. sip mas bugie,,sangat bermanfaat,,kunjungan balik mas ya,,trims

    BalasHapus
  83. Makasih banget!Akhirnya bisa bikin menu juga di blog ! Skali Makasih ......

    BalasHapus
  84. Very nice and useful info.
    Langsung saya coba, hehe
    Terima Kaih infonya :)

    BalasHapus
  85. Thanks gan, bermanfaat nih :D
    kunjungi blog ane juga ya gan :)

    BalasHapus
  86. mas kok aku nyari ini


    gak ada ya??

    malah adanya
    ??

    BalasHapus
  87. gan, minta tolong donk ini gmna punyaq kok salah satu dari menu gak berwarna..
    yang lainnya berwarna...

    mohon pencerahannya ?

    BalasHapus
  88. salam kenal ya... jagan lupa berkunjung balik ke blog ku ya... di http://nova-fms.blogspot.com makasih ya......

    BalasHapus
  89. terima kasih gan walaupun punya ane warna nya ngak berubah jadi lumayan

    BalasHapus
  90. Uraiannya tentang cara membuat menu sangat bermanfaat Sob. Ringkas dan padat namun sangat jelas. Oh ya, tidak lupa saya sampaikan salam kenal serta salam berbagi. :)

    BalasHapus
  91. Keren gan :
    Patut dikunjungi juga nih, buat sobat-sobat BLOGGER di blog sederhanaku!

    http://khae7.blogspot.com

    ada : PENGETAHUAN, DESAIN, RENUNGAN, KALIMAT BERGAMBAR GOKIL, CERITA LUCU DLL.

    Terima Kasih Sebelumnya

    BalasHapus
  92. thanks gan work...

    http://www.unlimitedinformation.net

    BalasHapus
  93. mempelajari dengan bersabar akhirnya bisa juga....
    terimakasih yah sangat bermanfaat :)

    BalasHapus
  94. info yg sangat bagus dan sangat bermanfaat bagi saya, kunjungi juga blog saya www.ankurniawan.blogspot.com

    BalasHapus
  95. Bagaimana cara mengatur ukuran text-nya, gan?! Mohon dibalas!

    BalasHapus
  96. mantaf sih mantaff gan,, tapi ane belum mudeng mudeng juga nich

    BalasHapus



 
Mas Bugie [dot] com Copyright © 2010-2014 All Rights Reserved , Powered by Blogger