Dasar Membuat Top Menu Keluar Balon Dengan CSS3

Blogger Serabutan 11:52 AM

Responsive Ads

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

Responsive Ads

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

Responsive Ads

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

Responsive Ads

28 comments

niesa September 5, 2010 at 1:12 PM

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

good post.

Ka Damar September 5, 2010 at 1:22 PM

mantep, tp aku yg biasa sj

Unknown September 5, 2010 at 1:27 PM

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

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

narti September 5, 2010 at 1:45 PM

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

sda September 5, 2010 at 1:49 PM

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

cHugy - gOgOg September 5, 2010 at 1:58 PM

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.

windflowers September 5, 2010 at 2:17 PM

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

Nuy September 5, 2010 at 2:51 PM

wah keren sih tapi aku nggak ada menu horizontalnya sih =D

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

anak smp on September 5, 2010 at 3:38 PM

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

simple tips September 5, 2010 at 3:42 PM

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

takuya September 5, 2010 at 3:49 PM

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

Muza elbanaf September 5, 2010 at 3:58 PM

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

rafli pratama September 5, 2010 at 3:58 PM

Mau dicoba tapi takut salah.. hehe

attayaya jadi anak smp September 5, 2010 at 4:02 PM

itu blog yang nemu dari cari di gugel

Zippy September 5, 2010 at 4:35 PM

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

Amdhas September 5, 2010 at 5:27 PM

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

Blogger September 5, 2010 at 9:12 PM

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

suwune September 5, 2010 at 9:54 PM

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

Eka Ninjitsu September 5, 2010 at 11:55 PM

wah, Bisa di coba nih kapan2...

om rame September 6, 2010 at 4:16 AM

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

Sungai Awan September 6, 2010 at 6:04 AM

belum begitu paham kang.
suwun

uswah September 6, 2010 at 6:05 AM

berkunjung pagi

Anggi Zahriyan September 6, 2010 at 8:06 AM

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

bagaimana PR turun September 6, 2010 at 8:30 AM

boleh nih. di catat dulu mungkin sewaktu-waktu butuh

Blogger Serabutan September 6, 2010 at 3:38 PM

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

attayaya jadi anak smp September 7, 2010 at 11:09 AM

astaga
kupikir tadi balon untuk ultah
hehehehe

Suratman Adi September 11, 2010 at 7:38 AM

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.