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>

Tweet