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>5. Simpan template
<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/AVvXsEi_oZk2CRcFrYWafG5aXcyMZyuKk2zT4vQo7Q-qwQCbPmfL6KalqsR90Y3idnxKZAMlVllwydGiPaJcQihyphenhyphen9CfNO0COvx79odWeTm6z7LEXJ5g93C7f6PjIxodqzTbG3-Rbr5gwns0e65iV/s104/Bubble+home.png) no-repeat 0px 0px}
.menu-2 a.icon{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCaWaEGyFAxgtA08hKBhH0eb7XrDXVAz1QLVPf59m7IJcSAEEUP6r-QP5_cGBxynSZN0HLTkhCdHv497Ezglq6VyV0rdvx5vSaltapcEBjDA2KBvjxN4a9QFBHoKjcHpTQ-dWRNnqbrFB-/s104/bubble+user.png) no-repeat 0px 0px}
.menu-3 a.icon{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcwWkZKUXKVdLGquL90pDZCnasHuojR0vjw2q4J2USPi8IWB86u_cDEH9H0J5KuEPMzj0eoZxMDO32TqN01J6G5ds96QzvePk5tEt_yPivMl_nC15VIn_HHMOi_VsDdkwcZboEB06Eb5sX/s104/bubble+shop.png) no-repeat 0px 0px}
.menu-4 a.icon{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil3GwLu8OvU20lNur7gw1OuSmuUJatGtLt6beyVe2hIhyenpyIZpy6D2FBtLH-uumPVe1BUN5cUd4SBWMbARKPkaBNF_zDXZ2sSNFM-C4d8kx6wSmnmR6jhOT_rWxCaiI7TPO1p7c_6U-4/s104/bubble+camera.png) no-repeat 0px 0px}
.menu-5 a.icon{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL6hPmoklTotXD38gRcvjf-bd5miYEMxBF2KcReMEXRi8-WJEnwHJgpqptBuFWv2CkOiIy-my8OTyD8qItWalzgT607myBB0WWQjwzxJ12uA1GpdzB6Yotrs8wiNM7rQMVIKWyBWRp67g8/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>
Selanjutnya:
1. Rancangan
2. Add gadget html/javascript
3. Copy dan paste kode berikut
<div class="BubbleNavigation">Ganti url menu sobat sesuai keinginan
<div class="content">
<div class="navigation" id="nav">
<div class="item menu-1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhJwldqIOdqaOIdp9dKAcbzthtaGJ9nk_W3BkZtLPmWcav4v8Q-sQIi_WNne2IoerkvTyBCwl3PfCpIyKkz9dWx_MB_3RrHkG9aml8R4zC4-7neCaNxvo-yxSDV8uH6oAiEr65p4CQtCXD/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/AVvXsEiizkoLWj6uAoq7lj4169HZOpoVSEhLuLgGpI2q8ASY3DdmZV9GQVMsWz3Qh2gMLaanoOWW9nqzoGhJVr63HpGVGcKUZug3qT4-aQuVej70jymbnTr_JBK8BlLmHuaxboha-fn_4-OvsAOt/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/AVvXsEjGmsXVqMziZq96En-p-02Ya8ElUH0jQpM2rrd5QYGApcSYm966usC-zudH7rKHMAaksw6ilrNTRzYTyk0xCV199yoI7BbXmjn66kghc7gqfnjLGWcPvEvyDIpwLhUFY0Cm_AVq1-ne0DGB/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/AVvXsEi_Bx1IC-KmyVIP-0wsme82DPL946lwKRhbPeNoKsZxS2uDVbw_iSboaOy1kSCstgMK23j5zvPqovv0RXc0t5qPBXyf3tP2gr6ctI2MXHJMZlzH4VetpQfeRrY1ssja351Zl3ALCrVU_Hu0/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/AVvXsEg48v4WhkzuU1RV0RbgvuSGz8JrAzoxd7TNjWlsq8DARqBVDhg0GWFQ4BOj8HblWEEFzN23qWZyjarKN2HMxxKkJNYF1b-VYRg7uCd8WihFE8U_tTQcrE6XcZlC64_zhTfgArc9ToV4Qufb/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>
Kemudian simpan
Demikian cara membuat menu drop down dengan efek bubble.
semoga artikenya bermanfaat.