NEWS
Loading...
  • Posted by : Johanes Djogan 28 Des 2010

    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

    { 13 comments... read them below or Comment }

    "Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

    "Sorry your comment will not be replied, because this blog has been inactive. Thank you"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -