GENERATOR CSS MENU DI BLOGGER


Setelah berkutat selama beberapa hari, akhirnya selesai juga untuk membuat Generator CSS Menu, posting ini aku buat berdasarkan analisa page blog ini yang paling banyak dikunjungi yaitu Membuat Menu di Blogger, dan berdasarkan hal tersebut akhirnya aku mencoba membuat Generator CSS Menu ini.
Memang tidak sepenuhnya sempurna, tetapi paling tidak bisa dijadikan sebagai salah satu sarana pembelajaran.
Generator CSS Menu ini untuk pengoperasiannya pun cukup mudah, tinggal disesuaikan bentuk menu stylenya apakah Vertikal atau Horisontal, kemudian disesuaikan pula warna dan efeknya, selanjutnya tinggal klik kode generate, maka akan terlihat hasil kodenya.
Penempatan di blog atau web-pun cukup mudah, untuk di blogger tinggal copy paste hasil kode generate menu ke html/script add widget yang berada dibawah header untuk menu horisontal atau di sidebar untuk menu vertikal, mo coba.... cek it dot under this teks....




GENERATOR CSS MENU

MENU STYLE
Menu Style:
KOTAK MENU
Lebar Kotak Menu: (pixels)
Border Style:
Lebar Border:
Warna Border:Pilih Warna  [Warna Lain...]
Warna Background: Pilih Warna  [Warna Lain...]
FONT MENU
Warna Font: Pilih Warna  [Warna Lain...]
Font Family:
Font Size:
Font Style/Weight: Italic Bold
EFEK MENU
Efek Warna Font: Pilih Warna  [Warna Lain...]
Efek Warna Border: Pilih Warna  [Warna Lain...]
Efek Warna Background: Pilih Warna  [Warna Lain...]
Efek Lebar Border:
LINK MENU
Ganti Nama Menu sesuai dengan keinginan anda, begitu juga dengan Link Menu, sesuaikan dengan alamat link anda, kemudian pilih option open target untuk membuka link ke jendela baru atau tetap di jendela window yang sama.
NoNama MenuLink MenuOpen Target
1
2
3
4
5


Hasil Generate Kode:

Copy dan Paste kode menu dibawah pada sidebar untuk menu Vertikal dan di bawah header untuk menu style Horisontal.

