Membuat Efek Accordion Sidebar dengan JQuery

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Membuat Efek Accordion Sidebar dengan JQuery dan semoga artikel ini bermanfaat.


Membuat Efek Accordion sidebar dengan JQuery, buat sobat yang suka utak-atik template mungkin cara ini pantas untuk dicoba, selain dapat memperkecil tampilan sidebar membuat efek accordion sidebar ini akan sedikit mempercantik blog karena dengan efek accordion maka yang akan ditampilkan secara utuh hanya satu widget saja sementara yang lain akan tersembunyi. 
Membuat Efek Accordion sidebar dengan JQuery ini bisa sobat terapkan pada blogspot dan yang harus diperhatikan adalah ID dari sidebar sobat, karena setiap template mungkin ada perbedaan. supaya sobat bisa tau ID dari sidebar sobat sobat bisa menggunakan ad-on firebug pada mozilla. sebagai contoh pada tutorial ini ID sidebarnya adalah " rsidebar-wrapper " dengan Header H2. nah mungkin buat yang lain ID tersebut bisa sidebar, right-sidebar atau buat yang menggunakan template blogspot baru IDnya adalah sidebar-right-1, oleh karena itu sobat sesuaikan saja. untuk header H2 mungkin kalau belum diganti akan sama atau bila sudah diganti sesuaikan saja dengan headernya. untuk contohnya lihat sidebar blog ini.

Berikut Caranya:
  • Seperti biasa saja pada saat ngedit template kemudian sobat cari kode ]]></b:skin> kemudian letakan kode CSS dibawah ini tepat diatasnya.
  • Dan masih pada halaman yang sama cari kode </head> kemudian letakan kode Javascript tepat diatasnya.
