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.
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
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.
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.......
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.......
bisa d'coba.
semoga j berhasil,,hehee...
good post.
dibawah udah ada warningnya lagi...duh...
berani coba gak ya?
apa kabar kak? lama tak bersua? hahaha...
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
tak tungggu dj-template for blogger sampe habis lebaran.. wkwkwk
Met berlibur kawan....
Gak pake Blogspot sih :D
Sukses Slalu!
info: kemarin beLiau terpancing untuk nembak saya, Langsung sambiL ngundurin diri jadi foLLower. hakhakhak...
suwun
@ 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...
kupikir tadi balon untuk ultah
hehehehe