Drop Down Menus

Monday, July 19, 2010

CARA MENGEDIT TOP MENU PADA TEMPLATE BLOGGER...

 ...Postingan ringan lagi.... yang merupakan pertanyaan dari sobat yunblogs.. " Sob klu mau edit menu di atas blog seperti home ,about,post rss ,coment rss, mohon solusinya sob ?  " ..oke setelah dua hari libur ngeblog... now here we go again... :)
...Memang belum tersedia fitur untuk mengedit top menu pada template blogger ..belum secanggih itu... tapi mungkin mbah google suatu saat nanti  akan mendukung juga fitur untuk mengubah menu top blogger...wow hehe :D .. idak seperti jika kita menggunakan drupal / joomla / mambo yg praktis hanya tinggal menginstal fitur list top menu yang bisa di ubah-ubah...

... Untuk mengedit top menu pada template blogger kita harus sedikit mengubah kode script html template blognya... jadi perhatikan caranya berikut ini :

>> Contoh I
1. Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget )...
2. Seperti biasa Copy-Paste dahulu seluruh kode HTML template widget blog kamu ke dalam Notepad dan simpan... untuk jaga-jaga...
3. Tekan Control+F lalu cari kode " <div id='menu'> " ...kalau di kode html blog saya seperti ini.. biasanya ada sedikit perbedaan dengan kode template blog kalian.. 
4. Nanti akan terlihat kode sesudah " <div id='menu'> " yang seperti contoh dibawah ini...
<div id='menu'>
   <ul>
    <li><a Title='Home' expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://id-id.facebook.com/people/Andi-Wong/1222512287'>About</a></li>
    <li><div class='gap'/></li>

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
    <li><div class='gap'/></li>
    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://www.blogger.com/'>Login</a></li>
   </ul>
  </div>

    </div>


Keterangan :
> Ubahlah nama menu yang saya warnai ungu seperti contoh diatas...
> URL yang saya warnai biru juga diubah sesuai dengan nama menu yang kamu tentukan...

5. Jika sudah lalu Simpan template & refresh blog kamu...

...Jika ingin menambah lagi menu blog tinggal copy-paste kode html top menu-nya saja seperti contoh dibawah ini :
<div id='menu'>
   <ul>
    <li><a Title='Home' expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://id-id.facebook.com/people/Andi-Wong/1222512287'>About</a></li>
    <li><div class='gap'/></li>

<li><a href='menambah menu di tengah'>Tambah Menu di tengah</a></li>
    <li><div class='gap'/></li>

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
    <li><div class='gap'/></li>
    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://www.blogger.com/'>Login</a></li>

    <li><a href='menambah menu dibawah'>Tambah Menu dibawah</a></li>

   </ul>
  </div>

ATAU....

>> Contoh II 
1. Jika kode html top menu di Contoh I berbeda dengan kode top menu di template kamu.. coba yang ini.. 
2. Tekan Control+F lalu cari kode " <div class='Menu'> " ...
3. Nanti akan terlihat kode sesudah " <div class='Menu'> " yang seperti contoh dibawah ini...
<div class='Menu'>
                <ul>
                <li><a href='/'><span>Home</span></a></li>
                <li><a href='#' title='About'><span>About</span></a>
</li>
                <li><a href='#' title='Contact'><span>Contact</span></a>
</li>
                <li><a href='#' title='Extras'><span>Extras</span></a>
</li>
                </ul>
            </div>
Keterangan :
> Ubahlah nama menu yang saya warnai ungu seperti contoh diatas...
> URL yang saya warnai biru juga diubah sesuai dengan nama menu yang kamu tentukan...

5. Jika sudah lalu Simpan template & refresh blog kamu...

...Dan jika ingin menambah lagi menu blog tinggal copy-paste kode html top menu-nya saja seperti contoh dibawah ini :
<div class='Menu'>
                <ul>
                <li><a href='/'><span>Home</span></a></li>
                <li><a href='#' title='About'><span>About</span></a>
</li>

                <li><a href='menambah menu di tengah' title='#'><span>Tambah Menu di tengah</span></a>
</li>

                 <li><a href='#' title='Contact'><span>Contact</span></a>
</li>
                <li><a href='#' title='Extras'><span>Extras</span></a>
</li>

                <li><a href='menambah menu dibawah' title='Extras'><span>Tambah Menu dibawah</span></a>
</li>

                </ul>
            </div>

...mudah bukan...

