Adalah blognya mas Taufik Nurrohman yang membahas Tip: Membuat Sidebar Akordion dengan JQuery. Didalam artikel blognya tersebut, saya juga telah meninggalkan komentar tentang Slide Show Hide Tab Widget Kolom Sidebar ini karena tip yang diberikan mas Rohman tersebut sangat mudah dipahami
Seperti apa contoh Slide Show Hide Tab Widget Kolom Sidebar ini? Contohnya ada di sidebar blog saya ini atau anda bisa melihat blognya mas Rohman pada link diatas :) atau pada contoh tampilan gambar berikut ini
Lalu bagaimana cara membuat slide show hide tab widget kolom sidebar? Berikut caranya
- Buka menu Edit HTML blog anda
- Cari kode-kode yang ada pada element sidebar blog. Misalnya;
#sidebar-wrapper
#sidebar-inner
#sidebar-top
#sidebar-bottom
#sidebar-atas
#sidebar-bawah
#sidebar-kanan
#sidebar-kiri
Jika tidak, silahkan temukan kode sidebar blog anda sendiri melalui di Cara mengetahui kode template - Pada contoh ini, saya menggunakan element sidebar dengan kode #sidebar-wrapper dan pada beberapa template contoh kode #sidebar-wrapper seperti berikut ini
#sidebar-wrapper {background-color:#333;border:4px solid #ddd;width:350px;float:right;word-wrap:break-word;overflow:hidden;margin:2px;padding:0;}
Jika kode #sidebar-wrapper template blog anda tidak seperti contoh diatas, silahkan sesuaikan karena pada tahap selanjutnya jika kode #sidebar-wrapper tidak cocok maka Slide Show Hide Tab Widget Kolom Sidebar ini tidak akan bekerja
#sidebar-wrapper h2 {cursor:pointer;background-color:#333;background-image:-webkit-linear-gradient(top,#333,#3c3c3c); background-image:-moz-linear-gradient(top,#333,#3c3c3c);background-image:-ms-linear-gradient(top,#333,#3c3c3c);background-image:-o-linear-gradient(top,#333,#3c3c3c);background-image:linear-gradient(top,#333,#3c3c3c);border:none;border-top:1px solid #444;border-bottom:1px solid #222;font:12px arial,verdana,trebuchet ms;font-weight:600;text-align:left;font-style:normal;line-height:1.3em;color:#f2f2f2;text-shadow:1px 1px 1px #222;margin:0;padding:5px;}
#sidebar-wrapper .widget {margin:0;}
#sidebar-wrapper .widget-content {margin:0;padding:5px;}
#sidebar-wrapper ul {list-style-type:none;color:#ddd;margin:0;padding:0}
#sidebar-wrapper ul li {background:url(http://lh6.ggpht.com/_7Y9pl24WpQY/SuHhL1fZSMI/AAAAAAAAB_w/engBWuVJmlo/link_arrow_thumb%5B1%5D.png) no-repeat 0px 5px;margin:0px 0px 5px;
padding:0 0 5px 15px}
#sidebar-wrapper ul li a:hover {margin:0px 0px 5px;padding:0px}
.sidebar a:link {color:#41ADB8;text-decoration:none}
.sidebar a:visited {color:#41ADB8;text-decoration:none}
.sidebar a:hover {color:#B41ADB8;text-decoration:underline}
.sidebar section {margin:0;padding:0;} - Jika sudah, langkah selanjutnya adalah menyalin kode script berikut ini sebelum </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>
Jika template blog anda sudah terpasang script jQuery, maka hapus kode script jQuery diatas
<script type='text/javascript'>
//<![CDATA[
$(function() {
$('#sidebar-wrapper .widget-content').hide();
$('#sidebar-wrapper h2').css('cursor', 'pointer').click(function() {
$('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
if ($(this).next().is(':hidden')) {
$(this).addClass('active').next().slideDown('slow');
} else {
$(this).removeClass('active').next().slideUp('slow');
}
});
});
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>
Backlink Please !
URL |
Code For Forum |
HTML Code |
0 komentar:
Posting Komentar