Langsung ke konten utama

Membuat Menu Bubbles Dengan Jquery Dan CSS3

Membuat Menu Bubbles Dengan Jquery Dan CSS3
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 {
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;
}
Note:
-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">
<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 lihat hasilnya ^^

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>
<a href="http://djogzs.blogspot.com/" title="pesan">Nama link</a>
</li>
lalu letakan kode'a di atas kode " </ul> "

selamat mencoba,dan jangan lupa tinggalkan komentarnya n_n

Komentar

Postingan populer dari blog ini

Karya Seni Patung Gregorius Sidharta

Homage G Sidharta Soegijo Dalam Seni Rupa Indonesia 11 12 09 Gregorius Sidharta G Sidharta Tokoh Seniman Patung Indonesia G Sidharta The Concept Homage G Sidharta Soegijo Dalam Seni Rupa Indonesia Pengawal Batas Indonesian Visual Art Archive Karya Karya G Sidharta Homage Artdig Gregorius Sidharta Soegijo Homegallery Posts Facebook Indonesian Visual Art Archive Karya Karya G Sidharta Gregorius Sidharta Ilmuseni Com Homage G Sidharta Soegijo Dalam Seni Rupa Indonesia 11 12 09 Gregorius Sidharta Soegijo Homegallery Posts Facebook Karya Seni Pembentuk Identitas Negara Indonesian Visual Art Archive Karya Karya G Sidharta Sejarah Awal Dan Perkembangan Seni Patung Di Indonesia Lukisan Berma...

Seni Lukis Impresionisme

Impresionisme Pengertian Ciri Tokoh Contoh Karya Analisis Apa Yang Dimaksud Dengan Aliran Impresionisme Seni Rupa Apa Itu Impresionisme Sejarah Seni Lukis Impresionisme Dunia Lukisan Javadesindo Art Gallery Sejarah Aliran Seni Apa Yang Dimaksud Dengan Aliran Impresionisme Seni Rupa Seni Rupa Impresionisme Dan Ciri Ciri Lukisannya Bilik Seni Impresionisme Pengertian Ciri Tokoh Contoh Karya Analisis Aliran Seni Lukis Impresionisme Thegorbalsla Siapa Saja Tokoh Seni Lukis Aliran Impresionisme Seni Rupa Impresionis Aliran Yang Awalnya Tertolak Kompasiana Com Impresionisme Definition And Synonyms Of Impresionisme In The Media Pembelajaran Lukisan Impresionisme Impressionism Mengapresiasi Lukisan Impresionisme Karya Leonid Afrem...

Gambar Seni Patung Bali

Seni Pemahatan Patung Bali Hindu Indonesia Gambar Monumen Patung Seni Candi Indonesia Fitur Air Bali Gambar Manusia Monumen Seni Candi Bali Mitologi Patung Inilah 5 Patung Ikonik Di Badung Versi Tribun Bali Tribun Bali Nilai Ekspor Patung Bali April 2018 Capai Rp 66 Miliar Bisnis Seni Ukir Patung Di Gianyar Bali Patung Bambu Bali Berukuran Raksasa Ini Tarik Perhatian Turis Gambar Monumen Asia Patung Gargoyle Seni Naga Budaya Tidak Seperti Nasib Getah Getih Ini Deretan Instalasi Bambu Gallery Karya Seni Bali Wisata Seni Ukir Batu Batubulan Gianyar Hard Rock Fm Patung Patung Unik Di Bali Halaman All Kompasiana Com Tuliskan 2 Contoh Karya Seni Rupa Yang Berasal Dari Bali Brainly Gambar Monumen Patung Pariw...