#rsidebar-wrapper h2 {
  margin: 0 2px;
  padding:3px 7px 3px 13px;
  background-color:#111;
  border-color:#444 transparent #222;
  border-style:solid;
  border-width:1px 0;
  font:normal bold 12px "arial", Trebuchet, sans-serif;
  color:#fff;
  text-transform:uppercase;
}
#rsidebar-wrapper h2.active span {
  padding-right:10px;
  background:#00ff00;
}
#rsidebar-wrapper h2:hover {
  margin: 0 2px;
  padding:3px 7px 3px 13px;
  background:#ddaa6e;
  font:normal bold 12px 'Trebuchet MS', Trebuchet, sans-serif;
  color:#00FF00;
  text-transform:uppercase;
  border-bottom:1px solid #404040;
}
#rsidebar-wrapper h2.active {
  background-color:#052605;
  color:#00ff00;
  box-shadow:0 0 3px black;
  border-color:#555 transparent #222;
  border-style:solid;
  border-width:1px 0;
}
#rsidebar-wrapper .widget {
  margin:0 0;
  padding:0 0;
}
#rsidebar-wrapper .widget-content {
  margin-top:5px;
  padding:3px 5px 3px 0px;
}
#rsidebar-wrapper .widget-content ul li {
  list-style:circle;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  padding: 3px 5px 3px 0;margin-left:0px;
}
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('#rsidebar-wrapper .widget-content').hide();
    $('#rsidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
    $('#rsidebar-wrapper  h2').css('cursor', 'pointer').click(function() {
        if($(this).next().is(':hidden')) {
            $('#rsidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>

Sekali lagi perhatikan kode yang berwarna merah dan sesuaikan dengan ID sidebar blog sobat.
Kalau sudah selesai silahkan simpan template sobat dan lihat hasilnya.
Dan apabila pada template sobat sudah terpasang JQuery yang digaris bawah sobat hapus saja.
Buat sobat yang berhasil memasang tutorial ini agar tampilan sidebarnya lebih keren sobat bisa membuat sidebar melayang atau auto slide sehingga sidebar akan mengikuti scroll contohnya pada blog ini,, silahkan baca di Cara Membuat Sidebar Auto Slide Melayang

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Membuat Efek Accordion Sidebar dengan JQuery kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered
feedburner

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 19:49

26 komentar :

  1. wah boleh juga nih gan dicoba, biar blog ane makin cantik. :D

    BalasHapus
  2. bang kalau cara memasang Histats di pojok bawah blog gmana caranya bang ,,,,???

    BalasHapus
  3. punya saya ga sukses, kenapa iya mas? ID sidebar punya saya kan masih sidebar-right-1, nah yang perlu saya ganti cuma rsidebar-wrapper h2 itu kan dengan sidebar-right-1? mohon di balas mas, pengen banget buat kayak punya mas ini, simple banget dan loading nya cepat, terima kasih banyak

    BalasHapus
  4. Gila keren banget blognya .. ajib kalau dipasang jquery semua :)

    BalasHapus
  5. Hey Thanks for sharing this valuable information with us. I will come back to your site and keep sharing this information with us.
    Best Regards - www.office.com/setup
    www.office.com/setup
    www.office.com/setup

    BalasHapus
  6. I found this post quiet interesting and exciting, and the author of this post has explained everything in detail that is the best thing that i liked about this post. I am looking forward to such great posts.
    office.com/setup | norton.com/setup | mcafee.com/activate

    BalasHapus
  7. I found this post quiet interesting and exciting, and the author of this post has explained everything in detail that is the best thing that i liked about this post. I am looking forward to such great posts.
    office.com/setup | norton.com/setup | mcafee.com/activate

    BalasHapus
  8. Look at to the Sign in screen in the YouTube application and stay on this screen until you've completed the remainder of the systems. Visit youtube.com/activate on your PC or phone. Sign in when affected. Incitation code and sign in Navigate to the Sign in screen in the YouTube application and stay on this screen until you've completed the remainder of the strategies. Visit youtube.com/demand on your PC or phone. Sign in when affected.Click Here for more details.

    BalasHapus
  9. You share a piece of awesome information and also see my post…
    Norton Antivirus, malware protection, and more features to help protect your device. Norton.com/setup AntiVirus Plus and Norton 360 plans include Norton setup Antivirus and malware protection, plus an array of additional features to help protect your PCs, Mac, Android and iOS devices, including. http://nortoncomnortonnorton.com

    BalasHapus
  10. http://www-mcafeeactivate.us/
    mcafee.com/safe
    Mcafee Antivirus
    Today most of people from all over the world are using the internet from different devices like PC, laptops or smartphones, etc. The internet has given birth to many online crimes, known as cyber-crimes, created by expert hackers. This program is designed to restrict this kind of activity.
    mcafee.com/safe

    BalasHapus
  11. Howdy, I’m Jhon. I’m a designer living in California, MD. I am a fan of technology, web development, and football. I’m also interested in swimming and dogs. Visit@☞ Blogging Kaise Kare| Earn money online

    BalasHapus
  12. Norton setup now is easy to installation on your PC. Although Norton setup's internet site www.norton.com/setup presents all the publications for installation. It is referred to that some customers face trouble whilst putting in Norton antivirus.Norton with the aid of Symantec Corporation comes with a warranty to shield each your on line and offline world. Norton takes into consideration of all the element of the safety of pc to enhance its performance.Even Norton setup is easy and interactive, simply to make certain that person would not face any hassle at some stage in Norton installation.

    The latest version of Norton.com/Setup is equipped with:

    Norton 360
    Norton Antivirus
    Norton Internet Security

    BalasHapus
  13. Norton antivirus is an anti virus or malware software products devloped to provide security which is compatible in all windows. They are actually very good in this for more information. Visit our website

    norton.com/setup
    norton.com/setup

    BalasHapus
  14. This is very informative post, good work, i like this content and wish to read more from you. thanks for such a informative post. i also like to share some useful links

    www.office.com/setup
    office.com/setup

    BalasHapus

  15. Thanks to author of post for such a great information.I like your blog post and subscribe your blog for all your future post.i have also some links which i think is useful for some users
    norton.com/setup,
    www.norton.com/setup.

    BalasHapus
  16. Great information ! I thankful to author of this blog who sharing such a useful information, I also subscribe your blog for all future post. I have also share some useful links here.

    www.mcafee.com/activate.
    Mcafee.com/activate

    BalasHapus
  17. Great information, i was searching of this kind of information, thankyou very much for sharing with us. i also like to share some useful links here

    norton.com/setup
    www.norton.com/setup.

    BalasHapus
  18. I really happy found this website eventually. Really informative and inoperative, Thanks for the post and effort! Please keep sharing more such blog.

    norton.com/setup

    spectrum email login

    aolmail password recovery

    kaspersky antivirus download

    BalasHapus

  19. You're a talented blogger. I have joined your bolster and foresee searching for a more noteworthy measure of your amazing post. Also, I have shared your site in my casual networks!


    mcafee.com/Activate
    mcafee.com/Activate
    Office.com/setup
    Office.com/setup
    Norton.com/setup

    BalasHapus
  20. Amazon Originals just as well known motion pictures and TV appears. Watch whenever, anyplace. The Prime Video application is accessible on a scope of TVs, Amazon gadgets, cell phones, Blu-beam players, games consoles and spilling media gadgets. Prime Video from an incredible determination of mytv, Movies and more at regular low costs. Get the suppprt primevideo.com/mytv

    BalasHapus
  21. I really happy found this website eventually. Really informative and inoperative, Thanks for the post and effort! Please keep sharing more such blog.
    norton online help

    spectrum email login

    kaspersky activation

    BalasHapus
  22. I really happy found this website eventually. Really informative and inoperative, Thanks for the post and effort! Please keep sharing more such blog.
    norton online help

    spectrum email login

    kaspersky activation

    BalasHapus
Silahkan Tinggalkan jejak sobat, bila mau menggunakan emotion silahkan klik emotionnya kemudian copy dengan ctrl+c dan paste kodenya didalam kotak komentar...

close
GUESTBOOK
Google PageRank Checker Powered by  MyPagerank.Net
backlink
Dashboard
| Copyright © 2012 |
| Belajar Komputer Melalui Internet |
| Desain by: Abdul Kohar | Powered by: Blogger |