Minggu, 12 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

Membuat Slide Show Hide Tab Widget Kolom Sidebar

Dan kebetulan sekali, pada artikel Plugin Spoiler Blogger Blogspot, ada komentar dari mas Tio Aldo Nugraha

Komentar Pengunjung :.
maap mbak, pertanyaan saya OOT dari topik postingan ini..

Mbak, kalo cara membuat hide-show tab itu gmna ya?
kayak tab blog mbak.. kalo di klik tab-nya langsung buka, yang lain nutup..

Itu gmna ya? Mkasih jika udah jawab.. :)

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

Membuat Slide Show Hide Tab Widget Kolom Sidebar Rating: 4.5 Diposkan Oleh: ana sriwahyuni

18 komentar:

  1. Sudah saya lihat Mbak pada contoh blog ini,khusus untuk sidebar yang terbilang kecil mode slide show pada kode diatas sudah membuat sidebar jadi lebih menarik apalagi modenya saat diklik yakni mode sloe show gitu.Mantap Mbak.

    BalasHapus
  2. Wah ternyata dikabulin juga pertanyaan saya.. Makasih banyak ya mbak tentang tutorialnya.. Moga makin maju blognya.. Sekali lagi makasih ya mbak Ana.. :)

    kalo smpet Visit back ke blog saya ,ya.. :D

    BalasHapus
  3. mbak, tapi kalo buat slide show hide tab-nya hanya untuk side tab tertentu ajh gmana ya mbak? alias gak smuanya gtu..

    BalasHapus
    Balasan
    1. yang ini sudah berfungsi hanya utk satu side tab mas Tio, yg digunakan hanya id #sidebar-wrapper saja, jika di blognya mas Tio ada beberapa id sidebar, spt #sidebar-atas, #sidebar-bawah, fungsikan saja id-id sidebar tersebut spt yg telah saya contohkan diatas

      Hapus
    2. ingat, fungsi dari id-id sidebar adalah sebagai tempat meletakkan widget-widget blog (teks atau html/javascript). contoh milik saya, widget ARTIKEL TERBAIK, FACEBOOKERS, SAHABATKU, DIREKTORI berada dalam 1 id sidebar yaitu #box-sidebarbottom

      Hapus
    3. jadi mbak, kalo misalnya ada dua tab dalam 1 sidebar, dan kita cuman pengen jadiinnya show-hidenya itu cuman 1 bar aja, gak bisa ya?

      Hapus
    4. tetep bisa, tinggal diatur sesuai keinginan mas Tio aja..

      Hapus
    5. gimana ya mbak..? Hhee.. Maap ya merepotkan

      Hapus
  4. Makasi Mbak.. Sangat simpel dan elegant jadi nya..

    BalasHapus
  5. Mantapp mbak tutorialnya :)

    BalasHapus
  6. sangat membantu,, dan memahami kriteria pembaca,, hmmm
    thanks sobat.. sediain follow site donk,, biar gua bisa join..

    BalasHapus
  7. mbak, kok punyaku gak bisa langsung nutup otomatis ya pas di refresh -_-
    coba cek hxxp://artikel-kecil.blogspot.com/

    kok aneh ya-_-

    BalasHapus
  8. wah, kayaknya bagus mbak. tapi setelah dicek ternyata gak sesuai dengan template saya. mau saya edit tapi nantinya malah gak sopan, mengubah kode punya orang. saya simpan di bookmark aja dulu. sapa tau nanti berguna :D

    BalasHapus
    Balasan
    1. kalau di template terdapat kode yang memiliki fungsi yang sama maka kode tersebut akan bentrok dan tidak akan bekerja tapi jika kode mau di edit, silahkan yang penting kode tersebut bisa bekerja di template blognya mas Surya..

      Hapus
  9. boleh juga ini bu .. izin praktek ahh

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia