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

#bubblemenu li{ display:inline; float:left; margin-left:10px; cursor:pointer; }
#bubblemenu li >div{ width:150px; min-height:100px; position:absolute; display:inline; margin-left:-70px; padding:5px; visibility:hidden; opacity:0; margin-top:-150px; background:#fff; font-size:1em; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:0 0 8px gray; -webkit-box-shadow:0 0 8px gray; filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229',Direction=135,Strength=3); box-shadow:0 0 8px gray; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}

#bubblemenu li:hover >div{visibility:visible; opacity:1; margin-top:-150px; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}

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