Jumat, 23 Maret 2012

Rocking Rolling Rounded Menu pada Blog

Demonya bisa dilihat disini

    Cara membuatnya :
  1. Login blogger
  2. Rancangan (desain), Template, Edit Html, Cari kode ]]></b:skin> (catatan : agar lebih cepat dalam pencarian kode, gunakan Ctrl+F)
  3. Dan Simpan kode berikut diatasnya : 
/* -------------------------
Rocking Rolling Rounded Menu with jQuery and CSS3
----------------------------------------------- */
.item{
    position:relative;
    background-color:#f0f0f0;
    float:right;
    width:52px;
    margin:0px 5px;
    height:52px;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
}

.link{
    left:2px;
    top:2px;
    position:absolute;
    width:48px;
    height:48px;
}
.icon_home{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgebkDxCRrZs-ekfVEEfP2MgkQ4bC3pGNfc3RIjHhgc_uPGzfbpux15PRx5JD5eqjzck8QXgvV-zZPXKxKdrW_8pYTEBT0oXQeRi9yuH-ekU66xIfqGqdOrNF2sa0ujU-VI0sbN3Jrjeck/s1600/home.png) no-repeat top left;
}
.icon_mail{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSTJBUuE4NTEyrLeQ0U7YcYARCJUG8aBFWgJe-B5YZ2ScDqt3EZ42r-VNthfdpHbovvqZqc19V5KsfvZboVz-b_AisrzSDZggEIyd1_Z_v5xI9V5geTf_eGDFPMK1dZG1Ed1BnJjdj8rg/s1600/mail.png) no-repeat top left;
}
.icon_help{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB2pblvigL54xipftgU9RiivDgfaNK0Fdi1dAgn1Iuwd3eUvxYP-2vzbbBqEKWpg9WUmfFZmeiLdojmBuCVvKFCqL2N_CR0S4R1EWt7K8_TpX3Z7l3OEPDrQac8DvzNVs5nqMmaBob_cA/s1600/help.png) no-repeat top left;
}
.icon_find{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo-KBXg3DPCGyRdTTEEUCbRhzP0_dzMxG70s8a20ZXZUmab6V89-WqnGQQc2HLKxu1b9PA_1_oJscgMYQCXrII-ggaE9KKQ-M-na56Tq3iKNQvp4tuguxzbCzHHSQ6qzYqd7t5DPjMTxo/s1600/find.png) no-repeat top left;
}
.icon_photos{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWnFAo67z-FVA_B35eBVxuynbED7QpdO-MM5WwSAjhURBhdAt2WtwatWlfSgV5MeoVcKdnjxNnIIE_mlOsgABCpqmwyZA9kFCrRnopEmtxa-eoCJLy2ddVXv-6p6aVwvLJ_Qf2utkS2eE/s1600/photos.png) no-repeat top left;
}
.item_content{
    position:absolute;
    height:52px;
    width:220px;
    overflow:hidden;
    left:56px;
    top:7px;
    background:transparent;
    display:none;
}
.item_content h2{
    color:#aaa;
    text-shadow: 1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
}
.item_content a{
    background-color:transparent;
    float:left;
    margin-right:7px;
    margin-top:3px;
    color:#bbb;
    text-shadow: 1px 1px 1px #fff;
    text-decoration:none;
    font-size:12px;
}
.item_content a:hover{
    color:#0b965b;
}
.item_content p {
    background-color:transparent;
    display:none;
}
.item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px;
    float:left;
    margin-right:5px;
}


selanjutnya simpan script berikut tepat diatas kode </body> :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script src="http://kangdadang.googlecode.com/files/jquery-css-transform.js" type="text/javascript"></script>
        <script src="http://kangdadang.googlecode.com/files/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
        <script>
            $('.item').hover(
                function(){
                    var $this = $(this);
                    expand($this);
                },
                function(){
                    var $this = $(this);
                    collapse($this);
                }
            );
            function expand($elem){
                var angle = 0;
                var t = setInterval(function () {
                    if(angle == 1440){
                        clearInterval(t);
                        return;
                    }
                    angle += 40;
                    $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
                },10);
                $elem.stop().animate({width:'268px'}, 1000)
                .find('.item_content').fadeIn(400,function(){
                    $(this).find('p').stop(true,true).fadeIn(600);
                });
            }
            function collapse($elem){
                var angle = 1440;
                var t = setInterval(function () {
                    if(angle == 0){
                        clearInterval(t);
                        return;
                    }
                    angle -= 40;
                    $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
                },10);
                $elem.stop().animate({width:'52px'}, 1000)
                .find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();
            }
        </script>

terakhir cara pemanggilannya pada HTML, klik Tata Letak cari Tambah Gadget, lalu copy kan kode nya (catatan : tata letaknya sesuaikan dengan template dan keinginan) : 

<div class="menu">
    <div class="item">
        <a class="link icon_mail"></a>
        <div class="item_content">
            <h2>Contact us</h2>
            <p>
                <a href="#">eMail</a>
                <a href="#">Twitter</a>
                <a href="#">Facebook</a>
            </p>
        </div>
    </div>
    <div class="item">
        <a class="link icon_help"></a>
        <div class="item_content">
            <h2>Help</h2>
            <p>
                <a href="#">FAQ</a>
                <a href="#">Live Support</a>
                <a href="#">Tickets</a>
            </p>
        </div>
    </div>
    <div class="item">
        <a class="link icon_find"></a>
        <div class="item_content">
            <h2>Search</h2>
            <p>
                <input type="text"></input>
                <a href="#">Go</a>
            </p>
        </div>
    </div>
    <div class="item">
        <a class="link icon_photos"></a>
        <div class="item_content">
            <h2>Image Gallery</h2>
            <p>
                <a href="#">Categories</a>
                <a href="#">Archives</a>
                <a href="#">Featured</a>
            </p>
        </div>
    </div>
    <div class="item">
        <a class="link icon_home"></a>
        <div class="item_content">
            <h2>Start from here</h2>
            <p>
                <a href="#">Services</a>
                <a href="#">Portfolio</a>
                <a href="#">Pricing</a>
            </p>
        </div>
    </div>
</div>
 
catatan  : untuk langkah ke-3, huruf yg berwarna MERAH di isi dengan link yg kita mau. dan huruf yg berwarna ORANGE bisa di ganti dengan nama link yg kita mau.

Tidak ada komentar:

Posting Komentar

;