Cara Simpel Membuat Sidebar Accordion

Cara Simpel Membuat Sidebar Accordion

Dengan menggunakan metode Accordion Sidebar akan lebih menghemat penggunaan ruang pada template, karena dengan menggunakan metode tersebut, sidebar yang tadinya menjulur panjang kebawah akan tampak lebih ringkas karena hanya judulnya saja yang akan terlihat, dan apabila judul tersebut di klik maka akan muncul content yang ada didalam widget tersebut.
Untuk memasangnya cukup simple hanya menggunakan 2 cara, simak baik baik :

1. Masuk Dasboard Blogger, lalu pilih Template dan klik lagi Edit HTML
2. Tekan
CTRL
+
F
dan cari kode </style> atau ]]></b:skin> .
3. Salin CSS berikut dan Letakkan diatas kode yang anda temukan tadi

    .sidebar-wrapper h2 {
    position: relative;
    color: #BBB;
    margin: 1px 0 0;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding:4px;
    background-color:#003366;
    cursor:pointer;
    background-image: url('data:image/gif;base64,R0lGODlhEAAKAHAAACH5BAEAAAIALAAAAAAQAAoAgQAAAJ6engAAAAAAAAIVlI9pob3sUpgRTVrFxXFnzVWh+BkFADs=');
    background-repeat: no-repeat;
    background-position: right center;
    }
    .sidebar-wrapper h2.headactive {
    background-image: url('data:image/gif;base64,R0lGODlhFAAGAHAAACH5BAEAAAIALAAAAAAUAAYAgQAAAC+k0wAAAAAAAAIPlI+pwd26HINQUvou1qgAADs=');
    }

4. Sekarang cari kode </body>, salin Javascript dibawah ini dan letakkan diatas kode </body>

    $(function () {
        $('.sidebar-wrapper .widget-content').hide();
        $('.sidebar-wrapper h2:first').addClass('headactive').next().slideDown('slow');
        $('.sidebar-wrapper h2').click(function () {
            if ($(this).next().is(':hidden')) {
                $('.sidebar-wrapper h2').removeClass('headactive').next().slideUp('slow');
                $(this).toggleClass('headactive').next().slideDown('slow');
            }
        });
    });


5. Pastikan blog anda sudah terpasang plugin JQuery bila belum ada silahkan cari kode </head> , dan letakkan JQuery dibawah ini tepat diatas kode </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

1 Response to "Cara Simpel Membuat Sidebar Accordion"

  1. BLOG nya menarik sekali keren banget ka kunjungi yang satu ini yaaa biar kalian ga bingung dalam menentukan masalah GEDGET
    http://zapplerepair.com/iPhone-6-lcd-ada-bayangan-hitam-diganti-baru-juga-sama.html

    ReplyDelete