Cara buat menu drop down bubble

Koleksi baru lagi cara buat menu drop down, dan menu ini memiliki tampilan yang berbeda dengan menu drop down yang lain. Menu drop down ini mengunakan efek bubble yaitu efek hover yang timbul berbentuk bubble atau seperti gelembung, dan bubble yang muncul sekaligus  sebagai area sub menu yang muncul bersamaan dengan bubble tersebut.
Yang jelas menu ini akan membuat web atau blog anda tampil lebih mantab.

Silahkan langsung saja anda LIHAT DEMO

Bila anda berminat memasang menu drop down bubble ini, silahkan ikuti langkah - langkah dibawah ini. Tapi ingat, gadget ini juga menggunakan jQuery ya.... :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="http://tympanus.net/Tutorials/BubbleNavigation/jquery.easing.1.3.js"> </script> <script type="text/javascript"> $(function() { $('#nav > div').hover( function () { var $this = $(this); $this.find('img').stop().animate({ 'width' :'199px', 'height' :'199px', 'top' :'-25px', 'left' :'-25px', 'opacity' :'1.0' },500,'easeOutBack',function(){ $(this).parent().find('ul').fadeIn(700); }); $this.find('a:first,h2').addClass('active'); }, function () { var $this = $(this); $this.find('ul').fadeOut(500); $this.find('img').stop().animate({ 'width' :'52px', 'height' :'52px', 'top' :'0px', 'left' :'0px', 'opacity' :'0.1' },5000,'easeOutBack'); $this.find('a:first,h2').removeClass('active'); } ); }); </script> <style> .BubbleNavigation { width:950px; height:70px; border:2px solid #ddd; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:1px 1px 4px #666; -webkit-box-shadow:1px 1px 4px #666; box-shadow:1px 1px 4px #666; margin:0px auto; padding:5px; } .content{ width:100%; height:50px; background-color:#ccc; opacity:0.7; margin:0px auto; } .navigation{ margin: 0px auto; font-family: "Trebuchet MS", sans-serif; font-size: 24px; font-style: normal; font-weight: bold; letter-spacing: 1.4px; } .navigation .item{ position:absolute; } .menu-1{ top:30px; left:50px; } .menu-2{ top:30px; left:225px; } .menu-3{ top:30px; left:425px; } .menu-4{ top:30px; left:620px; } .menu-5{ top:30px; left:815px; } a.icon{ width:52px; height:52px; position:absolute; top:0px; left:0px; cursor:pointer; } .menu-1 a.icon{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxQCW9ZDcSjhtpxY2-zw7axh4J-LdpFgyiF_vZhYyM1Q9jlsFdBPd7pq-atf6gxFTlOPLlMYQ03FxW1YyD48DrEXOxpJ-GLN9K4mx2vnx1A0ZQyveN2EAapGLCrEtCEzfTbwu5NBVWnqzh/s104/Bubble+home.png) no-repeat 0px 0px; } .menu-2 a.icon{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdBsiuKJE1fo70wW1rLqPX7G4LgbeZtdXgck0p3pRJt4-iJP56iRkVc38rjANTOR-4gK3HtOFeIcTDimjUCRbEREcJvYOmRSIRqG3JQ-2570q7Kg1CzyBRjVozTnzMUgKOOHrXq1svPB0O/s104/bubble+user.png) no-repeat 0px 0px; } .menu-3 a.icon{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA05GngU8HJfVMu1TBL5-Y4wrnbr0k4kkujKgDi0Js4CtxamQWQ8K56kXk2X0YRbAEx7EKXr9UKAOpi_hE6hEeS4u1wfz0V5iuVcckA35MOsnyEIhu-bLO122a3SX3uZaastLwgOBB42z0/s104/bubble+shop.png) no-repeat 0px 0px; } .menu-4 a.icon{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgljwrlGlMqtv4i5ZOilaHTdg6TLZeJW2_qAiopvkMavRiprSxgGBTetzsxwfg27tg-M-axAqILVRWPQW-iv6DtNNoYbyNca12HgV-NJ1pw7FQ53n3dyzGwOmhHUDIuB2TcXhEn3qUKZKac/s104/bubble+camera.png) no-repeat 0px 0px; } .menu-5 a.icon{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOsK5XktvqlZP8bxbjn7hEjUlhduO0GVrIdsfQ2wnkYjRPTEDLahj60JTAa5dB9wCcIpFcA5DVGYc3Fn6kTWDDOneRY2M3M6hSzvLiSPOh7nwCLs_qrLyIRSbrMrA5tYNADB9mMl_zpTRp/s104/bubble+fav.png) no-repeat 0px 0px; } .navigation .item a.active{ background-position:0px -52px; } .item img.circle{ position:absolute; top:0px; left:0px; width:52px; height:52px; } .item h2{ position:absolute; width:px; height:25px; background-color:#ccc; border:1px solid #ccc; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; -moz-box-shadow:1px 1px 4px #000; -webkit-box-shadow:1px 1px 4px #000; box-shadow:1px 1px 4px #000; color:#222; font-size:18px; top:0px; left:60px; padding:5px 10px 5px; text-shadow:1px 1px 1px #fff; text-transform:uppercase; } .item h2.active{ color:#fff; text-shadow:1px 0px 1px #555; } .item ul{ list-style:none; position:absolute; top:45px; left:0px; display:none; } .item ul li a{ font-size:15px; text-decoration:none; letter-spacing:1.5px; text-transform:uppercase; color:#222; padding:3px; float:left; clear:both; width:px; text-shadow:1px 1px 1px #fff; } .item ul li a:hover{ background-color:#fff; color:#444; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:1px 1px 4px #666; -webkit-box-shadow:1px 1px 4px #666; box-shadow:1px 1px 4px #666; } </style>

Catatan :

Bila menu tidak bekerja dengan baik, silahkan anda coba hilangkan kode javascript jQuery seperti berikut :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Biasanya pada template sudah terdapat kode javascript jQuery yang sama.

6. Simpan Template

Langkah selanjutnya anda tinggal menambahkan kode dibawah ini pada gadget yang ada dibawah header, ikuti langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div class="BubbleNavigation">
<div class="content">
<div class="navigation" id="nav">

<div class="item menu-1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6iyNavzdtHVzD4l9RumBja4PQN2WGqTVvYi9T1oUvLVUb4F_qe11yAax4XrH7Fa_qZ5c8ujC7RIBYgviZtBYOE1OosvzbPTNHNsobmG1CYLbytsfLhPBE4zuqcnEpCneLh9xsF70Nhak5/s104/Bubble+1.png" alt="" width="199" height="199" class="circle"/>
<a href="ULR HALAMAN / ARTIKEL" class="icon"></a>
<h2>Home</h2>
<ul>
<li><a href="ULR HALAMAN / ARTIKEL">Portfolio</a></li>
<li><a href="ULR HALAMAN / ARTIKEL">Services</a></li>
<li><a href="ULR HALAMAN / ARTIKEL">Contact</a></li>
</ul>
</div>

<div class="item menu-2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtoPBdnApbRSrZcGvznhbFJfdWAjG6wsryKtiWbUNjkRt09vTajtpf_HSU-aTegzGx0Pg7hz_ruDp7m3Q073-A9RfsalGZYinnnu3namE802wcW7Mco8kBzDmUOYVvif126rJoWujX8l8B/s104/Bubble+2.png" alt="" width="199" height="199" class="circle"/>
<a href="ULR HALAMAN / ARTIKEL" class="icon"></a>
<h2>About</h2>
<ul>
<li><a href="ULR HALAMAN / ARTIKEL">Profile</a></li>
<li><a href="ULR HALAMAN / ARTIKEL">Properties</a></li>
 <li><a href="ULR HALAMAN / ARTIKEL">Privacy</a></li>
</ul>
</div>

<div class="item menu-3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOXuOZWqp7Ej3L7nfqo_js4JX8i6rsoRWA24rWEmdT-kRGH-w8rH87EUZk22_abNDQQb3EZfRQzthidme3WbCjFXpozP3dmtnp-tJkFmzCp6-XpWgI5dIJcGsCFR24QVSxb9mgeCDTAymx/s104/Bubble+3.png" alt="" width="199" height="199" class="circle"/>
<a href="ULR HALAMAN / ARTIKEL" class="icon"></a>
<h2>Shop</h2>
<ul>
<li><a href="ULR HALAMAN / ARTIKEL">Harga</a></li>
<li><a href="ULR HALAMAN / ARTIKEL">Katalog</a></li>
<li><a href="ULR HALAMAN / ARTIKEL">Order</a></li>
</ul>
</div>

<div class="item menu-4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimlS4HiNW1crsg3YL2yG6wcPbsT4GEL3pmMIazCl54otyIrn1wOyHUl9JPNV6nXBs5jz7RZtAn1aPjJehidQevVq15_LwKpnMa6IoprertVfydQaacSh9U4Kl_OhH-igwW16mCAjoYngFj/s104/Bubble+4.png" alt="" width="199" height="199" class="circle"/>
<a href="ULR HALAMAN / ARTIKEL" class="icon"></a>
<h2>Album</h2>
<ul>
<li><a href="ULR HALAMAN / ARTIKEL">Terbaru</a></li>
<li><a href="ULR HALAMAN / ARTIKEL">Work Shop</a></li>
<li><a href="ULR HALAMAN / ARTIKEL">Trend</a></li>
</ul>
</div>

<div class="item menu-5">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3U5x6Qq16jU-66Y9d1mbNXiXwmaX8m5ynCDNjqYlHZTIpKmHVZMrROu_4K4sAQUhF0rB7Etq6jxEEdlJ2qPLnG4HRscz73Ig4A01Ihfs6u9MSgFcP6jz5EXDLi79rvVKaBMJuB4btJE6c/s104/Bubble+5.png" alt="" width="199" height="199" class="circle"/>
<a href="ULR HALAMAN / ARTIKEL" class="icon"></a>
<h2>Kontak</h2>
<ul>
<li><a href="ULR HALAMAN / ARTIKEL">Service</a></li>
<li><a href="ULR HALAMAN / ARTIKEL">Support</a></li>
<li><a href="ULR HALAMAN / ARTIKEL">Comments</a></li>
</ul>
</div>

</div>
</div>
</div>

Catatam :

• Silahkan anda ganti Teks berwarna MERAH diatas.

5. Simpan.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Judul: Cara buat menu drop down bubble; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Thread Comments Stylish Dark Edition dengan CSSPada kesempatan kali ini saya akan membahas tentang modifikasi thread comment. "Thread Comment Stylish Dark Edition dengan CSS". thread comment yang biasa dan sudah ... readmore
• CSS CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampi ... readmore
• CSS MarginProperti CSS margin berfungsi untuk mengatur jarak atau membuat ruang kosong, baik bagian kanan, kiri, atas, dan bawah disekitar elemen seperti box, teks, gambar dl ... readmore
• CSS Gradient background GeneratorPada posting sebelumnya saya membahas tenntang CSS3 Generator, dan kali ini saya akan membahas tentang CSS Gradient Background Generator (Warna Gradient) yaitu sebu ... readmore
• CSS BOX dan FungsinyaFitur Css Box digunakan pada saat kita membuat desain web termasuk mengatur tata letaknya. Css Box pada dasarnya adalah sebuah kotak yang membungkus elemen HTML, da ... readmore