-=_Ingat Waktu_=-

:Einzelkind™ Is Valid HTML5

follow

FOLLOW THIS BLOG

-= Radio =-

Sabtu, 25 Mei 2013

Membuat Slide Show Hide Tab Widget Kolom Sidebar

Membuat Slide Show Hide Tab Widget Kolom Sidebar - Sebelum saya mengganti template blog ini, saya memiliki ide untuk template yang baru khususnya pada bagian sidebar. Bagaimana agar sidebar blog saya tersebut memiliki tampilan yang minimalis? Saya pun mencarinya di Google dengan kata kunci tab slide sidebar, spoiler tab sidebar, tab view sidebar namun semua yang saya kunjungi tidak sesuai dengan keinginan saya, rata-rata menampilkan artikel tentang tab view! Akhirnya saya pun mengunjungi sebuah blog yang membahas tentang segala tip trik lengkap seputar Blogger khususnya tentan CSS, HTML, jQuery, dan JavaScript, dan menemukan cara Membuat Slide Show Hide Tab Widget Kolom Sidebar ini

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

Membuat Slide Show Hide Tab Widget Kolom Sidebar

Lalu bagaimana cara membuat slide show hide tab widget kolom sidebar? Berikut caranya
  1. Buka menu Edit HTML blog anda
  2. 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
  3. 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;}
    #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 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
  4. 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'/>
    <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>
    Jika template blog anda sudah terpasang script jQuery, maka hapus kode script jQuery diatas
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>
Bagaimana? mudah bukan? Jika tertarik untuk memasangnya di blog anda, silahkan pelajari artikel ini dan jika ada yang mau ditanyakan monggo mas-mas semua berkomentar untuk artikel ini Membuat Slide Show Hide Tab Widget Kolom Sidebar

0 komentar:

Posting Komentar

 

Banner 468x60

Protected by Copyscape Duplicate Content Checker DMCA.com

Archieve