Simple jQuery Accordion Pada Blogger

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Tutorial kali ini saya akan membahas tentang Simple jQuery Accordion Pada Blogger. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu kita langsung saja menuju ke TKP

Simple jQuery Accordion Pada BloggerKlik disini untuk melihat demo Simple jQuery Accordion Pada Blogger

1. Masuk ke akun blogger anda
2. Kemudian masuk ke Rancangan
3. Selanjutnya Edit HTML
4. Jangan Lupa centang Expand Template Widget
Expand Template Widget
5. Copy kode ini

/* First Level UL List */
#accordion {
margin:0;
padding:0; 
list-style:none;
}
 
#accordion li {
width:267px;
}
 
#accordion li a {
display: block;
width: 268px;
height: 43px;  
text-indent:-999em;
outline:none;
}
 
/* Using CSS Sprite for menu item */
#accordion li a.popular {
background:url(http://i766.photobucket.com/albums/xx310/Ikhfar/menu.jpg) no-repeat 0 0;
}
 
#accordion li a.popular:hover, .popularOver {
background:url(http://i766.photobucket.com/albums/xx310/Ikhfar/menu.jpg) no-repeat -268px 0 !important;
}
 
#accordion li a.category {
background:url(http://i766.photobucket.com/albums/xx310/Ikhfar/menu.jpg) no-repeat 0 -43px;
}
 
#accordion li a.category:hover, .categoryOver {
background:url(http://i766.photobucket.com/albums/xx310/Ikhfar/menu.jpg) no-repeat -268px -43px !important;
}
 
#accordion li a.comment {
background:url(http://i766.photobucket.com/albums/xx310/Ikhfar/menu.jpg) no-repeat 0 -86px;
}
 
#accordion li a.comment:hover, .commentOver {
background:url(http://i766.photobucket.com/albums/xx310/Ikhfar/menu.jpg) no-repeat -268px -86px !important;
}
 
 
/* Second Level UL List*/
#accordion ul {
background:url(http://i766.photobucket.com/albums/xx310/Ikhfar/bg.gif) repeat-y 0 0;
width:268px;
margin:0;
padding:0;
display:none;  
}
 
#accordion ul li {
height:30px;
}
 
/* styling of submenu item */
#accordion ul li a {
width:240px;
height:25px;
margin-left:15px;
padding-top:5px;
border-bottom: 1px dotted #777;
text-indent:0;
color:#ccc;
text-decoration:none;
}
 
/* remove border bottom of the last item */
#accordion ul li a.last {
border-bottom: none;
}

6. Dan letakkan/paste di atas kode

</b:skin>

7. Tambahkan framework jQuery.
   INGAT, jika pada template anda sudah terdapat framework jQuery, maka kode di bawah ini TIDAK PERLU di tambahkan.
   Jika belum terdapat framework jQuery, maka copy kode di bawah ini

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

kemudian letakkan di atas

</head>

8. Selanjutnya tambahkan script di bawah ini

<script type="text/javascript">
$(document).ready(function () {
         
    $('#accordion li').click(function () {
 
        /* FIRST SECTION */
 
        //slideup or hide all the Submenu
        $('#accordion li').children('ul').slideUp('fast'); 
             
        //remove all the "Over" class, so that the arrow reset to default
        $('#accordion li > a').each(function () {
            if ($(this).attr('rel')!='') {
                $(this).removeClass($(this).attr('rel') + 'Over'); 
            }
        });
             
        /* SECOND SECTION */   
             
        //show the selected submenu
        $(this).children('ul').slideDown('fast');
             
        //add "Over" class, so that the arrow pointing down
        $(this).children('a').addClass($(this).children('li a').attr('rel') + 'Over');         
 
        return false;
    });
     
});
</script>

9. Letakkan di atas

</head>

10. Simpan Template
11. Setelah disimpan, masuk ke Elemen Laman
12. Tambah Gadget
13. Pilih HTML/Javascript
14. Masukkan kode dibawah ini pada kotak kontent

<ul id="accordion">
    <li>
        <a href="#" class="popular" rel="popular">Popular Post</a>
        <ul>
            <li><a href="#">Popular Post 1</a></li>
            <li><a href="#">Popular Post 2</a></li>
            <li><a href="#" class="last">Popular Post 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="category" rel="category">Category</a>
        <ul>
            <li><a href="#">Category 1</a></li>
            <li><a href="#">Category 2</a></li>
            <li><a href="#" class="last">Category 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="comment" rel="comment">Recent Comment</a>
        <ul>
            <li><a href="#">Comment 1</a></li>
            <li><a href="#">Comment 2</a></li>
            <li><a href="#" class="last">Comment 3</a></li>
        </ul>
    </li>
</ul>

15. Simpan

Baca juga artikel Cara Membuat Artikel Populer/Popular Post

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait