Cara membuat menu horisontal bubble pada blog

Menu dropdown dengan efek bubble menarik untuk di coba.

Contoh seperti gambar di atas.

Berikut ini caranya:

1. Login blog

2. Rancangan

3. Edit html

4. Letakkan kode berikut di atas </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/AVvXsEjKNl5rfhdB0HHipT1-0B7mg2AJxIaNt-Y33_Dd5LF0mtjHGLjYl_xSLrSukS0gpB22wE_d8Uv68mOKpEY36F7CentfxOmnpR_cQ8-1zhFvpdtI4gvtw2zenoQyU7PTwFkj7iKO1WLtmz3m/s104/Bubble+home.png) no-repeat 0px 0px;
}
.menu-2 a.icon{
   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwQ7uT5BCVWrmlp6by8TeQdEQQyMWNKrrnZ-dQvPiA-V1KO_5iB9nZB5UKREBbgOGij473yTmSApPKte8rhFWsaHUkYOD9e3XM5HEZaMdUc4kwAKo1FVdwxVCIaymiEHU7GeZKiSFcyDv3/s104/bubble+user.png) no-repeat 0px 0px;
}
.menu-3 a.icon{
   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi70cY8Bgqv6M6aYC9SD1GyMKDn2ztXdydESYSI8gVXSqLsVr5DEEtTB7Ecv-RYIDOtl0twVcXF-DD1RsLW6dprGPsgVntVq1kThE__ZqoDbMAFQu37T2sHi9H7LzBayzT5dVjuYicynZbd/s104/bubble+shop.png) no-repeat 0px 0px;
}
.menu-4 a.icon{
   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTu4cpegRlbpXe0hqZgTA20h925_5F-B7CEBrF_0kHim7MLZBFsWNMJYhj0I_fKi6PYxKtBmDP_dTbUEF0zmG3V4OzWalIURHS7iPg3O2j937pcVmHHiXh-6qztayl5JaF7e7AD16o8wI4/s104/bubble+camera.png) no-repeat 0px 0px;
}
.menu-5 a.icon{
   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUPIAYCSI3L_3c7vZ0RGoJiG_DUJ8g-QRIJt2hYUt7G0Hc2bxogOwrpPrlAR44BpJ_nI6c0OGJpZKceM_283ntfKtpb3w25VVB9z_6OelOjLQCYRCiKQ2qZJtFKOrm-ukBnQ57WfpST-f5/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>

5. Simpan template

Selanjutnya:

1. Rancangan

2. Add gadget html/javascript

3. Copy dan paste kode berikut

<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/AVvXsEgFna2u82jD12-H52DMCF09W4TCOW9AxkjXf29OTWMkOJJYvwXki8X101yzHc0SM_uTz4glFCPSV5Veld0gzmBLlu4zY7PWQU13dNwlKugAEufteJWcXSVJbf7uXFTBgi6QYy-Sw-rr9zD3/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/AVvXsEhmWTZvVAHBRrsK3p-yDkjqqgKttU-gtKN_Gqs99N-RbSjTHFD5sF_09DP8ds2jeLHiDIY1e1kxe9dSdAAK8QP0YfrK5t_99bUDSNLwjhPzSH-ogHcGMB1Pz6rvBc20rvEwSyr2D2uBq7dF/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/AVvXsEh6NWHZElZeMCvkDY0Lss-ehpgggCdp3kYQVuhX-vHNR2F2I0lnr6ooL-OjwmWJODH9lJZTigogmvi8XS0RMK5teWJppAfX9d2VD09TgNcqTtMEoVfNufdnFGz8p7-gIU5USnxEbZvwznyz/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/AVvXsEj4NpvfREAjRcDdW-C6XlRoZjQpejbmNE3yCVUXpIOhxQpdAgQgQNBhN17dupePDeggMIuhbrzbd_6rK77TpBKZ0814U3606y02j-0ZxfFgwVGAjgBk1enpkwvsIU84r39rQQsT6YMxAwOy/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/AVvXsEjymrfyz9U3eI1yuOtmjMFWkGxvH8VXeN2ueryIPQTdWt59FvHlEEWKcRUPOnhtbFbSGg-uLAJMC7vkx1yHC-tTMMh9R5dJAebpp-f-MmYj1BKpup5A7FrqfnVWAeQbY0qUpyw4p_Pg6Tdd/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>

Ganti url menu sobat sesuai keinginan

Kemudian simpan

Demikian cara membuat menu drop down dengan efek bubble.

semoga artikenya bermanfaat.

Ayuning nareswari

about me

Disclaimer

Cara membuat menu horisontal bubble pada blog