. Tab menu Jequery show-hide kiri

Translate This Blog

  • HOME Agama Tecnology Kesehatan Tutorial Blogger Islamic Animation Glitter Teks Loggin Blogger

    • Selasa, 05 Juni 2012

    Tab menu Jequery show-hide kiri

    Alhamdulillah, banyak belajar dari para master site building. Banyak trik yang bisa digunakan dan diterapkan pada blogspot, yang dimana trik-trik tersebut dapat mempercantik tampilan suatu blog.

    Trik ini mungkin untuk para master di blogger sudah tidak asing lagi. maksud saya hanya berbagi pengetahuan untuk para newbe seperti saya, mohon maaf bukan maksud untuk menggurui para Master...

    Bagi yang belum tau apa itu Tab menu Jequery show-hide kiri, sobat bisa melihat reviewnya disini : http://banyolandarigw.blogspot.com/, yang dimana dapat sobat lihat pada bagian blog tersebut disebelah kiri yang berwarna hijau.


    Adapun langkah untuk membuatnya adalah sebagai berikut :

    • Login akun blogger milik sobat 
    • Pilih menu rancangan untuk blogger lawas/tampilan lama, sedangkan untuk tampilan blogger yang baru sobat bisa lihat panduan Edit HTML Templette Blogger tampilan baru 
    • Jika sudah, sobat cari kode </head> pada templette blogspot sobat, lalu pastekan kode dibawah ini diatas kode </head>  : 
    <script type="text/javascript" src="http://ibnuhasbullah.googlecode.com/files/jquery-1.3.2.js"></script>
    • Langkah selanjutnya letakkan kode dibawah ini tepat diatas kode  ]]></b:skin>  :
    Open Code >>>

    ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    left: 0px;
    list-style: none;
    z-index:9999;
    }
    ul#navigation li {
    width: 100px;
    }
    ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;
    background-color:#03FC13;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #03FC13;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
    }
    ul#navigation .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLzYyXC8LQpS01gEG5hh8UmCgie5AmYePfzyW4uOMpJ3tjBLrSfarkwwc94c6bQI5SOyZdb_hrTnUo43iSbXHtLTwN3AArwyh7mjSdjyBu7XEb-fVcUGeRDseX8tH-XfQ7PAgcoH7TTNk/s1600/blogger_64x64.png);
    }
    ul#navigation .about a {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik7DuMjsJO3cvJblAG4BqOZByaR1ub559v2FMUSkEC6EUKXUmUhyphenhyphenzMLtE9fbmVbioh-BOWNNZ9a74MYqGhqGvQ9Y22bqGKOcci6kSQSoHSnUELluS-os94naVGkVNKHT8BavNIefyFdpQ/s1600/twett.png);
    }
    ul#navigation .search a {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjctcqLQl6LbQs-XtgBo_mSdE2xqEkiTfxqZ0Ulq33TvOoRh_CQZHvm8e8s23FFb1JxharqjFgeFF4Tgih5OeF-AvWpAx7XSwMKuusu-ECkZ72ZZ0EUNwCToS9MIWk7PO2_aJ5dTj7ev4/s1600/facebook1.png);
    }
    ul#navigation .podcasts a {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSriiWdTdaenh8slU8NVkw_76Z2GPBS5onv25_Tgld2sHH_uvDug7Lf7rUaqWOvEcUg0hyphenhyphenFLVE9fbyPADTKioPO57feFES8eeHq6iM5A8ewPoanKt7Fo62mM_fkpQjJzPviGUMK93xDQ/s1600/1.png);
    }
    ul#navigation .rssfeed a {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuNPSVLFAPy-mGzZx590heodbr6yBSap5sN1AN7xOiPHttKHVTQgELKm0LRQRAPbRDd_TajTGweRDj9_Ag7fOiF-E5u0spvqiRfa5_dxCCLCDHWecEUKzo_K4zUhtKu8kDZTWpSbFxmQ/s1600/8.png);
    }
    ul#navigation .photos a {
    background-image: url(http://www.namatokoanda.com/modules/slideout/images/rss.png);
    }
    ul#navigation .contact a {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijzrU2zuXP6HU1oRoK00qEOUvglorGTspU2V2D6y8mjcHxx8okLDgLEVeZgWJVnIIKgjHoB598l1bUQWTnDN660koOZR_eQhOwAL-nDsqfa3T5HWJeXFeeONFN-gSuqgV2G7a5be89Hw/s1600/6.png);
    }

    • Kemudian langkah selanjutnya sobat letakkan kode dibawah ini tepat dibawah kode <body> :
    Open Code >>>


    <ul id='navigation'> 
           <li class='home'><a href='http://www.ibnuhasbullah.com/' title='Homepage'/></li> 
           <li class='about'><a href='http://twitter.com/#!/H_Ibn_Hasbullah' title='Follow Me'/></li> 
           <li class='search'><a href='http://www.facebook.com/best.sharing.ibnuhasbullah' title='My Facebook'/></li> 
           <li class='photos'><a href='http://feeds.feedburner.com/blogspot/WxpTC' title='Feed Post'/></li> 
           <li class='rssfeed'><a href='http://www.ibnuhasbullah.com/' title='Note Page'/></li> 
           <li class='podcasts'><a href='http://www.trolly-haji.com/' title='We Are Bussiness'/></li> 
           <li class='contact'><a href='http://www.amel-rental.com/2012/02/beranda.html' title='Our Rental'/></li> 
         </ul> 
     <script type='text/javascript'> 
           $(function() { 
             $(&#39;#navigation a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},1000); 
             $(&#39;#navigation &gt; li&#39;).hover( 
               function () { 
                 $(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200); 
               }, 
               function () { 
                 $(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},200); 
               } 
             ); 
           }); 
         </script>  



    • Langkah selanjutnya simpan Templette sobat, dan lihat hasilnya !
    Catatan : 
    • Untuk copy, sobat dapat menggunakan perintah Ctrl + C
    • Untuk mengganti linknya sobat tinggal gati link yang menuju link saya.
    • Untuk Edit warna, sobat bisa mengganti kode : #03FC13 pada  background-color:#03FC13;
    Selamat mencoba, dan apabila tidak berfungsi sobat dapat berkomentar disini, jangan membanting komputer sobat yah..!

    Diposting oleh Hasyim Ibnu hasbullah di 13.14
    Label:

    0 komentar:

    Posting Komentar

    Langganan: Posting Komentar (Atom)
     

    Mengenai Saya

    Hasyim Ibnu hasbullah
    Lihat profil lengkapku

    Daftar Blog Saya

    Pengikut

    © 2009 Free Blogger Template powered by Blogger.com | Designed by Amatullah |Template Design