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

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

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 2013-05-12T14:25:00+08:00 Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni