Cara Membuat Menu Bubbles Dengan Jquery Dan CSS

Hello Pengunjung Setia Blog Cyber Creative Kali Ini Admin Mau Post Tutorial Keren Nih... Yaitu " Cara Membuat Menu Bubbles Dengan Jquery Dan CSS "
Penasaran Seperti Apa Itu ...
Mari Kita Liat Demo Nya

                            

Gimana Keren Kan :D
Jika Pengen Mencoba,, Mari Kita Liat Tutorial nya

• Pergi Ke Blogger Masing"
• Klik Template > Edit HTML
• Lalu Letakan CSS Ini Tepat Di Atas Kode ]]></b:skin>

.bubbles {
margin: 100px 0 0;
padding: 0;
list-style: none;
}
.bubbles li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.bubbles a {
padding: 15px 10px;
display: block;
color: #000000;
width: 140px;
text-decoration: none;
font-weight: bold;
background: -moz-linear-gradient(top, #e0f3fa 0%, #d8f0fc 50%, #b8e2f6 51%, #b6dffd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0f3fa), color-stop(50%,#d8f0fc), color-stop(51%,#b8e2f6), color-stop(100%,#b6dffd));
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
opacity:0.9;
-webkit-transition: all 0.6s ease-in-out;
}
.bubbles a:hover {opacity:1;}
.bubbles li em {
font-weight: normal;
background: -moz-linear-gradient(top, #feffe8 0%, #d6dbbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffe8), color-stop(100%,#d6dbbf));
width: 130px;
height: 25px;
position: absolute;
top: -85px;
left: 3px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
.bubbles li em:after {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:50px;
width:0;
height:0;
border-width:20px 0 0 20px;
border-style:solid;
border-color:#d6dbbf transparent;
}

• Setelah Itu Masukan Script Berikut Di Atas Kode </head>

<script src="https://sites.google.com/site/djogzs/js/jquery.js" type="text/javascript">
</script> 
<script type="text/javascript">

$(document).ready(function(){

$(".bubbles a").append("<em></em>");

$(".bubbles a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-15"}, "slow");
});


});
</script>

• Save Template

• Eits Belum Selesai...
• Terakhir Masukan Kode HTML Berikut Di Tata Letak > Add Widget >Tambahkan Html/JavaScript

<ul class="bubbles">
<li> 
<a href="http://djogzs.blogspot.com/" title="Home sweet home">Home</a> 
</li>
<li> 
<a href="http://djogzs.blogspot.com/" title="siapa aku?">About</a> 
</li>
<li> 
<a href="http://djogzs.blogspot.com/" title="Johanes">Contact</a> 
</li>
</ul>

Setelah Itu Liat Hasilnya ^^

Selamat Mencoba.. Jangan Lupa Tinggalkan Coment nya :D