Sunday, September 5, 2010

Dasar Membuat Top Menu Keluar Balon Dengan CSS3


Selamat Siank Sahabat DJ Site Semua,

Akhirnya beres Juga Ng'Cat 'N Menuhin ReQuest Di Blog Sejarah haha....Wah lagi pada nikmatin Liburan Nie kayanya hhe.... sama klo gtu saya juga lagi mau Refreshing hari ini, jadi kayanya untuk hari ini saya belum bisa Blogwalking dulu. tapi besok semua kunjungan anda pasti saya balas hhe... Pokoknya hari ini saya mau bener-bener bebas dulu haha... Maklum tiap hari ng'liat PC ketemu sama Corel, Flash, Indesign hadooh lama-lama jenuh juga, dan sekali-kali saya pengen refreshing Ng'gambar pake Kertas aja lah ga ketemu PC dulu sekalian Maen Skate haha...

Okeh, hari ini saya mau ngasih Dasar pembuatan Top Menu keluar Balon Dengan CSS3. Halah judulnya aneh banget toh? wes biarin yang penting kan ngerti maksud saya haha... Klo mau tau nama aslinya tanyakan aja sama Web Designer soalnya saya juga gak tau nama aslinya apaan haha... tapi klo gak salah namanya Bubble Menu. Sekali lagi saya Tegaskan Ini hanya Dasarnya jadi pengembangan 100% ada ditangan anda OK ...

Bentuknya kaya Gambar Diatas, atau klo mau lebih jelas silahkan Kunjungi Blog Sejarah Saya Klik DISINI. Dan lihat apa yang terjadi klo anda meletakkan Kursor anda di Top menu tersebut.

Nah, terus cara buatnya gimana? Very Simple

1. Login dengan akun Blogger anda masing-masing(jangan pake Punya orang ya haha)
2. Sampai di Dasbor Pilih Rancangan atau Design
3. masuk ke Edit HTML(centang Expand Template Widget-nya)
4. Biar aman Save Dulu deh mendingan templatenya(takutnya anda gak percaya sama saya wkwkw)
5. Cari Kode

]]></b:skin>


6. Klo udah ketemu, Masukkan Script dibawah ini tepat diatas Kode Tersebut



7. Klo Udah Save template anda, dan kita lakukan pemanggilan dan Ini dia Script untuk Manggilnya:

<ul id="bubblemenu"> <li><br />
<a href="Url Blog 1" target="_blank">Judul 1</a><br />
<div> Keterangan Judul 1<br />
</div><br />
</li>
<li><br />

<a href="Url Blog 2" target="_blank">Judul 2</a><br />
<div>Keterangan Judul 2<br />
</div> </li>
<li><br />
<a href="Url Blog 3" target="_blank">Judul 3</a><br />
<div>Keterangan Judul 3<br />

</div> </li>
<li><br />
<a href="Url Blog 4" target="_blank">Judul 4</a> <br />
<div> Keterangan judul 4<br />
</div> </li>
</ul>

Nah, terus itu ditaruhnya dimana? Terserah anda, bisa anda masukkan di Gadget --> HTML/JavaScript atau klo saran saya langsung anda gabungkan dengan Edit HTML anda Dan silahkan kembangkan Sendiri soalnya kan saya cuma ngasih Dasarnya hhe.

Warning: Jika anda masukkan di Gadget --> HTML/JavaScript Maka hanya akan berbentuk Link Biasa karena Hover tidak berpengaruh, untuk itu sebaiknya sesuaikan dengan Top Menu anda yang sebelumnya, jadi akan terlihat seperti Menu anda yang sebelumnya + balon itu tadi haha...

* Yang saya beri warna Merah silahkan Ganti dengan Url yang ingi diletakkan
* Yang saya beri warna Biru Silahkan Ganti Dengan Judul
* Yang saya beri warna Hijau ganti Dengan keterangan yang nantinya akan Muncul di Dalam balon

Udahan dulu ya, saya mau Refreshing ke Skatepark dulu......

Untuk Sahabat DJ Site Semua Happy Blogging 'N Happy Sunday.......

