Home » » Cara Membuat SubMenu di Blogspot

Cara Membuat SubMenu di Blogspot

Written By Cholil Smart on Tuesday, 13 September 2011 | 23:40

Hi... Sobat!!
Alhamdulillah kita masih diberi nikamat sehat dan sempat Oleh Allah sehingga dengan sehat dan sempat saya dapat berposting kembali setelah postingan terakhir  Kerjain Monitor Temen Dengan Screen Shaker
saat ini dapat berkembali dengan judul Cara Membuat SubMenu di Blogspot.
Membuat submenu bukanlah hal yang mudah tetapi setelah bertemu dengan postingan ini saya rasa hal ini akan terasa mudah dan tidak sedikitpun merasa sulit.
nah untuk mengetahui Cara Membuat SubMenu di Blogspot dapat anda ikuti langkah berikut :
1. log in dulu pada ID Blogspot kita
2. klik tata letak
3. pilih edit HTML
4. Copas kode berikut tepat diatas ]]></b:skin>

/* ----- NAVBAR MENU ----- */
#NavbarMenu {
width: 875px;
height: 35px;
background:#FF6600 url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;
color: #ffffff
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #ffffff;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background:#FF6600;
color: #ffffff;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;
width: 150px;
color: #ffffff;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
font: normal 14px Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #FF6600;
color: #ffffff;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

5. cari kode berikut

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>
</div>

6. jika langkah no. 5 sudah ketemu kemudian copas kode berikut dibawah kode no. 5

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li><a href='#'>Menu-1</a>
<ul>
<li><a href='#'>SubMenu-1-1</a></li>
<li><a href='# '> SubMenu-1-2</a></li>
</ul>
</li>
<li><a href='#'>Menu-2</a>
<ul>
<li><a href='#'>SubMenu-2-1</a></li>
<li><a href='#'> SubMenu-2-2</a></li>
</ul>
</li>
<li><a href='#'>Menu-3</a>
<ul>
<li><a href='#'>SubMenu-3-1</a></li>
<li><a href='# '> SubMenu-3-2</a></li>
<li><a href='#'> SubMenu-3-3</a></li>
</ul>
</li>
<li><a href='#'>Menu-4 </a></li>
</ul>
</div>
</div> <!-- end navbar -->

7. lalu di simpat
mudah bukan??
SELAMAT MENCOBA!!
Share this article :

