Monday, July 19, 2010

Mengedit Top Menu Pada Template

Materi kali ini merupakan pembahasan dari pertanyaan dari sobat blogger yunblogs.. " Sob klu mau edit menu di atas blog seperti home ,about,post rss ,coment rss, mohon solusinya sob ?  "

Memang belum tersedia fitur untuk mengedit top menu pada template blogger, tapi mungkin nanti akan ada fitur untuk mengubah menu top blogger, seperti jika kita menggunakan drupal / joomla / mambo yg praktis hanya tinggal menginstal fitur list top menu yang bisa di ubah-ubah.


Cara Pertama.

1. Login ke blogger > rancangan > edit html > edit template, centang expand template widget.

2. Backup. Copas dahulu seluruh kode html template ke dalam Notepad dan simpan.

3. Ctrl F lalu cari kode "<div id='menu'>", kalau di 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>

Ket.
1) Ubahlah nama menu yang saya warnai ungu seperti contoh diatas...
2) URL yang saya warnai biru juga diubah sesuai dengan nama menu yang kamu tentukan...

5. Simpan template & reload blog.


Jika ingin menambah lagi menu blog tinggal copas kode html top menunya 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>


Cara Kedua

1. Jika kode html top menu di Contoh I berbeda dengan kode top menu di template kamu, coba yang ini.

2. Ctrl F lalu cari kode "<div class='Menu'>".

3. Nanti akan ada kode sesudah "<div class='Menu'>" 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>
Ket.
1) Ubah nama menu yang diwarnai ungu.
2) Url yang diwarnai biru juga diubah, sesuaikan saja.

5. Simpan template & reload blog.


Jika ingin menambah lagi menu blog tinggal copas kode html top menunya 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>


Selamat Mencoba.


71 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. ijin save ya mas, aku juga penen edit2 top menu juga kapan2

    ReplyDelete
  17. 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
  18. 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
  19. aku dah follow, follow balik brooo

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

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

    ReplyDelete
  22. 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
  23. kayaknya sekarang blogger dah ngasih fitur untuk pages sepertii itu..

    ReplyDelete
  24. 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
  25. 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
  26. 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
  27. makasih postingannya ntar sy coba dulu ok.

    ReplyDelete
  28. 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
  29. This comment has been removed by a blog administrator.

    ReplyDelete
  30. 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
  31. 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
  32. semakin hebat aja nih master andi wong, sukses sll buat master

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

    ReplyDelete
  34. @dunia_rizkyQ:

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

    ReplyDelete
  35. mantaaaaaaaab banget infonya
    terima kasih

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

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

    ReplyDelete
  38. @yuliaslovic:

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

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

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

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

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

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

    ReplyDelete
  44. 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
  45. 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
  46. artikelnya bagus bang saya termasuk newbie di sini makasih petunjuknya bang dijamin saya akn sering berkunjung

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

    ReplyDelete
  48. 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
  49. 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
  50. mantap artikelnya salam kenal semua
    http://rentalmobilmakassar.blogspot.com/

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

    ReplyDelete
  52. 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
  53. Mksh info'x gan sangat membantu sekali..

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

    ReplyDelete
  55. 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
  56. kalau mau menulis isi menubar nya masih di icon pages ya?

    ReplyDelete
  57. pusing juga ya kalo ngak paham

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

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

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

    ReplyDelete
  60. wah keren , makasih infonya mas

    ReplyDelete
  61. thanks tipsnya gan jadi blog http://buka-tips.blogspot.com/ saya jadi rapi :D hehe

    ReplyDelete
N.B.
1. Berkomentarlah dengan sopan.
2. Dilarang membuat spam, terutama yang mengandung SARA/ Pornografi/ Judi dan Iklan.