Teguh Bagus of Veterinary Medicine site v.2

Excellence with Morality

__Sertifikasi dan Prestasi__

    Standart ISO 9001:2008 Kepada Universitas Airlangga oleh British Certification International

_Berbagi tak pernah Rugi_

    Teguh Bagus of Veterinary Medicine site v.2

    ____Hakikat Manusia____

    .: Barang siapa mengenal dirinya, maka ia akan mengenal TuhanNya. Seperti bahasan kita yaitu Awwal- uddin Ma'rifatullah adalah... :. more

    ∞ Akun Facebook & Twitter Kami ∞

..:: Selamat Buat para Pemenang lomba web & blog Mahasiswa Universitas Airlangga Tahun 2015; 1.Mei Budi Utami [FST'12] | 2.Mita Erna Wati [FK'12] | 3.Teguh Bagus Pribadi [FKH'12] | 4.M. Roihan Hanafi [FISIP'12] | 5.Ari Zulaicha [FISIP'12] | 6. Muziburrahman [FPK'14] | => Terimakasih atas kunjungan Anda, jangan lupa kalau mau copy/paste harap cantumkan sumbernya, by : Teguh Bagus Pribadi, http://teguhbaguspribadi-fkh12.web.unair.ac.id, dan Blog ini DIPERBAHARUI sebulan 4x karena kesibukan Perkuliahan ::..

Membuat Slide Show Hide Tab Widget Kolom Sidebar (Unair)

diposting oleh teguhbaguspribadi-fkh12 pada 05 June 2013
di Kumpulan Tutorial Blog - 0 komentar

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

Tinggalkan Komentar

Nama :
E-mail :
Web : tanpa http://
Komentar :
Verification Code :