149 komentar:

  1. mantaap om
    liat blog ane ngejreng

    ReplyDelete
  2. Tips yang sangat bermanfaat tuk personalisasi blog...perdana disini and happy blogging!

    ReplyDelete
  3. Bagus nih buat template yang memang gak di sediain jadi bisa-bisa kreatif sendiri aja...

    ReplyDelete
  4. mantav bos..
    trik yang bermanfaat.. :)

    ReplyDelete
  5. nice post mas, saya coba save mas.makasih

    ReplyDelete
  6. ada kode yang pendek gak? pake EDIT HTML aja. dimana cara mengukur (melebarkan) sub menu agar panjangnya sesuai dengan blog kita? maaf banyak tanya. masih baru nih :)

    ReplyDelete
  7. untuk mengatur panjang/lebarnya dapat agan otak-atik di bagian kode di bawah
    width: 875px;
    height: 35px;
    semoga dapat membantu

    ReplyDelete
  8. bermanfaat sangat buat ane yang ge newbie

    ReplyDelete
  9. kalau kemaren blogku klihtn spi
    sekrg dah mantaaaaaaaaap ramai gan
    makasih ya om

    ReplyDelete
  10. Apa ada sript submenu yang bisa dipasang di Joomla versi 1.5? Mohon pencerahannya ya. Saya sudah follow mu juga hgehehehehehee

    ReplyDelete
  11. mas KHOLIL AL QUSYAIRI, sudah saya pasang alamat blog mas di blog saya. Tukeran alamat blog gitu deh hehehehee. Salam dari Pontianak

    ReplyDelete
  12. mantap banget.... maaf gan boleh backlink gak?

    ReplyDelete
  13. Ijin nyoba.,.,.,.,.,

    sekalian numpang promosi blog.,,.,.,.,

    ReplyDelete
  14. iya betul itu, kok g jadi ya? apa yang salah. mohon bantuannya donk...

    ReplyDelete
  15. cara membuat submenu udah bagus tapi untuk membuat halamannya dari submenu tersebut gemana ya

    ReplyDelete
  16. gan, mau nanya.. untuk halaman sub menunya gimana?? maklum newbie nih.. :)

    ReplyDelete
  17. gan, saya sempat TKP ke blogmu tadi, kayaknya menu dan submenunya sudah tertata rapi......
    yang ga' dimengerti apanya gan??

    ReplyDelete
  18. saya kok gak bisa ya gan.

    gk ada yg headernya itu

    mohon bantuannya, recheck apa yg kurang : kaoscoupletangerang.blogspot.com

    ReplyDelete
  19. Tks... Mantap Gan...
    Sekalian Tukeran Link ya di "Coretan Gua"
    http://agus-firmansyah.blogspot.com

    ReplyDelete
  20. Mantap om :D
    ane make juga nih..
    hehe

    ReplyDelete
  21. mas kode div id='header-wrapper' klo gk ada gmn?

    ReplyDelete
  22. Tata letak?? Dimana?? Bingung.. Maaf, masih belajar.. :)

    ReplyDelete
  23. Ah, ada! Hehe... Submenu itu apa ya?? Wkwkwk...

    ReplyDelete
  24. Samehada@ coba cari salah satu yang ada dicode no. 5
    soalnya kemaren saya juga gt pas ane editkan punya teman. saya cari satu persatu hingga akhirnya saya temukan yang mirip.
    dan Alhamdulillah Sukses

    ReplyDelete
  25. Bang, thanks buat tipsnya.
    Tapi cara ngasih URL ke masing masing sub menunya gimana? Ditaro dimana, ya? Makasih.

    ReplyDelete
  26. gan caranya memberi link gmana ya??koq1 gx pernah jd???

    ReplyDelete
  27. gan caranya masukin link k sub menu gmana yaa??please d jawab

    ReplyDelete
  28. untuk gnt nama sub menu yg lainnya g mn bos?

    ReplyDelete
  29. maaf mas saya kok tidak menemukan kode langkah nomor 5 ya?

    ReplyDelete
  30. ngk jelas kodenya harus dicopy dimana letaknya di edit HTML.....mhon penjelasanya dong bro...???

    ReplyDelete
  31. wahab@ maaf terlambat balasnya. lihat pada code Menu-1 maka tanda pagar (#) digantu Url target sobat....... maka ketika klik tulisan menu-1 maka akan ngelink ke url yang sobat taruh tadi
    Rudy @ untuk mengganti nama submenunya tinggal cari tulisan pada menu yang ada diblog soba dengan CTRL+F lalu masuk tulisan yang ada pada menu tadi. contohnya Menu-1
    jika menu-1 sudah sobat temukan tinggal ganti sesuai selera sobat
    borneo @ gan kan sudah jelas toch...... tinggal ikuti saja langkah yang ada.

    ReplyDelete
  32. om gmn cara nya agar sub menu ini bisa di edit di rancangan? biar g usah ngedit di kode html nya?
    kalau mang tidak bisa, apa setiap kali kita menambah menu baru harus ngedit kode html nya lagi?
    makasih banyak..
    saya baru belajar blog.

    ReplyDelete
  33. kang gmn caranya biar pos komen saya juga terbuka seperti ini? saya pakai blogger. pos komen saya g langsung terbuka seperti ini.
    mohon pencerahannya.
    kaso'on.
    salam de padeh madureh... hehe

    ReplyDelete
  34. Dewi@ hemmm kalau tertan ne masih mau pakai carai ne pastingan harus masuk ke editHTML. dan ada cara lain yang editnya di Page Element tapi belum saya post............cuma hanya menu saja ga' ada sub menunya gt
    masalah kita koemntar ada di pengaturan tapi saya lihat ternyata kotak koemntar tretan sudah muncul gt kok
    Oneda@ enggi depadeh

    ReplyDelete
  35. Thank's infonya....
    ini sangat membantu.

    ReplyDelete
  36. sip tenan infone.. nganti q ra iso nggoleki.. jan asu

    ReplyDelete
  37. thank gan tutornya,bikin ane + ilmu....

    ReplyDelete
  38. thank gan atas tutornya
    ke barakbali dot com

    ReplyDelete
  39. panglima@ sip
    oong@ pasti
    wahyu@ ya gan sama-sama, ane psti kunjungi balik

    ReplyDelete
  40. OM, kok Klo nyari Kode Berikut
    Kok Pas nyari Kode yg di langkah kelima gk bsa ya?
    Gak ada ya? Sya pke Fitur ctrl+f Gk bsa ke seacrh

    ReplyDelete
  41. Om, Klo Pas di STEP ke-lima nyari kode nya gk ktemu Ya? sya pke CTRL+F

    ReplyDelete
  42. kalau code tersebut tidak ditemu, cobalah menggunakan key yang dekat dengan code tersebut dan tetep menggunakan CTRL+F lalu enter jika menemukan cobalah lalukan langkah nomer 6 tapi jangan langsung di simpan, melain di Pratinjau dulu takut eror.
    semoga berhasil

    ReplyDelete
  43. Askum...mas brow, buat ngatur biar bsa center gimana submenu nya...?maklum, bru latihan...thanks tips tips nya...

    ReplyDelete
  44. Oya Mas Kholil 1 lagi, Mislankan saya mau menambahkan alamt URL Link, Jdi misalkan kita mencet di SubMenu langsung ke buka. Sma Misalkan Kita Mau mengganti Nma Di SUb Menu. itu aja sih, Terima kasih sebelumnya.

    ReplyDelete
  45. Oya Mas Kholil 1 lagi, Mislankan saya mau menambahkan alamt URL Link, Jdi misalkan kita mencet di SubMenu langsung ke buka. Sma Misalkan Kita Mau mengganti Nma Di SUb Menu. itu aja sih, Terima kasih sebelumnya.

    ReplyDelete
  46. hal tersebut yang perlu anda lakukan adalah di langkah yang keenam.......
    dalam code tersebut ada code h r e f ='#'>Menu-1
    nah tanda # diatas kamu ganti dengan url tujuan dan Menu-1 kamu ganti dengan nama menu sesuai selera anda

    ReplyDelete
  47. klo caranya memposting d submenu gmana, , please comen, maaf baru belajar. . .

    ReplyDelete
  48. XII IPs3@ jika sobat ingin mengisinya menu atau submenu tersebut, sebaiknya sobat membuatkan label terlebih dahulu dan link label tersebut masukkan di menu tersebut. caranya lihat pada penjelasan diatas pertanyaan anda.

    ReplyDelete
  49. kalo untuk menu laman statis, cara buat sub menunya gimana?

    ReplyDelete
  50. mas kalo mau ganti warna background menu kode yang mana harus diganti ???

    ReplyDelete
  51. Mull@ untuk cara lain bisa googling gan
    Chandra@ code yang seperti #FF6600 bisa kamu ganti terus ada dibawahnya lagi yang ada tulisan backgroundnya dicoba gan.......
    Gilang@ tinggal mengganti namanya az gan

    ReplyDelete
  52. MANTAP...sekian lama saya cari cara membuat submenu drop down, baru disini yang paparannya singkat dan jelas... langsung jadi lagi.

    hatur nuhun ya

    ReplyDelete
  53. Edit HTML itu yang dimana ya mas saya tidak jumpai di tata letak bisa kasih gambar ilustrasinya

    ReplyDelete
  54. Ridwan@ disebelah tulisan tata letak itu ada tulisan Edit HTML

    ReplyDelete
  55. ga nemu kode "<div id='header-wrapper' blablabla.." di HTML. gimanaa nih, mohon bantuannya

    ReplyDelete
  56. mas saya newbie nih jarak antar kata di submenunya bisa diatur2 ga ?
    di submenu saya jarak antarkatanya deket jadi banyak tempat kosong / sisa disubmenunya

    ReplyDelete
  57. mas kode backgorund ama colornya nya saya ganti make kode warna item tapi kenapa submenunya jadi transparan ? , terus kalau submenunya pengen ada ditengah, html yang mana yg harus di edit ?

    ReplyDelete
  58. Rumit juga buat newbie kayak saya, mas...tapi saya coba dulu deh.
    Makasih dah share.. :)

    ReplyDelete
  59. pastinya begitu
    kan kita sudah tau dengan kata-kata
    SSETIAP PERMULAAIN ITU SUKAR

    ReplyDelete
  60. susah nih ngatur panjang lebarnya yg sesuai

    ReplyDelete
  61. kenapa aku cari di edit HTML ku yang nomer 5 gak ada?

    ReplyDelete
  62. edit HTMLnya ada dimana ?

    ReplyDelete
  63. Ada disebelah elemen laman tuch gan

    ReplyDelete
  64. gan ...trus kalo mau posting d sub menu nya gimana?
    bales dong

    ReplyDelete
  65. itu kasih link labelnya gan........
    tapi terserah kamu mau diisi apa tapiyang jelas untuk mengisinya harus link halamannya yang dimasukkan

    ReplyDelete
  66. gan, klo mau dirata tengahin caranya gimana?

    ReplyDelete
  67. thx postnya
    kunjungi y rezaryuzaku.blogspot.com

    ReplyDelete
  68. Mohon bantuannya bos, karena msh pemula, kalo menu dah ada, trs q cb pake postingan kmu msh lum bs, solusinya bos... thank's

    ReplyDelete
  69. kamu bikin post dulu terus kamu ambil URLnya dan masukkan di edit HTMLnya

    ReplyDelete
  70. Tolong ajarin scriptnya dong....

    ReplyDelete
  71. siiip laksanakan........
    Sukses untuk anda.........

    ReplyDelete
  72. thx gan infonya..sangat membantu bgd..
    tapi cara merubah posisi menunya supaya ada di tengah gmn ya gan??sudah saya utak atik kok ga mau pindah juga??
    mohon solusinya gan..

    ReplyDelete
  73. Menunya nanti kyag di blog.nya sampean bro...

    thansk sbelumnya..,dh ngasih ilmu ♣ ♣ ☺

    ReplyDelete
  74. ngak gerti, edit HMTL d bagian mn?

    ReplyDelete
  75. ganti warnanya sama ganti model tulisannya gan.... gimna edit HTMLnya,,,?

    ReplyDelete
  76. makasih bang
    ini yg ane cari2

    ReplyDelete
  77. 1 lagi, sebagai rasa terima kasih,

    Ane klik iklan ente semunya,, kira ada 4 jadi 4 x 300 = Rp 1.200.. hehhehe lumayan...

    sekali lagi Sankyu Ya ^_^

    ReplyDelete
  78. gan gmn cara mengatur space antar submenu yg 1 dengan lainnya supaya pas

    ReplyDelete
  79. agan tolooonng aku gan,,, pleaseeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

    cara masukin link ke submenu submenu ny gmn,, mhon d jawab,,,
    kalo udh d jwab kash tw aq ya please di http://ahmadbjblogs.blogspot.com

    atau di fb saya
    http://www.facebook.com/ahmad.sanasbar


    maaf aq newbie

    ReplyDelete
  80. gan, untuk memasukkan link ke submenu tersebut agan harus masuk ke edit HTML lalu lihat pada code yang nomer 6 itu terdapat tanda # (pagar) agan bisa ganti dengan URL atau link tujuan yang agan inginkan. itu saja semoga dapat membantu

    ReplyDelete
  81. di blog pertama sih muncul tapi blog keduaku gak bisa muncul gan,template ane awesome. inc

    ReplyDelete
  82. trus caranya ngisi postingan/materi ke Tab-tab tadi gimana gan ??

    ReplyDelete
  83. Cara posting ke sub menunya gmn?thanks

    ReplyDelete
  84. Wah di blog saya ga jalan ni, kenapa ya..??

    ReplyDelete
  85. mkasih bang atas infonya,,, saya sudah berhasil

    ReplyDelete
  86. Postingnya cukup bermanfaat ini. jadi nambah wawasan untuk para blogger terutama bagi saya mahasiswa yang baru ngambil mata kuliah pemrograman web :) Lanjutkan gan!

    Untuk agan" yg nyoba tp belom berhasil jgn putus asa, kreatifitas itu membutuhkan kesabaran :)
    Tolong cek blog saya juga yah

    ReplyDelete
  87. Untuk menambahkan jumlah muatan submenunya gimana yah?

    ReplyDelete
  88. saya cari kode (div id='header-wrapper') tida ketemu gun bgaimana cara mencarinya ???

    ReplyDelete
  89. gimana cara mengganti hurufnya jadi huruf kapital?

    ReplyDelete
  90. Thanks Gan infonya...
    Salam kenal...

    ReplyDelete
  91. Makasih gan...sangat membantu buat ane yg newbie

    ReplyDelete
  92. kalau buat tempelete seperti ini seo friendly tidak sih?

    ReplyDelete
  93. Makasih bro, Bermanfaat tuh....Kunjungi Aku yah

    ReplyDelete
  94. langsung dicoba gan..
    makasih infonya..

    ReplyDelete
  95. thanks info'x gan, bermanfaat sekali bagi saya ..

    ReplyDelete
  96. terimakasih informasiny saya akan coba praktekan

    ReplyDelete
  97. Hemmm Blog saya ganteng dah gan, Makasih Infonya

    ReplyDelete
  98. sangat bermanfaat gan, lanjutkan ..

    ReplyDelete

Komentar anda saya butuhkan
Komentar anda akan sangat membantu saya
Komentar anda menjadi kebanggaan saya
komentar anda lebih berharga dari berlian

Jangan menyertakan URL pada kotak komentar
karena akan saya anggap sebagai SPAM

Popular Posts

 
Support : Petotu | Pondok Template
| Penyejuk Hati
Copyright © 2013. PETOTU - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger