Home » » Cara Membuat SubMenu di Blogspot

Cara Membuat SubMenu di Blogspot

Written By Admin 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 :

148 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. sudah saya jawab lewat fbmu gan

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

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

    ReplyDelete
  19. saya kok gak bisa ya gan.

    gk ada yg headernya itu

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

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

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

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

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

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

    ReplyDelete
  25. 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
  26. Bang, thanks buat tipsnya.
    Tapi cara ngasih URL ke masing masing sub menunya gimana? Ditaro dimana, ya? Makasih.

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

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

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

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

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

    ReplyDelete
  32. 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
  33. 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
  34. 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
  35. 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
  36. Thank's infonya....
    ini sangat membantu.

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

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

    ReplyDelete
  39. thank gan atas tutornya
    ke barakbali dot com

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

    ReplyDelete
  41. 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
  42. Om, Klo Pas di STEP ke-lima nyari kode nya gk ktemu Ya? sya pke CTRL+F

    ReplyDelete
  43. 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
  44. Askum...mas brow, buat ngatur biar bsa center gimana submenu nya...?maklum, bru latihan...thanks tips tips nya...

    ReplyDelete
  45. sip thank's ya dah berkunjung

    ReplyDelete
  46. 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
  47. 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
  48. 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
  49. klo caranya memposting d submenu gmana, , please comen, maaf baru belajar. . .

    ReplyDelete
  50. 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
  51. kalo untuk menu laman statis, cara buat sub menunya gimana?

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

    ReplyDelete
  53. Terus ngisi sub'a gmana sih?

    ReplyDelete
  54. 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
  55. MANTAP...sekian lama saya cari cara membuat submenu drop down, baru disini yang paparannya singkat dan jelas... langsung jadi lagi.

    hatur nuhun ya

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

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

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

    ReplyDelete
  59. 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
  60. 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
  61. Rumit juga buat newbie kayak saya, mas...tapi saya coba dulu deh.
    Makasih dah share.. :)

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

    ReplyDelete
  63. susah nih ngatur panjang lebarnya yg sesuai

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

    ReplyDelete
  65. edit HTMLnya ada dimana ?

    ReplyDelete
  66. Ada disebelah elemen laman tuch gan

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

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

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

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

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

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

    ReplyDelete
  73. Tolong ajarin scriptnya dong....

    ReplyDelete
  74. siiip laksanakan........
    Sukses untuk anda.........

    ReplyDelete
  75. 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
  76. Menunya nanti kyag di blog.nya sampean bro...

    thansk sbelumnya..,dh ngasih ilmu ♣ ♣ ☺

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

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

    ReplyDelete
  79. makasih bang
    ini yg ane cari2

    ReplyDelete
  80. 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
  81. thanks baanyak ya mas infonya

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

    ReplyDelete
  83. 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
  84. 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
  85. di blog pertama sih muncul tapi blog keduaku gak bisa muncul gan,template ane awesome. inc

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

    ReplyDelete
  87. Cara posting ke sub menunya gmn?thanks

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

    ReplyDelete
  89. Koq di cari gak dapat kodenya?

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

    ReplyDelete
  91. 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
  92. Untuk menambahkan jumlah muatan submenunya gimana yah?

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

    ReplyDelete
  94. gimana cara mengganti hurufnya jadi huruf kapital?

    ReplyDelete
  95. Thanks Gan infonya...
    Salam kenal...

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

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

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

    ReplyDelete
  99. langsung dicoba gan..
    makasih infonya..

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

    ReplyDelete
  101. terimakasih informasiny saya akan coba praktekan

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

    ReplyDelete
  103. 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

Komunitas Blog Dofollow Indonesia Komunitas Blog Dofollow Indonesia

Popular Posts

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