http://sukaweb.blogspot.com: Cara buat menu drop down bubble

Cara buat menu drop down bubble,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.

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

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/AVvXsEhRCkXauwVlD_q2qyRLqJpII13crGujtcrfhiUmp8bO95pshDV7Dkb1fLkZZD5GayGnO3TvSsdsi3qzI_xGwNeC2raJJI3wuaNFYn6RKsKDvg0gJBXYGhu0Wpa8_ohwBWT5gVm_kmf_gIx3/s104/Bubble+home.png)
 no-repeat 0px 0px;
}
.menu-2 a.icon{
    background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBEOhcQRIb-pmIZsOMYzfGRwUkoENig4iYMGZj2j_1ZO70idegGlaQYk_HzgMdWxoa9smka60Mzn7pjlm6oMMeZfQlw1YRmC52a8ECrpVkXiUA_SiLx77ggWL-xI0trVtbR9EzyOIyHLjV/s104/bubble+user.png)
 no-repeat 0px 0px;
}
.menu-3 a.icon{
    background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO1-tTtLGIQK_h88ATr0kZ-aI7P2xjJ5e5P4SSuOYLs6BgzWKwBll3aLzrWpCXXNhfM9T6EeT2RCrBTgLmxhGl7vbM6ELT6a_izUDPsMT-O1CimrNHq-mBiF2Tj1qwD6EokF5WzvAn10zK/s104/bubble+shop.png)
 no-repeat 0px 0px;
}
.menu-4 a.icon{
    background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHMq6tftqDqZpfAPQ5QhZ3JPq7Xs0-uUs_iKzVp7jmEvBSwwIizY4g4TzyHR7srayYP4waLK8yEd9bN984xioLwb0cm_LY_FrGOpGzM2Wdjs2qgzCxh9ojtwtX6cMcajE4LUqIMbTkRW2I/s104/bubble+camera.png)
 no-repeat 0px 0px;
}
.menu-5 a.icon{
    background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7f_iLrYNY9VERm6dQvEhq9AaFVdvbzURgUZwIs-IhQ3MCY21KiEVDE2I1PAslF2QclOa21Na6FWVrfEZ-3mE9YGy2KoTqHdh7EkNy-0wMKdWPgZi7WMXrAg0vE-01ghG_TKofKi12RpuG/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 :

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="item menu-1">
<img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO3PMQ2KWxWj1N5ccDEqE2daTPJD210dDU3_3HjBJrqVFO5IvXHLfkd2w-dvWspL6mKwfnIa76gVsPdzL0ffCcmibhKyiijMs4H6DCN2DukNJoZPKIuGxZr-1pjTEafCBCtyyKYh0ILhgg/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/AVvXsEgZ1Mkn7hOCnPHkkV_FudA2bYnCwoS_Udd6msORoiyZeIoWZs2Pj565fzvxHZ6YoKGjiWM4rFQZeiO3A3bs3-iaFXcIBbe5G5HyYhsWPoqOUyowz5CaOgw-wg6QbNOppzrI-VEUjw-i_u7X/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/AVvXsEg9hNL8AIgU-m78khNs3gzPi0u7elpwDGsGUcgEykhcbt7OzFLOKJxX5w-7C-DRcGoIR9ih8t2emf56vVgNkjv1n_6N-RJdmfh8Cd4rWThxcEpeh6f6wm4U9kBdF_i7rUKlDrul9oIePHrE/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/AVvXsEgzjGOVolSI7iNgvXNX9xpPLx21NWmYMz_EnTgVDLHYtpQMOPVbAmBEdkjo011Ej0UdIZoLNNMLbKMM7kBBxV-9bU_zghE3pVNdclTi1X0veADwKQDnGM30BdKxezB-Jd_9atmrPkk4i1cL/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/AVvXsEhygvJbSKPkFd80YtsRTYbZ3iMEQnkPeS-zCOt6S0IgY0cUNIOvblxDLghinQKYLdU4RD3MD8eKqEtqaN5zGCT0eTJlOCAOBlPkWsYlCtRiogi1yDmSjDrtJscG74FfONrYYHRz6DIGjd7P/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>

5. Simpan.

Selamat mencoba dan Semoga bermanfaat....

http://sukaweb.blogspot.com

Cara buat menu drop down bubble

Tidak ada komentar:

Posting Komentar

hosting gratis