NEWS
Loading...
  • Posted by : Johanes Djogan 26 Nov 2010

    Memasang Accordion Dengan Jquery dan Css
    sobat udah pernah liat blog teman sobat sidebar'a bisa buka,lalu menutup??ini dia trik'a namanya Accordion,kalau sobat belum tau seperti apa Accordion,sobat bisa lihat contoh'a disini dengan Accordion kamu bisa mengurangi
    tempat blog kamu.trik ini tdk akan memberatkan blog kq.ok,dah langsung aja saya kasih tau cara'a n_n



    Pertama,masukan kode HTML ini ke blog kamu...
    isi widget yang kamu iginkan.contoh:bukutamu,blogroll,link dan sebagai'a

    <div class="container">
    <h2 class="acc_trigger"><a href="#">Menu1</a></h2>
    <div class="acc_container">
    <div class="block">


    Isi widget/text kamu disini

    </div>
    </div>

    <h2 class="acc_trigger"><a href="#">Menu2</a></h2>
    <div class="acc_container">
    <div class="block">


    Isi widget/text kamu disini

    </div>
    </div>
    </div>

    kemudian,masukan CSS ini di template sobat

    h2.acc_trigger {
    padding: 0;
    margin: 0 0 5px 0;
    background: url(http://www.sohtanaka.com/web-design/examples/accordion/h2_trigger_a.gif) no-repeat;
    height: 46px;
    line-height: 46px;
    width: 500px;
    font-size: 2em;
    font-weight: normal;
    float: left;
    }
    h2.acc_trigger a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 0 0 0 50px;
    }
    h2.acc_trigger a:hover {
    color: #ccc;
    }
    h2.active {background-position: left bottom;}
    .acc_container {
    margin: 0 0 5px; padding: 0;
    overflow: hidden;
    font-size: 1.2em;
    width: 500px;
    clear: both;
    background: #f0f0f0;
    border: 1px solid #d6d6d6;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    }
    .acc_container .block {
    padding: 20px;
    }


    Note:url gambar bisa kamu ganti sesuai kebutuhan.atau dapat diganti dengan CSS 3

    Memasang Accordion Dengan Jquery dan Css
    Memasang Accordion Dengan Jquery dan Css


    setelah itu,copy paste script ini di bawah kode ]]></b:skin>


    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

    //Set default open/close settings
    $('.acc_container').hide(); //Hide/close all containers
    $('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

    //On Click
    $('.acc_trigger').click(function(){
    if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
    $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
    $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
    }
    return false; //Prevent the browser jump to the link anchor
    });

    });
    </script>



    selesai deh...
    selamat mencoba n_n

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

    1. Wah keren nich infonya, saya coba dulu mudah - mudahan cocok

      BalasHapus
    2. Modif memang bikin Ramping Blog....Keren Ni gan

      BalasHapus
    3. wawww blognya keren sobb..
      mksi infonya bermanfaat...

      BalasHapus
    4. wow...ini bikin berat blog gak gan..takutnya bikin berat...but nice trick

      BalasHapus
    5. ok gan,silakan dicoba n_n
      asal jangan gunakan script terlalu banyak,ga akan berat gan

      BalasHapus
    6. Komentar ini telah dihapus oleh pengarang.

      BalasHapus
    7. seep kk jo , sangat keren , eh kk jo tutorial yg fullpost itu mna hayo ?? n_n

      BalasHapus
    8. Ok kan saya coba makasih infonya gan...dah tah folow...

      BalasHapus
    9. Wah keren nih artikelnya, makasih sob saya coba dlu ya.

      BalasHapus
    10. manthap gan,.saya tunggu artikel terbarunya

      BalasHapus
    11. jo itu masukin HTML nya langsung ke edit Html ?

      BalasHapus
    12. biar gampang masukin widget'a,di elemen halaman aja bro n_n

      BalasHapus
    13. mf ,klo masukin kode cssnya di edit html bkn ???

      BalasHapus
    14. LINK contohnya EROR yah? ke redirect ke 80 apa gitu :)

      BalasHapus
    15. Iya,maaf sumber'a uda expired=="
      untuk contoh sbenar'a ada di template Uchiha Sasuke :)

      BalasHapus
    16. Terima kasih infonya, Bang Jo... Tp ada yg ingin saya tanyakan... Bagaimana cara membuat accordion sidebar seperti yg ada di tema DeSu2 dan DAL?

      BalasHapus

    "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 -