28 comments:

  1. wah...boleh juga ni...
    bisa d'coba.
    semoga j berhasil,,hehee...

    good post.

    ReplyDelete
  2. hwaaaaaaaaaaaaaa,,,,,aku gak ngerti yang kaya gini.....

    ReplyDelete
  3. OH kayak gini yah caranya buatnya sob,,, oya sob maw tanya nih, kalau cara pasang gambar di header blog gimana caranya yah.... alh blog saya headernya polos, maw di kasi gambar gitu biar keren dan ciri khan blog saya....

    ReplyDelete
  4. waduh lagi males edit html...tapi boleh juga tuh...
    dibawah udah ada warningnya lagi...duh...

    ReplyDelete
  5. sip...makin lengkap artikelnya.
    berani coba gak ya?

    ReplyDelete
  6. Wah si brader sudah mulai tertarik sama CSS3 ni hahahahaha...mangstap . Dengan Menu CSS3 ini tampilan blog akan lebih menarik tentunya......D simpan dulu brader. Lanjut teruz.

    ReplyDelete
  7. wah..keren fer...tar kapan2 dicobain deh heheh...thanks yeee...aku mo ke sejarah bangsa dulu hehehe..

    ReplyDelete
  8. wah keren sih tapi aku nggak ada menu horizontalnya sih =D

    apa kabar kak? lama tak bersua? hahaha...

    ReplyDelete
  9. tak ngintip dulu.. mbreeemm..
    mudeng, mirip kayak tul tips yak?

    search di amrik masih jarang yg nyediain t- html5 buat blogger,
    kalo gitu mendingan pak dj bikin dj-template html5 + css3
    *entar ane tinggal ngedit matengannya *
    lha kalo dari depan bikin,a ne
    mending pake tmp klasik ndeso saja

    ReplyDelete
  10. wah dolanan css3 gede-gede mantep liatnya,
    tak tungggu dj-template for blogger sampe habis lebaran.. wkwkwk

    ReplyDelete
  11. waaah, kayaknya yg admin dj-site ini punya banyak blog nih.. he

    ReplyDelete
  12. Weleh-weleh dapat tips lagi dari sobat DJ-Site. Okelah aku kumpulin aja semua, nanti kalo ada waktu luang bisa buat otak-atik blogku yang berular-ular hahaha...

    Met berlibur kawan....

    ReplyDelete
  13. Waduw..sepertinya saya hanya bisa melongo aja ni bro, hehehe...
    Gak pake Blogspot sih :D

    ReplyDelete
  14. seperti drop down hanya dia ke atas..opacity kayanya bagus di kasih .7 sob jadi dia agak nembus gitu..border radius juga keren kalu bisa bulat..ini aja udah mantep banget..lanjut!!!

    ReplyDelete
  15. wow...hebat ini adalah salah satu trik menarik untuk membuat tampilan blog menjadi lebih asik hehe..saya coba dl dech sob
    Sukses Slalu!

    ReplyDelete
  16. weaah mateb kang, barusan nyolong 2 kolom sekarang ada menu bisa keluar balon hehee tak colong tanpa ijin, suwuuun

    ReplyDelete
  17. nanya nih Fer, kaLo tutor ini untuk diapLikasikan untuk "menu bLog" kayak di sidebar bLog saya bisa enggak?.
    info: kemarin beLiau terpancing untuk nembak saya, Langsung sambiL ngundurin diri jadi foLLower. hakhakhak...

    ReplyDelete
  18. Siipp bro.. tapi kok agak mbulet yaa *pusing*

    ReplyDelete
  19. boleh nih. di catat dulu mungkin sewaktu-waktu butuh

    ReplyDelete
  20. @ niesa: silahkan dicoba Niesa hhe..

    @ Ka Damar: klo itu sesuai selera Sob hhe..

    @ riesta : kan aku ng'bahasnya gampang tuh hhe..

    @ Asis Sugianto: iya Sob... klo Header tergantung Sob... bisa langsung masukkin dari Edit HTMLnya atau bisa juga pake Gadget soalnya ada beberapa yg pake gadget tinggal disesuain sama Keterangan Headernya aja...

    @ narti : haha.. cuma buat Peringatan aja koQ..

    @ sda: Ehm.. terserah klo itu sih hhe..

    @ cHugy - gOgOg: iya Sob.. agak suka aja haha... Siip..

    @ windflowers: sama2... silahkan hhe..

    @ Nuy : Bikin pake Add gadget juga hasilnya sama koQ Nuy.... baik koQ.. Nuy gmn?

    @ anak smp on : ya emank masih jarang yg nyediain HTML 5 Pak haha.... klo wes ada ngapain aku bikin hha.......mending comot langsung aha....aku masih sisa 1 template tapi gak ada Top menunya haha..

    @ simple tips: halah... Wokeh Pak..

    @ takuya: hahaa... gak juga sih...

    @ Muza elbanaf : Siap.. silahkan dikumpulin dlu hhe.. Net liburan juga..

    @ rafli pratama : haha.. aman Sob.. templatenya SAve dlu ko takut salah hhe..

    @ attayaya jadi anak smp: walah nemu haha..

    @ Zippy : oiya aku lupa Sobat udah migrasi ke WP ya hhe...

    @ blogger admin : haha.. tau aja Sob.. haha... iya sih cuma aku agak kurang suka klo bulat jadi dibikin kotak haha...lanjutkan juga Brader....

    @ Bunglon Blog Indonesia: silahkan Sob.. sama2..

    @ suwune: haha. silahkan dicolong wkwkw..

    @ Eka Ninjitsu : silahkan..

    @ om rame: Bisa Om.. Tutor udah ada.... wah terpancing toh dia Om hha..

    @ tomo: nggeh pahami disik Cak..

    @ uswah: thnx 4 visit..

    @ Anggi Zahriyan: haha.. klo udah praktek baru mumet'e hilang Sob hha..

    @ bagaimana PR turun: Silahkan Sob...

    ReplyDelete
  21. astaga
    kupikir tadi balon untuk ultah
    hehehehe

    ReplyDelete
  22. Aq datang berkunjung untuk mengucap kan minal aidin wal faidzin,mohon maaf lahir & batin. Terima kasih selama ini sobat tlah sudi meluang kan waktu untuk mengunjungi blog khusus buat pemula dan memberi kerja sama yang baik.

    ReplyDelete