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/AVvXsEi21FBx7EM3edjCHEsHj3gwp1qDuSHQ42Deu_WUV2PcvlN72bmitYSnbE88zNKRZbl2_uzqhUifc4rO3BzDRRB6Iq8kAFhAo2gQOrc2o63hu9yxMy6g_iKJX9pSb_n6JlE_cNJAmAk-pVZ9/s104/Bubble+home.png) no-repeat 0px 0px;}.menu-2 a.icon{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY7QDO_0-N70X16vkYmyGedumQGd5yX9_KlGzDDdZdgrWVefvX1KZe_-91TTZEI3Vk4e-4Y2_4W33YZtvCmtinhH7lxUSNqLqNd8CfqypRSpWDIQ3l1wXp4-fpqvgXccDwODKICd6WgI9n/s104/bubble+user.png) no-repeat 0px 0px;}.menu-3 a.icon{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgADYPCwgOquJeAcMuGemqrCYhFDkqdSjagqYI6Wi2n2-clcNIeLuwM_yv-w6h0D4nE1bZuRnrF8E_J1Jac7gMESQMEyDTwCCa6ZSSPb47odu8kC-vjRl2IfjVJkzj2itIWUGyi3aftb6Uk/s104/bubble+shop.png) no-repeat 0px 0px;}.menu-4 a.icon{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimaRAqOgKgd3TaRa59bsuG2l19-OvK1SFwPly5LkiD_Apa-IFqctdIffjhkMHnB3W97N4C_LIQlvgnZ7eIyrIZEICHfRSS_l8nMc_sACtoNOaW0A3WxAO1Q2WwRYTpI8dnQd-5gjKUALSu/s104/bubble+camera.png) no-repeat 0px 0px;}.menu-5 a.icon{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis-YvqWQ7fWC2x4znarwPyX91uXN9HStUerPZiNQTYr5uGMgN2jPusFHvt_1bpOS8FnvBfUFUE-i68ejsu-1cgrkBvSaqEY1ATlrshnQVHyEcjknYt5VWLQlNPsjerpMd4ZvAL4dRnEyqw/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/AVvXsEhhpyc_9esSF64tbPEzJhQRJrGD9b0LYs58qTmmmvkigsE97R69vAWnG2lZZ6byKaaNCNxgAypIp7iEQdrHsGQJVGrtBDtiXZtLsucDFMp1GhNNHQo7_N26QOf7E_1zQ-zt4tsSOB5J44yP/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/AVvXsEgm-V9C0oDq5ZFCsY8YOboMDH_mU8aQDM-62tq3v5ReXq_C9-S4EWkUoa086opd8JknkpOdYgPcaJkfj-S6nbcH4V2UCS7QJ1V9R-SIetIpMgOI-8Ow4on7oeXv0RhIUWkBu5n8jEHrUfFf/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/AVvXsEh5VsT6QKsY-48z69XrLUP0j4wJYyQLu_1RaX2N8ttSZFqAahsfx5B6IakGnBUQA7kpRYXMO92mNAhQ1rq39giQPQtqMNLPxoIvd1Fr-8zIQSZmx9KicfIa9ZCPKm8-rjXXoTU3TVR90Rjd/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/AVvXsEidiMkR_kWUgIboK86ns8DBFB2DRwUC4Z7YF8j50XPrrLxZ-8yzrodjs-LgInx1JM39xaJf1Ly8QVGaWfJ3_Jo8jxS6eAA28rSTLRWi89YgBebow2h3rtdFMvPnYeNpT661AkEF7Udjdad3/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/AVvXsEjXr6jJ2IEjSJeVPM7ktL1El3Q6797mkcNUjFlNdYK-W6wlzbKRpaPFHhTpBYuSGX0mtyBzT9ZsntdKM1hg_QZQ0OqtvEULp73Ct8_L4W4BMpne3phuFfwe9RzY-x-Te0Xt9G8zWyqq8qHS/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
semoga artikenya bermanfaat.
0 comments