69 comments:

  1. salam sobat
    duh edit template lagi ya,,
    saya akan coba nanti, semoga tidak kesulitan.

    ReplyDelete
  2. NURA > silahkan kapan2 dicoba ya :D

    ReplyDelete
  3. memang agk susah....
    tapi klo mau tau memang hrus di coba :)

    ReplyDelete
  4. dede > kalo sering dipraktekan tutorial blognya.. walopun terkadang menambah masalah.. tpi itu malah akan membuat kita semakin mengerti & otomatis akan mencari solusi yg baik.. :)

    ReplyDelete
  5. kunjungan balik gan ;)
    salam kenal..

    ReplyDelete
  6. Blog tjah jaranan > salam kenal gan.. salam blogger ;)

    ReplyDelete
  7. Keren hib tutorial'a, like this ! *_^

    ReplyDelete
  8. bener bener mantab nih info buat blog kita...
    thnxs for info....good luck ya,...

    ReplyDelete
  9. Tongkonan > thx gan.. :)

    Mujahid Cinta > makasih.. tutor sederhana ini gan.. dibuat agar mudah dipahami.. :)

    Gieterror > baguslah kalo bermanfaat ;)

    ReplyDelete
  10. ijin di-save dulu bang untuk suatu saat diperlukan, makasih ya ...

    ReplyDelete
  11. terima kasih mas untuk tukeran linknya, Link anda udah dipasang di blog saya. mampir lagi yah.

    ReplyDelete
  12. Warna Tulisan > silahkan di save dulu johnson :)

    Ami Junior > oke.. gw mampir gan.. ;)

    ReplyDelete
  13. Brooo,.... tanya ni...!
    di blog ku dulu aku pasang daftar coment terbaru ama link disorot pelangi, dan hasilnya uda fungsi smua. tapi kenapa sekarang ko malah gak fungsi semua ya??? file js nya pun baik2 aja. mohon penjelasannya ;)

    ReplyDelete
  14. saya udah pernah nyoba gan...
    tapi kok gak bisa2 ya? terutama mu ganti yang Post RSS..
    :(
    hope google make this feature ASAP..

    ReplyDelete
  15. Cerita Dewasa > heuum... file js recent comments & lik pelangi-nya kamu simpan dimana gan.. di google site atau di server file lainnya... ?? atau kamu pake Js punyaku.. ?

    ReplyDelete
  16. ngga dikasih previewnya tah?

    ReplyDelete
  17. ijin save ya mas, aku juga penen edit2 top menu juga kapan2

    ReplyDelete
  18. Brooo, yang pelangi aku pake punya mu, tapi kalo yang comment aku pake google site punya q. dan awalnya dulu fungsi semua. tapi sekrang malah diem... hehhehe

    ReplyDelete
  19. lupa belum komen disini...
    hehehe...

    mantep nih, menu nya gak pake css...
    jadi loadingnya cepat...
    tapi sayang bos, gak bisa nambahin sub menu nya ya...

    ReplyDelete
  20. aku dah follow, follow balik brooo

    ReplyDelete
  21. wah keren juga ya bisa menyala2 gitu ,hehe aku sih cuma pake list o matic biar gampang ,hehe
    salam kenal, aku follow ya

    ReplyDelete
  22. "Nice artikel, inspiring ditunggu artikel - artikel selanjutnya, sukses selau, Tuhan memberkati anda, Trim's :)"

    ReplyDelete
  23. maaf master andi oot coment saya, saya mau tanya, kepa recent coment saya bermaslah, masak yg muncul comentar lama, komentar baru g muncul di blog saya, akhirnya sementara saya lepas dulu recent coment saya, sampai saya menemukan RC yg sesuai lagi

    ReplyDelete
  24. kayaknya sekarang blogger dah ngasih fitur untuk pages sepertii itu..

    ReplyDelete
  25. wow, artikel ny berguna bgt nih sob.. cocok bgt bwt mnmbh wawasan ku seputar tema ini..

    sob, mengingt blog ni sngt bermanfaat bgt q.. tukeran link yok!!

    link blog kamu sudah terpasang di blogku, link balik yach :) silahkan di liat di blogku!!

    ntar pasang link ku dengan anchor text "Naruto Soundtrack" yach,

    dan jdi follower q juga y, siapa thu aja dgn kehadiran blogger se-hebat kamu, blog ku bisa
    sedikit rame dan berwibawa gtu.he3

    ntar secara berkala q bakal sering-2 silaturahmi kesini..

    d tunggu kehdirannya yach :D

    salam dari blogger indonesia setengah bule.he3

    makasih..

    ReplyDelete
  26. anyindia > kan udah ad itu preview-nya diatas ..di tutor.. walopun bukan preview contoh asli sih.. bisa kamu coba di blog alternatif kamu anyindia.. :)

    mixedfresh > oke.. silahkan saja :D

    Cerita Dewasa > waaah... itu pasti ada beberapa kode script yg hilang/kurang jadinya malah error..

    atau bisa juga karena disebabkan widget lainnya shingga widget RC & pelangimu jd error..

    Coba dihapus dulu Script RC & Pelanginya.. lalu mulai lagi instal RC dulu.. trus dilihat berfungsi gak ?..baru instal link pelangi..

    dan coba kamu ingat2 widget apa yg bru kamu instal yg bikin widget sebelumnya baik menjadi error...

    krn contohnya diblogku saja.. widget Smiley komentar jd error gara2 widget follow google punyaku.. smiley-komentarnya jd gk muncul.. dan malah bikin lemot.. kekekek :D

    sentraBLOG > heuum.. sub menu ya ? waah kayaknya PR lagi ini.. hehe :)


    Cerita Dewasa > kayaknya udah gw FOLLOW gan.. :) ..ntar wa cek lagi..

    septian > oke.. thx.. ntar wa follow balik :)

    Yohan Wibisono > trims gan.. :)

    Rizky2009 > oww..begitu.. mungkin terletak di script js-nya Riz..coba dicek pake notepad.. trus bandingkan dg script js RC-mu yg asli alias yg belum diubah2.. :)

    toko batik online > udah adaa yaa??? :D

    Naruto Soundtrack > oke...SIIIP.. TUKER LINK & TUKER FOLLOW gan.. SALAM BLOGGER INDONESIA.. ;)

    ReplyDelete
  27. thanks sob, link kamu juga sudah q pasang di blog q.. dgn anchor text "Sharing Knowledge"..

    mksih sdh berkunjung, btw.. blog ny apik tenan.. full animasi.. really excited :D

    ReplyDelete
  28. makasih postingannya ntar sy coba dulu ok.

    ReplyDelete
  29. thya > hehe.. silahkan dicoba.. ;)

    Naruto Soundtrack > oke.. siiip dech... Link mu jg sdh gw pasang dan telah wa Follow jg.. :)

    pasang iklan gratis > oke.. ;)

    Ganden > siiiip.... :D

    ReplyDelete
  30. This comment has been removed by a blog administrator.

    ReplyDelete
  31. sob, gimana yah cara bkin blog full animasi kyk kmu.. q ngeliat ny gak bosen loh, mgkn sm dg sobat blogger yg lain.. brp lm kmu men-design blog ini secara keselurhan hingga jadiny kyk gni??

    ReplyDelete
  32. Naruto Soundtrack > oww.. yg saya lakukan adalah :

    1. Mencari template blog yang sesuai (ini sgt penting.. dan ini yg lama.. template itu faktor utama )..
    2. Menginstal Widget yang fantastis tapi gk memberatkan..
    3. Menginstal Link Pelangi.. mengubah Ukuran Text Font.. dua2nya utk MouseOver..
    4. Membuat tampilan smiley Cbox lebih hidup..
    5. DLL...

    ... Sebetulnya sudah saya Postingkan semua Cara2 yang saya terapkan di blog ini.. tinggal sahabat2 blogger lainnya saja yang mau mencobanya atau tidak ?.. :)

    akan tetapi semuanya itu saya lakukan tidak secara instan... ada beberapa tahapan dulu.. seperti analisa template/ widget / JS yg saya instal... kalo bagus..ya saya pertahankan...

    ...begitulah kira2 secara garis besarnya gan..

    ReplyDelete
  33. semakin hebat aja nih master andi wong, sukses sll buat master

    ReplyDelete
  34. Rizky2009 > makasih riz.. bisa aj kamu mujinya.. hehe.. sukses slalu jg bwt kamu Riz.. :)

    ReplyDelete
  35. kk kayak mana sih gak ngerti ribet banget !!!

    ReplyDelete
  36. @dunia_rizkyQ:

    :) ..bingung pada bagian yg mana sob.. pahami sj dulu pelan2.. jgn terburu2

    ReplyDelete
  37. mantaaaaaaaab banget infonya
    terima kasih

    ReplyDelete
  38. apa sdh dicoba ?.. berhasil kagak fahrur.. :)

    ReplyDelete
  39. wah thnks tutorialnya.....
    maklum masih newbe :D

    ReplyDelete
  40. @yuliaslovic:

    yups.. silahkan dipelajari gan.. ntar lama2 kamu master jg .. ;)

    ReplyDelete
  41. makasih atas tipsnya..
    dahsayat.. aku abis praktein
    kalo buat percantik komen caranya gimana

    ReplyDelete
  42. aku cari-cari kok gak ada ya??

    ReplyDelete
  43. Thanks atas info tutorialnya....akan segera dicoba

    ReplyDelete
  44. BOS SAYA IZIN NDELESEP PINGIN NGRESEP ILMUNE........BOS.... SAYA SANGAT BINGUNG SEKALI.... KARENA SAYA TIDAK SEDIKITPUN MENGERTI HTML..... BOLEHKAN BOS>>>> SAYA BELAJAR DISINI........ :(

    ReplyDelete
  45. kang, cara nambahin kayak profile FB gitu di blog klasik gimana,mohon pencerahannya.. :D :D

    ReplyDelete
  46. Wah, sangat bermanfaat sekali brade, tukeran link dong, boleh kan :), oh iya, selanjutnya, setika saya mau menulis disetiap sub2 menu itu gimana cara masukinnya brade, mungkin bisa dipahami, contohnya: ketika saya buat menu bisnis, nah sub menunya ada ikan, ayam dll, tentunya saya harus menulis ditempat yang sesuai dengan judulnya, nah, jika para pengunjung ingin mengklik setiap judul, maka akan terbuka di tab yang baru, tolong dong pencerahannya brade. :)

    ReplyDelete
  47. maaf ni saya pemain baru dalam hal membuat blog. banyak sekali yang harus saya ketehui karena blog saya jauh dari sempurna, mohon informasi / di ajarkan.....

    ReplyDelete
  48. artikelnya bagus bang saya termasuk newbie di sini makasih petunjuknya bang dijamin saya akn sering berkunjung

    ReplyDelete
  49. Terima kasih atas ilmu dan infonya. ini sangat membatu sekali bagi saya....

    ReplyDelete
  50. tak coba dulu ya sob, dulu pernah nyoba tp gagal gara2 mau nambah jumlah menu nya jd eror, nah ini ada panduan buat nambah menunya thanks info nya ya

    ReplyDelete
  51. kok habis ak sign in ke blog ga ada tulisan rancangannya yaa,,, jadi susah mau edit htmlnya,,,

    ReplyDelete
    Replies
    1. itu templatenya ga bisa di edit saya juga pernah pakai template yg ga bisa di edit2 lagi

      Delete
  52. mantap artikelnya salam kenal semua
    http://rentalmobilmakassar.blogspot.com/

    ReplyDelete
  53. wah thanks infonya saya mau tanya cara menggeser baris menunya ke tengah bagai mana yah gan ? www.photocrott.blogspot.com

    ReplyDelete
  54. Selamat malam gan, maksih dah share tenta ca di atas, langsung bisa ane praktekin di blog ane gan, www.rangga atmajaya.com dan ternyata berhasil. makasih banyak, dan ane udah follow blog ente gan, jangan lupa di follow back, kita sebagai blogger indonesia yang jujur, makasih sekali lagi.

    ReplyDelete
  55. Mksh info'x gan sangat membantu sekali..

    ReplyDelete
  56. gan qw dulu download template trus saya pasang
    qw lht htmlx g ada gan gmn itu

    ReplyDelete
  57. eh?...apanya yg kagak ada gan, kodenya atau apa...kalau tutorial diatas memang untuk template blogcepot yang lawas...

    untuk template blogcepot yang model baru, sdh beda lagi...

    ReplyDelete
  58. kalau mau menulis isi menubar nya masih di icon pages ya?

    ReplyDelete
  59. Replies
    1. iye om, setidaknya mengerti sedikit ttg code html :)

      Delete
  60. thanks banget infonya gan kunjungi juga blog saya sharingbubbler.blogspot.com

    ReplyDelete
  61. Bagus ...Kunjungi http://arieenamikaze.blogspot.com/#

    ReplyDelete

Berkomentarlah dengan sopan dan jangan membuat spam...

Previous Next Home