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 komentar:

niesa said...

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

good post.

Ka Damar said...

mantep, tp aku yg biasa sj

Unknown said...

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

Unknown said...

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

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

sda said...

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

cHugy - gOgOg said...

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

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

Nuy said...

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

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

anak smp on said...

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

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

takuya said...

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

Muza elbanaf said...

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

Mau dicoba tapi takut salah.. hehe

attayaya jadi anak smp said...

itu blog yang nemu dari cari di gugel

Zippy said...

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

Amdhas said...

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

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

suwune said...

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

Eka Ninjitsu said...

wah, Bisa di coba nih kapan2...

om rame said...

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

belum begitu paham kang.
suwun

uswah said...

berkunjung pagi

Anggi Zahriyan said...

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

bagaimana PR turun said...

boleh nih. di catat dulu mungkin sewaktu-waktu butuh

DJ Site | Blogger Serabutan said...

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

astaga
kupikir tadi balon untuk ultah
hehehehe

Suratman Adi said...

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.

DJ Site - Since 2009 Until Now

Creative Commons License
Blog Content by Ferdinand is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Based on a work at https://dj-site.blogspot.co.id/.

Themes by blogcrowds. Design With ❤ for Blogger Serabutan