90 komentar:

  1. Anonim25 Mei 2010, 02.53.00

    mantap bro

    BalasHapus
  2. usi25069 Jul 2010, 09.43.00

    Bang, makasih banget: atas generator css menu nya, akhirnya blog saya bisa seperti blog yang lain, sedikit agak keren gitu loh...hhahhaahahha

    BalasHapus
  3. matic comunity1 Nov 2010, 20.34.00

    ka gmn caranya ngisi menunya

    BalasHapus
  4. karsono3 Nov 2010, 19.46.00

    ngisi menunya tinggal dikasih link pada link menu-nya, contoh: Nama Menu Home, Link Menu http://www.karsono.co.cc

    BalasHapus
  5. Dadang Jiwa Kusuma Watu4 Nov 2010, 13.41.00

    Mas bagaimana cara memasukkan tulisan2 ke menu home n lain2, serta cara memisahkan masukan tulisan tadi. oya makasih sebelumnya generator css menunya.

    BalasHapus
  6. karsono5 Nov 2010, 09.44.00

    kalau memasukkan tulisan... ya tetep di postingan blogger... disini cuman memasukkan link dari tulisan-tulisan tersebut... misalnya :
    1. Nama Menu Home, link menunya http://www.karsono.co.cc/... berarti link ini akan langsung menghubungkan pada halaman pertama blog ini yang berisi tulisan-tulisan atau postingan baru.
    2. misalkan nama menu berdasarkan label, kita ambil label blog ini yang berjudul Generator HTML, cara ngedapetinnya klik kanan label Generator kode HTML, kemudian pilih Copy Link Location... yang hasil copi-annya akan berbentuk link seperti ini "http://www.karsono.co.cc/search/label/Generator%20Kode%20HTML", ..nach link inilah yang dimasukkan ke kolom link menu diatas, yang nanti apabila di klik hanya akan muncul tulisan yang berlabel Generator Kode HTML.
    3. Atau misalkan menu-nya mau di link ke judul postingan... tinggal copy link judul postingan... contohnya postingan disini yang berjudul Generator CSS Menu di Blogger cara ngedapetin linknya... tinggal klik kanan judul postingan diatas, dan pilih Copy Link Location yang hasilnya http://www.karsono.co.cc/2010/04/generatur-css-menu-di-blogger.html, inilah link yang dimasukkan ke kolom Link Menu diatas... begitu...

    BalasHapus
  7. Encex14 Nov 2010, 10.24.00

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  8. Encex14 Nov 2010, 10.25.00

    Terima Kasih Banyak ya Mas karsono Thx Ilmu nya
    hehehe
    mampir gak
    www.nurfotra-budiana.co.cc

    BalasHapus
  9. Sahabat Riswanto14 Nov 2010, 23.49.00

    kalau lebih dari lima gmn bro??

    BalasHapus
  10. karsono15 Nov 2010, 09.13.00

    kalau lebih lima tinggal nambahin aja linknya, contohnya : <a href="http://linkanda.com">menu ke lima</a>

    BalasHapus
  11. Anonim15 Nov 2010, 16.56.00

    aduh maaf nih mau nanya. kalo bikin GENERATOR CSS MENU seperti itu untuk blog bagai mana ya???
    saya juga tertarik untuk memasangnya pada blog saya.
    trimakasih

    BalasHapus
  12. karsono16 Nov 2010, 09.24.00

    kalau pembuatan menu generator... aku buat dari penggabungan script color picker, script generate form dan script function display html... untuk cara pembuatannya... nanti kalau ada waktu akan aku bikin postingan... terima kasih

    BalasHapus
  13. Sandi Hidayat16 Nov 2010, 20.48.00

    tolong secepatnya di buat mas.
    terimakasih

    BalasHapus
  14. tamakiki17 Nov 2010, 15.21.00

    makasi banyak ya.............

    BalasHapus
  15. sabre25 Nov 2010, 22.00.00

    mas targetnya window sama tapi kalo dklik muncul diwindow baru.gimana biar muncul diwindow sama?
    trims

    BalasHapus
  16. karsono26 Nov 2010, 09.53.00

    Untuk window sama pada kode target="0"... ganti menjadi target="_self"... aku sedang update postingannya...

    BalasHapus
  17. Slamet WP26 Nov 2010, 15.53.00

    Matur nuwun kang..mantap..

    BalasHapus
  18. WS PAMUNGKA SIDOARJO8 Des 2010, 02.50.00

    SALAM PERSAUDARAAN...GIMANA CARA NGOPINYA MENCARI SIDEBAR ITU DI LOKASI EDIT HTML ATAU DASBOARD ATAU GADGET....

    BalasHapus
  19. Ilham CieL9 Des 2010, 16.30.00

    mas untuk ukuran sendiri tidak bisa di rubah ya?

    BalasHapus
  20. karsono9 Des 2010, 18.53.00

    Untuk ukuran bisa dirubah tapi untuk sementara harus diedit sendiri dulu kode css-nya, tergantung bagian kode ukuran yang mana.

    BalasHapus
  21. orin9011 Des 2010, 22.55.00

    baguuuuuuuuuuuuuuuuuuusss :) makasii yahh

    BalasHapus
  22. karsono23 Des 2010, 09.16.00

    coba lihat postingan MEMBUAT DAFTAR ISI DI BLOG SECARA MANUAL DAN OTOMATIS, pilih cara yang otomatis, kemudian masukkan link daftar isi yang otomatis ke dalam menu diatas.

    BalasHapus
  23. Unknown28 Des 2010, 11.07.00

    tanks infonya, sangat membantu!!!!!!!!!!!!
    www.tipsh4re.co.cc silahkan mampir

    BalasHapus
  24. karsono29 Des 2010, 11.53.00

    coba di kotak pencarian cari kata DOMAIN, nach disitu nanti akan muncul beberapa postingan mengenai penggantian domain, cobain saja mungkin bisa membantu

    BalasHapus
  25. Unknown29 Des 2010, 17.47.00

    makasih bgt generator css menunya, sangat membantu dan mudah digunakan???
    www.tipsh4re.co.cc

    BalasHapus
  26. The Great Magic4 Jan 2011, 13.38.00

    makaci mbah atas ilmunyaaaaaaaaaaaaaaa........

    BalasHapus
  27. Para Pencari Ilmu5 Jan 2011, 15.32.00

    kalo mislkan ingin memasukan 22 link atau lebih pada menu, caranya gimana ya mas,,,,
    I wait the answer,,,
    thanks in advance.

    BalasHapus
  28. Saepul Gens5 Jan 2011, 15.35.00

    Kalo mau memasukkan 2 link atau lebih mas caranya gimana,,,apa dipisah pake koma atau gimana,,,
    ditunggu ya mas.
    hatur nuhun.

    BalasHapus
  29. karsono5 Jan 2011, 16.59.00

    kalau manu nambah link lagi tinggal nambahin aja kode linknya, contohnya : <a href="http://linkanda.com">menu ke lima</a> begitu seterusnya

    BalasHapus
  30. hari blog spot12 Jan 2011, 03.50.00

    mas karsono... hasil dari kode css menu di atas ada mas, tapi kok di barengin ama kode2 template blog saya??
    kok bisa gitu mas??

    (maklum saya pendatang baru jadi blum bnyak ngerti, mohon bantuan nya ya mas)

    BalasHapus
  31. MTS ASSAMANI DOPLANG BLORA13 Jan 2011, 03.02.00

    mks ilmunya bos

    BalasHapus
  32. Hasanudin23 Jan 2011, 15.59.00

    hasil sempurna, trims....

    BalasHapus
  33. bronggogol23 Jan 2011, 22.49.00

    kang mau nanya, klo bikin menu email me kaya blog punya akang bagaimana?

    terima kasiih

    BalasHapus
  34. karsono24 Jan 2011, 15.13.00

    coba daftar di http://www.emailmeform.com/ untuk prosesnya bisa dilihat disitu

    BalasHapus
  35. mencoba hidup berkah27 Jan 2011, 17.28.00

    KALAU MAU NAMBAH ISI MENU TAPI DI TEMPAT YANG BAGAIMANA PAK? SEPERTI MENCOBA ISINYA AAT1 LAU SAYA MAU NAMBAH AAT TAPI DI TEMPAT MENU YANG SAM YAITU DI MENCOBA , JADI ISINYA ADA2?

    BalasHapus
  36. Siti Baroroh Barit28 Jan 2011, 08.02.00

    Makasih atas ilmunya teman...
    salam kenal...^___^

    BalasHapus
  37. Anonim31 Jan 2011, 01.41.00

    berhasil-berhasil hore.. hahah
    tengkyu bang...

    BalasHapus
  38. SPIN-Seputar Informasi Nasional1 Feb 2011, 13.59.00

    mas...kode yang diatas dicopy kemana...tlong infonya ya mas

    BalasHapus
  39. karsono2 Feb 2011, 15.22.00

    email diatas di copy ke page element - add gadget - html/script posisi tergantung keinginan

    BalasHapus
  40. News Blog9 Feb 2011, 09.50.00

    cantik sekali mas aku langsung pake di blog saya terimakasih dari seorang newbie

    BalasHapus
  41. Anonim11 Feb 2011, 10.44.00

    hai
    kenal kan
    saya pengunjung baru..
    boleh nanya??
    kalau boleh...
    saya tanya
    gimana caranya buat daftar isi seperti blog yang saya kunjungi ini ?

    BalasHapus
  42. Lukman13 Feb 2011, 01.44.00

    sip....blog aq dah lebih enak diliat. Thanks ats ilmunya bro moga panjang umur hehehehehe. pi klo leh nanya...gimana caranya agar postingan blog kita cuma ada di menu bar yang kita buat. maksudnya kita sendiri yang ngatur postingan mana aja yang mau kita terbikan. Maunya sih yang keliatan satu. mohon bantuan............

    BalasHapus
  43. MTsN CARIU20 Feb 2011, 02.03.00

    salam knl
    saya pengunjung baru blog ini dan saya baru pertama kali buat blog..
    saya mau tanya kalau boleh tau gimana cara buat menu seperti blog ini?
    terimakasih sebelumnya

    BalasHapus
  44. Admin Of Daily Setya News And Setya Blog23 Feb 2011, 18.08.00

    thx mas .. kunjungi blog q jga ya .. http://blogsetya.blogspot.com

    BalasHapus
  45. Duit Online23 Feb 2011, 22.22.00

    keren banget.. simple.. sangat mudah diikuti bagi orang yang masih awam soal blogging seperti saya.. terima kasih banyak bro.. kalo ada kode2 css yang lain untuk mempercantik blog kita.. tetap maju bro :)

    BalasHapus
  46. OXY ARMA27 Feb 2011, 13.39.00

    trims atas infony mas.

    BalasHapus
  47. Mart Shop Online Shop27 Feb 2011, 14.48.00

    kok blog saya gk bisa simpan kodenya ya?
    saya buat 4 menu. tapi pas mau disimpan katanya paling banyak 500 karakter. >,<

    BalasHapus
  48. karsono1 Mar 2011, 10.52.00

    @Mart Shop Online Shop : coba kasih kode hasil generator menu-nya by email

    BalasHapus
  49. الحج محمدحاليف1 Mar 2011, 23.51.00

    Thankyou

    BalasHapus
  50. Rizky Illahi5 Mar 2011, 11.18.00

    wih, makasih kang membantu banger bagi blogger newbie

    BalasHapus
  51. geusan wira16 Mar 2011, 19.28.00

    bang kan pertamakali gw gagal nahh gw bikin ke 2 kali nya nahh yang ke 2 kalinya berhasil. tapi yang gagal nya masih ada di menu. cara hapus nya gimana ya gan???

    BalasHapus
  52. Obinote17 Mar 2011, 08.32.00

    Apakah bisa nih di gabung dengan dropdown menu...???

    terima kasih sebelumnya....

    BalasHapus
  53. karsono17 Mar 2011, 11.33.00

    @geusan wira : simpan dulu kode yang berhasil di notepad atau apa... kemudian hapus kode yang ada kaitanya dengan kata menuq baik css maupun html-nya, setelah clear... simpan lagi kode yang berhasil...

    @Ahmad : Generator diatas... untuk dijadikan dropdown menu... saat ini belum ketemu... nanti kalau sudah ketemu akan disounding

    BalasHapus
  54. Evan Jansernido Ermin18 Mar 2011, 14.55.00

    bener2 bagus gan..
    thanks bgt ya..
    simple tapi hasilnya bagus..

    BalasHapus
  55. HIKMAH18 Mar 2011, 17.34.00

    Thanks Gan... Sangat mudah diterapkan...

    BalasHapus
  56. Bayu The Gembel's28 Mar 2011, 21.10.00

    mas bagaimana cara memasang tools css ini pada blog kita??tankz sbelumnya mas.salam blogger Kalimantan Barat

    BalasHapus
  57. Dox31 Mar 2011, 16.56.00

    Thx sob trik'a. berguna sekali ini.

    BalasHapus
  58. Unknown2 Apr 2011, 13.39.00

    mas mau nanya cara mebuat menu seperti home,email, arsip, itu gimana mas. sebelumnya terima kasih....

    BalasHapus
  59. the last devil12 Apr 2011, 15.08.00

    maaf mas nie lg blajar... oya mau nanya kan udah ada menunya tp pas slah satu menu di klik biar tampilannya sesuai menu gmna cra pengaturannya??? mkaasih

    BalasHapus
  60. batcavemania21 Apr 2011, 15.22.00

    Thx infonya...jd betah sharian baca2 artikelnya :)

    BalasHapus
  61. Erwiradz22 Apr 2011, 02.39.00

    klo dalam satu menu, misal menu "Musik", kita ingin merujuk banyak link postingan di menu itu, gmn caranya?..di atas kan satu menu cuma merujuk ke satu link...makasih atas ilmu bermanfaat ini

    BalasHapus
  62. Erwiradz22 Apr 2011, 05.04.00

    jadi tiap kita mengklik menu "Musik" misalnya, semua postingan yang berhubungan dgn musik muncul semua, gimana itu gan???

    BalasHapus
  63. Erwiradz22 Apr 2011, 22.57.00

    ok mungkin itu namanya label ya...bukan menu...

    BalasHapus
  64. Majelis Ahbabul MUsthofa23 Apr 2011, 01.54.00

    apa perbedaan windows sama dan baru?

    BalasHapus
  65. Erwiradz23 Apr 2011, 02.39.00

    window sama artinya waktu kita ngeklik, halaman yang dibuka tetap disitu jg, klo window baru waktu kita klik akan terbuka jendela/halaman baru

    BalasHapus
  66. Free Software26 Apr 2011, 21.25.00

    Numpang yah mas.... lagi belajar membuat kaya gitu :D

    BalasHapus
  67. iwan27 Apr 2011, 09.11.00

    mantap mas...tambahin dong...menu vertical yg bisa ditaruh di kanan/kiri (biasanya hanya kanan)....jadi ada pilihan lagi penempatan menu vertical nya mau di kanan/kiri.
    oke maju terus gan....

    BalasHapus
  68. faridpalupi29 Apr 2011, 21.19.00

    thx infox bermanfaat buatq maklum masi pemula... aq udh buat mampir dunk www.faridpalupi.co.cc

    BalasHapus
  69. Ponky Sumual7 Mei 2011, 11.38.00

    mo nanya nih gan..gmn caranya susun data2 yg sudah d susun ke dalam menu...coz setelah entry2 di terbitkan malah tersusun kebawah bukan k dalam menu...mohon bantuannya...

    BalasHapus
  70. Mela10 Mei 2011, 10.47.00

    Cara inpud filenya gmn?

    BalasHapus
  71. Anonim2 Jun 2011, 22.56.00

    makasih buaaaaaaaaanyak mas,sangat-sangat membantu saya........................

    BalasHapus
  72. Anonim9 Jun 2011, 09.11.00

    mantap gan

    BalasHapus
  73. admin11 Jun 2011, 03.55.00

    Hebat n mantap.. makasih ya, blogku jadi cakep.

    kunjungi blogku ya:
    http://anton-fredianto.blogspot.com

    BalasHapus
  74. bersediabelajar13 Jun 2011, 08.26.00

    thx bgt utk ilmunya ya, salam kenal

    BalasHapus
  75. gusmulam15 Jun 2011, 22.52.00

    Kereeeen...!!! mau belajar dong.. boleh nanya ya, kalo mau nambahin daftar menunya ada gan.. jadi bis lebih dari 5 daftar...
    Tengkyu.. *_*

    BalasHapus
  76. Unknown17 Jun 2011, 10.13.00

    terimakasih sekali ya
    anda mantap deh..

    BalasHapus
  77. iman tamnge21 Jun 2011, 04.39.00

    Asslmkm...sblmnya mksih ya.....saya baru nih mas di blogger....gini mas sayakan udah buat menu tapi ada menu yg mau saya tambahkan lagi......kira2 gimn ya caranya.....???
    mksih

    BalasHapus
  78. bayu22 Jun 2011, 13.45.00

    mas,cara ngisi menunya gimana,saya masih belum ngerti,tolong di jelasin lebih jelas lagi yah

    BalasHapus
  79. ratoart23 Jun 2011, 23.55.00

    keren nih thanks

    BalasHapus
  80. jawez28 Jun 2011, 23.56.00

    tq...saya da pandai buat...
    nie blog saya..
    http;//jawez.blogspot.com
    (under construction lg..hehehe...)

    BalasHapus
  81. Coba24 Des 2011, 23.21.00

    mas bisa jadi transperant gak warnanya ?

    BalasHapus
  82. osojisub14 Jan 2012, 10.43.00

    makasih mas tutorial nya ...semoga menelurkan inovasi lagi ..yg lebih ......

    BalasHapus
  83. Unknown10 Feb 2012, 21.11.00

    Makasih bnget mas generator cssnya sangat membantu......

    BalasHapus
  84. andi rachmat15 Mar 2012, 11.43.00

    mantap, saya mau link tapi belum tahu cara ngelink blog ini. minta isin belajar ya guru...

    BalasHapus
  85. maman19 Mar 2012, 22.26.00

    wah , apuiiiiikeeee

    BalasHapus
  86. Reza Pratama20 Mei 2012, 09.20.00

    mas,gimana caranya kalo menu itu di link ke postingan,tapi biar langsung membuka link itu,,,

    BalasHapus
  87. Unknown1 Jun 2012, 18.13.00

    maksih ya gan...
    sukses nih skrg blognya keren deh.. :D

    BalasHapus
  88. Unknown8 Jun 2012, 13.19.00

    izin masukin link ya..

    BalasHapus
  89. Yudha8 Jul 2012, 20.16.00

    Mas..misalnya menu pertama HOME..trs menu ke dua KESEHATAN..nah dalam menu KESEHATAN ada beberapa postingan misalnya KESEHTAN A, KESEHATAN B, KESEHATAN C gmn biar sub menu tsb ada dlm menu KESEHATAN,,maksih..

    BalasHapus
  90. Unknown8 Sep 2012, 19.20.00

    om...
    COPY PASTE nya dari mana ke mana???
    mhon antuan nya OM...
    salam blogger

    BalasHapus