PLEASE DISABLE YOUR ADBLOCK OR DNS BLOCKED FOR SUPPORT THIS SITE!

Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

Horizontal Menu Navigasi

Yang sering berkujung ke blog om pasti sudah tidak asing dengan horizonal menu navigasi. Nah tutor kali ini kita mencoba membuat menu navigasi yang sebenarnya meminjam salah satu widget dari bawaan standar blogger. Dengan sedikit sentuhan pada CSS, widget Linklist yang semula banyak digunakan sebagai blogroll secara vertikal akan kita modifikasi menjadi menu navigasi secara horizontal. Ya sudah, dari pada om cuap2 gak jelas langsung ke cara pembuatan aja ya :)



Pertama masuk halaman Edit HTML, kemudian copi-paste semua kode CSS dibawah ini lalu letakan diatas kode ]]></b:skin>


/*-- (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}


Masih pada halaman Edit HTML kemudian cari kode  <div id='outer-wrapper'><div id='wrap2'> biasanya kode ini terletak di bawah html tag <body> kemudian copi-paste semua kode dibawah ini, dan letakan kodenya dibawah kode warna hijau diatas.


<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>


Silahkan disimpan dan lihat hasilnya. oh hampir lupa..rekan bisa menyesuaikan warna latar dan textnya sendiri ya :)

 

Untuk menambah menu, silahkan buka kembali "Elemen Halaman" kemudian perhatikan widget paling atas, disitu sudah terlihat witget baru dengan title "Top Tabs" silahkan klik edit dan tambahkan menu yang ingin ditampilkan. Selamat Mencoba :)


288 komentar:

  1. ini nih tutorial yang lagi dicari, thank's ya om
    praktek dulu deh, ntar klu ada yang gak ngerti tanya ama om ya...

    BalasHapus
  2. wah langsung dipraktekin nih,,, soalnya blon ada horizontal menunya :D

    BalasHapus
  3. Anonim23/7/08

    hallo oom, makin oke aja nich postingannya :)
    oya oom, apa kabar disana? salam ya buat mba lulu..sukses ya oom
    you best friend :)

    BalasHapus
  4. Anonim23/7/08

    @Project & Highcuriosity : silahkan langsung di praktekan :)

    BalasHapus
  5. Anonim23/7/08

    @yus : hallooooo yus, apa kabar sahabat..sudah lama nih gak ketemu, gimana nih kabarnya lombok?

    BalasHapus
  6. om..., ada pesan error kayak gini
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "form" must be terminated by the matching end-tag "".

    BalasHapus
  7. Anonim23/7/08

    Oke deh Om... seperti biasa langsung praktek, gak pake lama :D

    BalasHapus
  8. Anonim23/7/08

    Oke deh Om... seperti biasa langsung praktek, gak pake lama :D

    BalasHapus
  9. Anonim23/7/08

    @Project : oh iya ada kode yang kurang lupa om masukin :D silahkan dicoba lagi.

    @feri : ayuuu langsung dicoba feri :)

    BalasHapus
  10. Anonim23/7/08

    sip, ok banget om :)

    BalasHapus
  11. hihihi...bersatu kita teguh bercerai kita runtuh ...hidup ngeblog, thanks suhu...cool tutorial
    :D

    BalasHapus
  12. Anonim23/7/08

    hallo... kereeen22 content di blog ini... saluut2... kenalan dong.. hehe. salam kenal dari tux...

    BalasHapus
  13. wah,, kok ada yang beda codenya :-/ search nya tetep harus dimasukin ya om?

    BalasHapus
  14. tq bgt om, tipsnya bisa lgsg dipraktekin nih,
    btw om, om tau ga cara bikin welcome screen buat blogger, kalo tau tolong post ya om..

    BalasHapus
  15. om, waktu masukin link untuk home kok hasilnya jadi dua home ya om?

    BalasHapus
  16. Anonim23/7/08

    weh keren, lama gak mampir skali mampir langsung tersepona, eh terpesona, emang om jago coding.,.

    BalasHapus
  17. sipp om..selalu ada saja yang baru..om pesan nih lain kali minta tutor supaya kita sebagai pemilik blog kasih koment bisa berwarna gitu gimana om?? ditunggu ya om tutor itu nya :)

    BalasHapus
  18. Anonim23/7/08

    para pengguna Blogspot makin dimanjakan neh sama OM dengan tutor2nya.. hee

    BalasHapus
  19. Anonim23/7/08

    nice psting, emang deh o-om.. layak di calonkan sebagai bapak blogger indonesia.. ;)

    BalasHapus
  20. om emang sip deh, semua potingan om bermutu dan berguna. salut..

    BalasHapus
  21. Anonim23/7/08

    @rohman & iwan: thanks juga buat suhu berdua :)

    @Tux World : salam kenal juga :)

    @Highcuriosity : kalo gak mau pasang bisa di hapus aja kode searchnya

    @IrShandy : yup kalo sempat ta om post caranya :)

    @Project : coba dihapus dulu yang salah satu home nya

    @Fachia : hehehehe semoga sukses aja sobat..wisuda dan menikah bahagia :D

    @Tony : caranya udah pernah om post mas toni. di search aja :)

    @mymoen dan Stevanus: thanks ya :)

    BalasHapus
  22. Anonim23/7/08

    Emm,.. Kalo namanya Top Tab, berarti templateku ga usah di otak-otik lagi donk hehe.. Udah bawaannya begitu sich. Ayoo siapa yang mauu???

    BalasHapus
  23. Anonim23/7/08

    coba buat blog ku ah
    thank om

    BalasHapus
  24. wah...ga bisa jalan om di di template ku...padahal pake empletenya py oom 8-}...muncul pesan"Lebih dari satu bagian ditemukan dengan id: header-tabs. ID Bagian haruslah unik."

    knp ya om kira2.....
    thx

    BalasHapus
  25. mantap gan, lanjut

    BalasHapus
  26. Anonim24/7/08

    wadaw... ini tutor mantab sangadh om... seeep ;)

    BalasHapus
  27. Tanya donk om? Kemaren kan baru aja praktek in cara membuat recent post dari feed. Lalu gimana ya om, bikin recent post nya lebih dari 5 post. . ?

    BalasHapus
  28. Anonim24/7/08

    sip infonya om..;))

    BalasHapus
  29. Anonim24/7/08

    Ah biasa aja bos tutor gini mah cuma untuk pemula doang *kabur*

    BalasHapus
  30. Anonim24/7/08

    makase om

    BalasHapus
  31. Anonim24/7/08

    Tutorial yang dinantikan om :) Jadi ketinggalan lagi deh :)

    BalasHapus
  32. Anonim24/7/08

    Emang ni si Om juara, codingnya Blogger dibuat kelepek-kelepek :)) Btw, saya masih newbie nih, boleh tanya gak Om tentang coding-nya itu.
    1)Moz-radius itu bwt rounded ya? Tapi kok cuma bisa di Mozilla? Kalo di IE gimana caranya?
    2)Onfocus itu buat m'hilangkan default value saat di-klik ya?

    O ya Oom, buatin tutorial mengenai cara buat rounded corner sama shadowed corner donk, pasti banyak yang seneng tuh.

    OK, sukses bwt Oom :-*

    BalasHapus
  33. hehe,,, mantaps om,,hehe,,, jadi nambah ilmu nih ,,,kekek,, tar ah di terapin pada template2 yang mau saya bikin,,hehe,,tapi klo mo bikin agar elemen2 nya ga tumpang tindih gmn yah om? kan di tempalte bikinan om yang elegan style itu header sama navigasi nya tumpang tindih hehe,,, (klo saya alternatif nya yah bikin nav nya langsung terintegrasi di html hehe...)

    BalasHapus
  34. o iya om ada aygn lupa hehe,,

    minta tutorial yang biar tulisan

    "Dengan memasukan alamat email dibawah ini berarti anda akan mendapat kiriman artikel terbaru dari o-om.com di inbox anda:"

    agar ada di semua post gmn yah? hampir sama kan ama tutorial ini. tapi kode2 nya gatau.

    soalnya klo dimasukan di template posting kan hanya untuk artikel2 yang baru, ayng lama ga ngikut hehe,,, thanx (maab selalu merepotkan)

    BalasHapus
  35. Anonim24/7/08

    ini nieh yang kemarin tak cari2 akhirNa dibuatin juga (**PD**) :D. om klo penempatan searcNa di tab yg hitam dibawah image seperti blogQ gmana.. kmarin saya kirim email, belum dibalas..

    BalasHapus
  36. Anonim24/7/08

    tereneretenreret~

    numpang lewat aja.. :))

    pa kabar kk? ^^

    BalasHapus
  37. saya cuma mau bilang ... OK's bgt :D

    BalasHapus
  38. Anonim24/7/08

    Weh... pengen belajar neh sama oom neh.. *tapi belajar yang laen ajah*

    BalasHapus
  39. Anonim24/7/08

    Kyaaaa, saya coba-coba munculin di tempat lain koq gak bisa ya, Om? Kalo Om kan ngajarin di atas header, lha saya pengen masang di bawah header, tapi masih belum bisa. Mudah-mudahan kelar sebelum Magrib. hehehe, dasar sayanya oon. :D

    BalasHapus
  40. Anonim24/7/08

    wahhh oom ini dalam melakukan sebuah penemuan2 semua berhasil dengan baik dan merupakan informasi yang sangat dibutuhkan oleh para blogger indonesia oom

    Sukses untuk oom
    dan selalu berkarya oom

    BalasHapus
  41. Anonim24/7/08

    akhirnya dimunculin juga nih OM, dah lama pengen bikin kayak gitu.
    eh setelah pake template baru ternyata ada bawaan templatenya. jd gak repot2 lagi.

    :D ... sukses deh buat OM. posting ini tetep dikopi dulu. thanks .

    BalasHapus
  42. Anonim24/7/08

    saya masi bingung banget sama blogspot
    tapi si om tau aja nih segala trik blogspot :D

    BalasHapus
  43. Anonim24/7/08

    Oom...postingan sampeyan selalu top.....

    salut sama sampeyan nich...

    BalasHapus
  44. makasi tutorialnya 0m.. :)
    update banget dah blognya 0m,hhe..
    btw,0m agus,,kenapa sih dipanggil o-om?apa karena emang biasa dipanggil om?hehehe..

    BalasHapus
  45. Anonim24/7/08

    wah..., ilmu baru dari sang masrter nie..., boleh dicoba kayaknya... :)

    BalasHapus
  46. Anonim24/7/08

    Langsung saya bookmark...

    BalasHapus
  47. Anonim24/7/08

    emang oom selalu terdepan...

    BalasHapus
  48. Anonim24/7/08

    Tapi masih ada masalah Mas, kalo kita pasang label di menu bermasalah di google webmaster tool-nya, disitu dikatakan tidak dibolehkan..

    BalasHapus
  49. Anonim24/7/08

    sip mau coba ah, soalnya yg punya saya nggak bisa pasang banyak, terus nggak ada search form-nya juga...

    BalasHapus
  50. Anonim25/7/08

    huwaaaa kereeen... om.. sayang saya sudah pindah.... huwaaa saya minta maaap....

    ngmung-ngumung, bisa diterapkan di wp nggak ya??

    BalasHapus
  51. Anonim25/7/08

    wah bener, banyak banget ilmunya, thank u om, salam kenal...

    BalasHapus
  52. Anonim25/7/08

    Om..kok keluar komentar kayak gini yach, padahal script sebelumnya coba dihapus masih juga muncul

    Lebih dari satu bagian ditemukan dengan id: header-tabs. ID Bagian haruslah unik.

    BalasHapus
  53. Anonim25/7/08

    Mantabs kali .... cuma saya mau dilink kemana ya .. :))

    BalasHapus
  54. Anonim25/7/08

    om, salam kenal ya? saya dah coba tutorialnya tapi ga berhasil, muncul tulisan "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"
    gimana ya?
    trus klo misalnya berhasil, gimana buat halaman baru yang link dengan tombol2 navigasi?

    BalasHapus
  55. thanks tutorialnya om.... keren :D

    BalasHapus
  56. Anonim25/7/08

    Wah Baru nih om... di cobain ya...

    BalasHapus
  57. Anonim25/7/08

    boleh nih dicoba om. bener² deh tiap nyasar kesini selalu aja ada ilmu baru :)

    BalasHapus
  58. Anonim25/7/08

    tutorialnya mantap Oom.. ngomong2 om tau javascript search bar supaya tulisan 'cari artikel di sini' di atas ada efek menghilang setiap diklik...?

    BalasHapus
  59. Assalamualaikum lagi oom...adaaa saja yg terbaru yaa...TERIMA KASIH atas ilmunya...!

    Oom mo nanya nih, blog ku di (m-is.co.cc) dah pake new template-nya Elegant itu..bagus lho but aku juga ingin pasang nav bar blogspot di atasnya, bagaimana caranya ya oom...?Kalo untuk template blog yang lain caranya sama ya...? Tolong ya Oom...via emailku saja ya...(papa.dz@gmail.com)
    Sebelumnya aku ucapkan banyak-banyak terima kasih... :D :D :D

    BalasHapus
  60. Anonim25/7/08

    wiiii, akhirnya ada juga tutorial buat bikin navigasi horizontal, thx ! :D

    BalasHapus
  61. Anonim25/7/08

    @all : thanks ya buat semua komentarnya :)

    BalasHapus
  62. Anonim25/7/08

    @Ucha : itu karena defaultnya om menggunakan HTML3, coba ganti dengan HTML4 atau lainnya, ini berlaku juga dengan linklist jika ada pesan yang sama bisa di ganti dengan linklist yang belum digunakan

    @manggis : apa yang kamu maksud mengaktifkan kembali navbar defult blogger?
    kalau iya coba hapus CSS dibawah ini..

    #navbar{height:10px; visibility:hidden; display:none}

    BalasHapus
  63. Anonim25/7/08

    edun si om.. manteb pisan uyy

    BalasHapus
  64. Anonim25/7/08

    siap praktek

    BalasHapus
  65. Anonim25/7/08

    Tips yg sangat bermanfaat. Thanks ya utk tutorialnya.

    BalasHapus
  66. Anonim26/7/08

    seperti biasa, mantap om tips nya!

    BalasHapus
  67. Oom...nongol lagi nih...terima kasih yaa...navbar nya dah nongol...! ;)

    BalasHapus
  68. binun om...
    kolom URL situs baru nya diisi pake URl mana om...???

    lam knal om...!!

    BalasHapus
  69. Anonim26/7/08

    aku suka template nya, bagus om...

    BalasHapus
  70. Anonim26/7/08

    Thank's!
    O'om emang huwebat!

    BalasHapus
  71. keren euy.... dicoba ah.....

    BalasHapus
  72. Anonim26/7/08

    om mau nanya nih gimana caranya kalau kita mau ngasih elemen halaman pada bagian footer, seperti di blog ini, makasih atas infonya

    BalasHapus
  73. kok keluar ini seh om

    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

    BalasHapus
  74. Anonim27/7/08

    Koo ga bisa yaaa??? .xml nya ga bisa ke save.. Katanya blom ditutup dg baikk... knp yaahh????

    BalasHapus
  75. Anonim27/7/08

    @klik : coba diganti HTML3 denga HTML4 atau yang lain.

    @vie : pasti ada kodenya yang ketinggalan cuba di cek ulang atau copas ulang :)

    BalasHapus
  76. Anonim27/7/08

    masih belum bisa om :((

    BalasHapus
  77. Anonim28/7/08

    Ada cara yang lebih praktis lagi om, saya menemukan web yang menyediakan toot gratis untuk menghasilkan kode css dan html secara instan untuk membuat menu horizonta dan vertikal. Tool ini juga mempunyai banyak fungsi seperti untuk membuat check box, input tex, dsb.

    Salam

    BalasHapus
  78. Anonim28/7/08

    Om gimana caranya agar link menunya bisa langsung search, seperti punya om dengan hyperlink http://www.o-om.com/search/label/Tutorial%20Blogger?max-results=100

    apa lagsung copy hyperlink atau dibuat halaman tersendiri buat hasil pencarian search

    BalasHapus
  79. hoammmmmmmmmmmmm

    BalasHapus
  80. Anonim28/7/08

    Oom, Tolong bikin tutorial navigasi yang menunya bisa diexpand Dong. Pernah nyoba, tapi gagal.Tolong ya Oom, soalnya masih miskin ilmu nih.

    BalasHapus
  81. Anonim29/7/08

    Om saya mw nanya nie...saya kan pake template punya Om yang terbaru (New Launching - Blog Template For You ) Trus gmana caranya ngasi tab menu horizontalnya?? biar sama seperti punyanya om!!! ditunggu segera jawabanya..
    makasi...:)

    BalasHapus
  82. Anonim29/7/08

    @All : thanks buat semua komentarnya..maaf belum bisa balas pertanyaannya satu persatu :(

    BalasHapus
  83. salam kenal om......
    oya tutor-a udah saya coba tapi menu dan alamat-a gk muncul...(hitam) cuma ada search engine-a doank gimana ne om.??

    BalasHapus
  84. Anonim3/8/08

    oom koq punya saya malah jadi vertikal ya???

    BalasHapus
  85. Anonim3/8/08

    oom koq punya saya malah jadi vertikal ya???

    BalasHapus
  86. Anonim4/8/08

    Wah, ini yang selama ini saya cari caranya. Yes!

    BalasHapus
  87. Anonim4/8/08

    Langsung praktek!

    BalasHapus
  88. Anonim5/8/08

    Met knal o-om. eh o-om aq mo tnya: More than one section was found with id: header-tabs. Section IDs should be unique. Horisontal menunya gbsa. tu apa yh hrus dribah zz. mf aq msih nol bsar ttg blog. hee:((

    BalasHapus
  89. Anonim5/8/08

    Met knal o-om. eh o-om aq mo tnya: More than one section was found with id: header-tabs. Section IDs should be unique. Horisontal menunya gbsa. tu apa yh hrus dribah zz. mf aq msih nol bsar ttg blog. hee:((

    BalasHapus
  90. Anonim6/8/08

    saya newbie, jadi awam banget mslah utak-atik coding. pas saya praktekkan kok keluar kata2" More than one widget was found with id: LinkList1. Widget IDs should be unique" minta saran om

    BalasHapus
  91. Anonim11/8/08

    @Arif Luqman dan prasadja : coba linklist1 di ubah ke linklist2..kalo belum bisa silahkan tanya lagi :)

    BalasHapus
  92. wah om ada yang eror nih pesanya

    html 3 unique-unique gitu dech kenapa yach??

    http://directorybloggunegan.blogspot.com/

    salam kenal om dari newbies ni

    BalasHapus
  93. thankyu om... aku sudah menerapkannya di blogspotku...

    btw, 000webhostku rusak... makanya kembali ke belogsepot..

    bingung mau diisi apa, lawong postinganku yang di 000webhost ilang semua ee...

    huehuehue...

    BalasHapus
  94. Anonim14/8/08

    okee ini artikel yang sangat menarik buat gw..............

    BalasHapus
  95. Anonim22/8/08

    bener bener K E Y E N
    om dapet doa dari semua hihihihi atas smw posteng nyang bermangfaat

    BalasHapus
  96. Anonim24/8/08

    berhasil om...

    BalasHapus
  97. Anonim29/8/08

    Informasi Pendidikan, Informasi Sekolah, Informasi Kuliah, Informasi Studi, Informasi Beasiswa, Cari Artikel, Info Pendidikan, Info Sekolah, Info Kuliah, Info Studi, Info Beasiswa, Pendidikan, Sekolah, Kuliah, Studi, Informasi Beasiswa, Artikel
    KUNJUNGI : www.kliksekolah.com

    BalasHapus
  98. Anonim7/9/08

    om, kalau mau ganti warna backgroun-nya gimana ?????

    BalasHapus
  99. Anonim7/9/08

    ini dia nih tutorial yang lagi dicari, Makasihh yahhhh
    praktek dulu deh, ntar klu ada yang gak ngerti boleh dunk tanya2,,
    hehehehe
    agak dudul neyh ma yang beginian
    Semangat!!

    BalasHapus
  100. oo-m kok menu gw gk kluar ya..cuma search-a doank yang kluar.???
    kanpa ya.???

    BalasHapus
  101. Anonim11/9/08

    Salah kenal Om, koq yang muncul tabnya vertikal, kenapa ya?

    BalasHapus
  102. Thks oom. bagus tutorialnya n sangat berguna. tapiiiii, saya ga ngerti gimana nyambungin dari "top tabs" ke menu2 nya?? bingung :P

    BalasHapus
  103. Anonim12/9/08

    Maaf, mas, saya mau nanya, kalau sudah berhasil membuat menu, cara "menyambungkan" konten dgn menu tsb bgmn ? Setahu saya, misalnya kita memposting sebuah konten, lalu kita beri label, kan label itu adanya di sidebar (trmsk elemen blogger), jadi dgn mudah kita bisa mengelompokkan postingan kita tsb di label, nah kalau di menu bagaimana ? Mudah2an mas ngerti dgn maksud saya, maklum masih newbie sih :)

    BalasHapus
  104. ass...."Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type "form" must be terminated by the matching end-tag "".--ada pesan ketika saya ingin menerapkan HORIZONTAL MENU NAVIGASI..Mohon panduannya om.tq

    BalasHapus
  105. Anonim15/9/08

    @nugraha : tinggal kopy aja kode labelnya kedala menu.

    @tataplah masa depan mu : coba di cek ulang, biasanya kurang kopy paste pada kodenya.

    BalasHapus
  106. wah Om hebat yac.....tipsnya kren -kren :D loh....Om slm kenal dari aku...BTW kalo SEO itu apaan yah?

    BalasHapus
  107. Anonim17/9/08

    bagus o-om...tak coba y...makasih...:D

    BalasHapus
  108. Om, kenapa setiap saya coba, menu (Home, Arsip, Tutorial, dst) gak muncul ya? Cuman muncul Kotak menu, kotak pencarian aja. Terus ada list untuk kode warna tulisan gak om? Terima kasih. Semoga Sukses Selalu. Amin

    BalasHapus
  109. Alhamdulillah,aku udah dapat jawabannya ;)

    BalasHapus
  110. gak bisa mulu om saratnya xmlnya versi berapa

    BalasHapus
  111. Om...

    Koq gw ga bisa ya...

    muncul message ini terus

    [Lebih dari satu widget ditemukan dengan id: LinkList1. ID Widget seharusnya unik.]

    padahal gw dah ikutin persis yg bos tulis diatas...

    bisa dikirim via email aja ga bos OOM..

    BalasHapus
  112. om.. makasih buat navigasinya..
    keren..
    berhasil... walau ada kata
    [Lebih dari satu widget ditemukan dengan id: LinkList1. ID Widget seharusnya unik.]

    om... saya masih baru bgt dlm bloger...
    saya baru kelaz 2 sma..
    saya mau nanya koq adsense for contentnya gag keluar-keluar...
    ????

    BalasHapus
  113. Anonim11/10/08

    saya tetep ga bisa om..html3, html4 tetep ga bisa..linklis1 jadi 2 put tetep ga bisa..
    laporanya slalu..
    "More than one widget was found with id: HTML3. Widget IDs should be unique."
    mohon petunjuknya..

    BalasHapus
  114. Salam kenal Om...thanx buat navigasinya. it works..

    BalasHapus
  115. Anonim18/10/08

    Makasih Om hidangannya. Ijin pakai ya om?. Setelah menimbang2, ini hidangan yg pantas dipakai di blog sya. Sederhana $ ga ribet sih. Awalnya ada kesulitan tp stelah dikorek2 ktemu jga mutiaranya. HTMl saya sampai 15 jd pas diganti HTML16 baru bisa dilahap tu hidangan.Bravo :D :D

    BalasHapus
  116. Perkenalkan saya dari Lebanon
    Makasih OM dah saya coba dan berhasil nih contohnya blog punya gue :
    http://isu-terpanas.blogspot.com
    Bagi rekan2 yg masih kesulitan krn muncul pesan : "Lebih dari satu widget ditemukan dengan id: LinkList1. ID Widget seharusnya unik"
    atau
    "Lebih dari satu widget ditemukan dengan id: HTML3. ID Widget seharusnya unik"
    coba ganti angkanya dgn nilai lebih tinggi misal 4 sd 10
    krn dah saya praktekkan dan berhasil.;))

    BalasHapus
  117. Anonim8/11/08

    oom, saya dah coba buat menu pake cara ini,tp kok belum bisa, psn error nya "Lebih dari satu widget ditemukan dengan id: LinkList1. ID Widget seharusnya unik.", kenapa ya.., mohon pencerahannya. thanks b4

    BalasHapus
  118. Anonim16/11/08

    om, saya baru sekarang ngerti ( dikit ) ;))tentang navigasi horizontal yang sudah om kasih di template yang om buat dan saya juga pake templatenya. saya mau tanya gimana cara pasang halaman tempat letakin link exchange dan di pasang di navigasi horizontal ?
    Terima kasih
    ( moga moga om ngerti apa yang saya maksud );))

    BalasHapus
  119. Anonim20/11/08

    Saya sudah lama membaca tips membuat menu seperti di atas, baik dari buku maupun dari oom. Cuma yang saya belum mengerti, bagaimana caranya "menempatkan" isi dari masing2 menu ? Misalnya di blog saya ada 3 menu : download,blogroll dan ebook. Nah, jika saya punya freeware yg ingin saya tempatkan di menu download, caranya bagaimana oom ? Terima kasih sebelumnya. Oh ya, saya menggunakan template buatan oom untuk blog ini. Trim's.

    BalasHapus
  120. menurut q blog anda sngt yahuuds. Dari blog ini sya dpt beljr trik untk mengubh blog sya jdi bgs. tolog yaa komentari blog sya dan umumkan ke semuanya bgi pcnta perguruan cimande di(http://bocah-cimande.blogspot.com):D

    BalasHapus
  121. Anonim28/11/08

    ma ap om, ada ga alternative selain di bawah kode

    <div id='outer-wrapper'><div id='wrap2'> ?

    soalnya di template blogerized adsensnya mas isnaini ga ada code yg diebutin diatas :((

    BalasHapus
  122. om gimana cara pindahkan top tabs ke bawah header
    thanks ya om

    BalasHapus
  123. agar tab nya bisa ngeling ke halaman yang kita tuju gimana caranya?

    BalasHapus
  124. bos tolong saya di bantu dalam mempercntik blog kunjungi blog ku dan beri masukan. oke matur suwun!!!!ennug.blogspot.com

    BalasHapus
  125. Om ko kalo ditambain link utk home,malah jd 2.

    BalasHapus
  126. om kok gak bisa di simpan??
    muncul seperti ini
    Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
    Lebih dari satu widget ditemukan dengan id: HTML3. ID Widget seharusnya unik.

    di mana kesalahan saya??

    BalasHapus
  127. Anonim2/12/08

    Terima kasih tips nya Om, tapi kok muncul pesan ini;

    Lebih dari satu widget ditemukan dengan id: LinkList1. ID Widget seharusnya unik.

    Apanya yang salah ya OM?

    BalasHapus
  128. om sya tidak bisa bisa menampilkan horizontal di bog saya , padahal saya udah lakukan tahap demi tahap untuk mendapatkan menu tersebut .atas perhatianya sy ucapakan banyak trima kasih ,salm sukses dan ttp smagat ooommm..

    BalasHapus
  129. sory om mampir aku coba kok ngga bisa kenapa ?
    dari tegar-cheluz.blogspot.com

    BalasHapus
  130. ass....
    punten, Om..untuk pertama kalinya saya masuk bloger Om...

    saya sudah mencoba beberapa kali Css di atas tapi berkali2 juga ga mau di Save...sama kaya teman2 yg lain,,,linglist1 dan sebagainya,,,wigr harusnya unik.

    saya juga sudah mengganti HTML3 menjadi HTML4 Dan yg lain seperti Om bilang di Comment...sudah saya copy beberapa kali takut sy salah ngopy,tetap aja..:-0

    kelihatan ya NDESONYA......he he he he...:D.!!!! maaf om baru mau belajar ngeblog...
    klo ada teman2 yg tahu bantuin dunk....???

    BalasHapus
  131. Salam kenal to OOm.. thanks a lot, ini yang aku cari2.. tutorialnya berguna sekali .. dipakai nih di blogku http://investasigo.blogspot.com ( :D underconstruction )

    BalasHapus
  132. Halo..............kang OOM
    Kuq setelah saya coba g bisa?????

    BalasHapus
  133. Anonim27/12/08

    Kang O-om, sebelumnya lam kenal aja dari saya.
    Saya udah lakukan urut2-annya, dah dah muncul di blog saya.
    Selanjutnya dah saya edit menjadi 3 bagian Home, Arsip, About..
    Tapi masalahnya sekarang, bagaimana untuk mengisi bagian2 tersebut? Dan gimana caranya saat posting, bisa ditempatkan di Arsip atau di-About?
    Makasih banget ya Kang O-om bantunnya...makasih buanget jika balesannya cepat..he2..sukses selalu buat Kang O-om

    BalasHapus
  134. gimana cara ganti html3 ke html 4...bingung

    BalasHapus
  135. Anonim31/12/08

    Om tlg diliat blog saya di http://barumaning.blogspot.com.Kalo cara memindhkan menu headernya jadi keatas bgm ?TK.Tlg jwbnya di cc ke dherdiansyah@gmail.com.Minta alamat emailnya Mas.

    BalasHapus
  136. Anonim2/1/09

    thx banget o-om, sangat berguna lho bagi saya coz saya kemrin ganti template so gak ada menu diatasnya

    anyway, saya mw tukeren link sama o-om boleh gak??tolong jawab di blog saya aj, coz ntar saya langsung tw,thx

    BalasHapus
  137. biar posisinya ad dibawah header gmn om? tutorial ini udah berulang kali say utak-atik posisinya selalu diatas header, jelasin ya om!thanks

    BalasHapus
  138. Anonim4/1/09

    weleh kok aku ga bisa ya

    BalasHapus
  139. Anonim4/1/09

    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type "div" must be terminated by the matching end-tag "


    waduh masih bingung :((

    BalasHapus
  140. Anonim11/1/09

    makasih ya ommm

    BalasHapus
  141. dicobain dulu yaaa ooommm....

    BalasHapus
  142. ooom kalo mindahin kebawah header gimana yaaa?

    BalasHapus
  143. Makasih o-om tipnya ya.. moga makin ok dan bermanfaat buat kita semua..

    BalasHapus
  144. ngak bisa om ni, tp udah ada kiannya menu horizonntaku
    truseror kalu di isi linknya

    kekmana om caranya ini biar ngak eoror

    BalasHapus
  145. Tengkiyu Oom..:X :X Salam Kenal..

    BalasHapus
  146. Salam kenal...mo ty nih..kalau udah jadi menu navigasinya OOM..terus gimana caranya ngisi artikelnya.misal saya buat menu "cerita saya" untuk memposting cerita2 yang saya tulis supaya masuk ke halaman tsb gimana caranya.terimakasih atas jawabannya.

    BalasHapus
  147. om kalo buat navigasi kayak punya om gmna?
    jadi kalau salah satu menunya di klik muncul judul postingan yang berhubungan dengan menu tersebut.
    mohon bantuannya. n thankiu buat tutor yang ni.

    BalasHapus
  148. Trims om sebelumnya, but seperti kata dom, aldine dsb...
    setelah menunya dibuat untuk link ke web/blog lain mungkin no problem, but untuk browsing internal blog gmn oom???? ya mirip2 punya oom gitu, setelah di klik tutorial pada menu bar yg muncul hanya yg berkaitan dg menu tutorial doank, n tampilan sidebar maupun headernya tetap...
    trims oom

    BalasHapus
  149. Thx om infonya...^^
    :D

    BalasHapus
  150. Anonim10/2/09

    om kok aneh gara2 html3 itu jd ga bisa dibuka blognya? gmn y?

    BalasHapus
  151. kode2 nya gag ad oom gmna duntz????~x(

    BalasHapus
  152. Anonim17/2/09

    SENANG SEKALI menemukan blognya OOM nih. thanks atas petunjuknya. tolong kunjungin blog saya dong, dan minta saran dan kritik untuk perbaikannya.

    BalasHapus
  153. om tolong dong, saya dah coba tapi pas di minta konfirmasi dan simpan template malah muncul pesan TAK DAPAT DISELESAIKAN. kenapa ya

    BalasHapus
  154. Anonim18/2/09

    Makasih OM postingannya OK Banget :)

    BalasHapus
  155. mas aku da buat, tapi mas postingan yang aq kasih mau ke menu(linkx) nampak juga di halaman depan(home)x gmn tu mas??/

    BalasHapus
  156. om punyaku pake cellarheat, kalo mau taruh kode kedua gimana ya? aku cari kode yang om maksud, dibawah tag body gak ketemu tuh...!
    mungkin ada kode semisal, tapi apa ya?

    BalasHapus
  157. Om,
    saya masih newbie eui.. mohon panduannya
    saya dah coba copy paste & pas klik pratinjau keliar tulisan

    Kami tidak dapat meninjau template Anda
    Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
    Lebih dari satu widget ditemukan dengan id: HTML3. ID Widget seharusnya unik.

    oh iya Expand Template Widget harus diklik dulu gak..??

    BalasHapus
  158. Om..
    saya penasaran.. sekarang dah bisa eui.. ternyata ga bisa langsung copy paste, ada yang mesti dirubah manual yaitu HTML dan LINKLIST
    Mesti diurutin manual om
    tolong dicek ya om di www.pundiduit.blogspot.com
    thx yaaa

    BalasHapus
  159. @Ferdian Karambut
    emang bener kata kamu, aku juga bermasalah dengan 2 kode itu.
    akhirnya aku urutin juga. Intinya gunakan yang blum terpakai.
    tinggal di Find aja, masukin deh Linklist1, sampe Linklist3 udah kepake, pas masukin linklist4.. cocok deh. Sama juga dengan kode HTML1 atao berapa. Gue dapat akhir nya di HTML13.

    mudah2an ini bisa mbantu buat teman2..

    buat o'om .. makasih yah.

    BalasHapus
  160. Anonim17/3/09

    di coba duyu om

    BalasHapus
  161. Om, bisa gak menambah menu tapi berupa gambar?
    terima kasih banget tutorialnya ya om

    BalasHapus
  162. Thanx banget ya om, tapi koq munculnya diatas header ya. bisa gak dipindah ke bawah header

    BalasHapus
  163. muncul tulisan warna merah gmn donk??thnks om

    BalasHapus
  164. Gimana cara nampilin postingan beberapa di tab baru dengan daftar tab baru. Contoh :tab (Relegi) ada beberapa postingan yang kita tentukan sendiri.

    BalasHapus
  165. haloo om...
    aku newbie lagi buat blog yang ada menu horizontal dropdownya di blogspot, aku praktkin cara om diatas pada ads theme bloger template, tapi kok ga muncul ya meu2nya ?
    gimana dunk om...

    makacih,..

    BalasHapus
  166. sukses dipraktekkan, akhirnya hehe. makasi om tutorialnya.

    BalasHapus
  167. mantap banget om.... tapi aq da sedikit kendala apakah ada yang bisa bantuin saya.... muncul kata seperti ini """"Lebih dari satu widget ditemukan dengan id: HTML3. ID Widget seharusnya unik"""". apakah yang harus saya lakukan... trims sebelumnya om... sukses trus ya .... salam....

    www.gerakan-membaca.blogspot.com

    BalasHapus
  168. makasih mas buat tutorialnya
    kebetulan saya pake template buatan mas
    templatenya keren!
    two thums up for you ;)

    BalasHapus
  169. seBelumnya lam kenal.. dewi mau tanya kalau mau memuat MP3 di blog qt gmn txs..;))

    BalasHapus
  170. om,kok HTML nya udah di ganti tp tetep aja ada tulisan Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
    Lebih dari satu widget ditemukan dengan id: HTML4. ID Widget seharusnya unik.
    ??
    itu gimana?

    trima kasih om sebelumnya..

    BalasHapus
  171. o'om bagaimana jika Lebih dari satu widget ditemukan di dalam tag HTML ???

    BalasHapus
  172. o'om boleh minta alamat email tidak ... saya mau tanya tanya .. nih...

    BalasHapus
  173. keren abizzzzzzzzzzzzzz........... bossssssssss......
    ini yang gw cari dari tadi.........

    BalasHapus
  174. susah bgt!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    :(

    BalasHapus
  175. OM MINTA alamat email dunks biar bisa chat dan tanya jawab soal blog

    BalasHapus
  176. Boss oom..makasih infonya nih....udh saya terapkan dan hasilnya top markotop...tinggal ubah2 warna,text,dll...mksh oom

    BalasHapus
  177. Anonim8/5/09

    makasih buat tipsnya om...
    baru blajar bikin blog nich!!!!

    masih bingung...kalo masukin linknya gimana ya????8-}
    mau d klik d tittle manapun halaman yg keluar..slalu sama
    trus cara posting d tip halaman bagaimana???
    trimakasih sebelumnya

    BalasHapus
  178. waduh ommmm...udah aku coba tapi kok bacaan yg keluar " template anda tidak dapat di parse" kira2 begicu om...untung aku udah bac up dulu...gimana donk o-om chayang...hihihiiiii

    BalasHapus
  179. Ini keren Om. Tapi ada 2 pertanyaan :
    1. Kalau mau set ketinggian, script mana yang harus diubah ya ? Ini punyaku ketinggian : http://free-easy-download.blogspot.com/
    2. Kalau ingin mengganti kata-kata "Cari artikel di sini" bagaimana ya ?
    Thks Om !

    BalasHapus
  180. waduh....Om,,


    keren bgt smw infonya,,,


    saya anak bru blajar ngBlog ne,,


    mhon kunjunganNya ya...

    http://musicblogku.blogspot.com

    BalasHapus
  181. Muncul tulisan bgini Om.....
    "Kami tidak dapat menyimpan template Anda.
    Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
    Lebih dari satu widget ditemukan dengan id: LinkList1. ID Widget seharusnya unik."
    Gmna dunk??????

    BalasHapus
  182. om , cara ngisi ke menu about me nya gimana , aku gak ngerti nih , udah jadi , baru aku praktekan td tips di atas, tapi ngisi link nya bingung . .

    BalasHapus
  183. om, seperti biasa partamaaaxxxxxxxxx......
    langsung ke TKP ya!

    BalasHapus
  184. om..... kok nongolnya di atas header ya? apa emang gitu? kalo mau biar nongol di bawah header gimana caranya? sebelumnya thx om.

    BalasHapus
  185. Pas banget om untuk sy yg pemula...

    BalasHapus
  186. gak berhasil:p
    gak ada perubahan apapun......

    BalasHapus
  187. Mas, makasih ya kode html-nya, dah ku praktekin ke Blog-ku. salam kenal

    BalasHapus
  188. Iya om, saya setuju dengan kalimat berikut:

    "jangan permalukan diri sendiri dengan komentar spam ya".

    Habisnya terkadang masih banyak orang yang melakukan SPAM untuk mendapatkan pengunjung dan traffic lebih tinggi dari komentar... :D

    BalasHapus
  189. Wah saya sudah mencobanya, bagus! Namun saya mengalami sedikit kesulitan pada search yang mencuat keluat dari tab dan beberapa widget yang berpindah dari tempatnya. Namun saya suka setelah melakukan beberapa editing. GREAT!

    BalasHapus
  190. gw rancu sama kalimat ini
    mohon diperjelas lg

    "kemudian copi-paste semua kode dibawah ini, dan letakan kodenya dibawah kode warna hijau diatas.

    BalasHapus
  191. Anonim5/8/09

    tak lama kemudian muncul perintah seperti ini

    "Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
    Lebih dari satu widget ditemukan dengan id: LinkList1. ID Widget seharusnya unik."

    BalasHapus
  192. Udah dipraktekin om...tapi menunya ngak muncul...apa ada yang kurang ya om....thanks

    BalasHapus
  193. thank you om atas tutorialnya.biar aku paraktekin dulu om,ntar lw ada kesulitan aku minta bantuan om

    BalasHapus
  194. buaguss tutor nya thanks bangetzzz

    BalasHapus


 

Back to Top