apa kabar sobat?kali ini saya mau share trik menarik lagi nih.membuat Menu Bubbles Dengan Jquery Dan CSS3,sebenarnya'a ini trik lama ,tapi beda'a disini saya menambahkan Sentuhan CSS3 agar lebih menarik.
efek bubble akan muncul jika sobat arahkan kursor ke tombolnya.mau?cekidot gan....
Pertama,cobat copy paste CSS di bawah ini di Rancangan =>Edit HTML =>lalu letakan css'a di template sobat di atas kode ]]></b:skin>
.bubbles {Note:
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;
}
-warna gradient tombol bisa sobat ganti pada css tag ".bubbles a"
-untuk mengganti warna bubble,ganti warna gradient pada css tag ".bubbles li em" dan border-color:#d6dbbf pada css tag ".bubbles li em:after"
lalu masukan juga script dibawah ini di template sobat,tepat'a di bawah kode ]]></b:skin>
<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>
Terakhir,masukan kode html di bawah ini di Rancangan=>Elemen Laman=>tambah gadget=>HTML/JavaScript lalu letakan kode html'a ,lalu disimpan.
<ul class="bubbles">Setelah itu lihat hasilnya ^^
<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>
oia,sobat bisa ganti URL,nama link,dan pesan yang ada pada bubbble dengan kata2 sobat sendiri.
contoh " title="siapa aku?" "
dan bila sobat ingin menambahkan tombol lagi,tinggal copy paste kode html dibawah ini.
<li>lalu letakan kode'a di atas kode " </ul> "
<a href="http://djogzs.blogspot.com/" title="pesan">Nama link</a>
</li>
selamat mencoba,dan jangan lupa tinggalkan komentarnya n_n
Komentar
Posting Komentar