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

45 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. 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
  6. 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
  7. 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
  8. https://azzam10.blogspot.com/2012/09/membuat-efek-accordion-sidebar-dengan-jquery.html?showComment=1588596474312#c504829617937421026

    BalasHapus
  9. Movierulz.plz provides a quick downloading server to its visitors. Movies are available in all qualities on Movierulz2 ms. ON Movierulz2 ms website, you will get Movierulz plz 2020 Telugu, Bollywood, Hollywood, Movierulz2 Malayalam, Kollywood, Tollywood Movies and you can download free. It is very easy to access movies on Moviesrulz2 Ms site.

    Visit more :- increase your web traffic | Make money online | JEE examinations | gestational surrogacy process | HVAC system | Glass 2019 Movie

    BalasHapus
  10. Online gaming has gone a long way in the last few years. Nowadays, there’s much more behind online gaming tournaments than entertainment. These things are being held across the world, and they’re all about competitiveness and winning cash prizes. We’re not talking about tiny sums people often associate with the gaming scene.

    Visit more :- IAS exam | Mumbai Metro | moo business card | Best Free Antivirus | Rdxhd | travel to Ontario | fci Manager exam

    BalasHapus
  11. It is important that students should have a great command on the basic concepts which will teach them in the CBSE 12th commerce classes. It is also important that students should have proper guidance during their preparation.

    Visit more :- QuickBooks Online | Google Operators | Engineering Students | Wedding Anniversary | HR assignment | Adopt Accounting Software | Real Estate Home Selling

    BalasHapus
  12. There are many sites available on the Internet which publishes all the motion pictures on their delivery date. Skymovieshd is the best piracy website famous for providing Bollywood, Hollywood movies for free. You can view and download the latest Bollywood, Telugu, Malayalam, Tamil, Marathi Hollywood, Bengali, Bhojpuri, Kannada movies through this website. There is a choice to search the latest web series by episode or season-wise.

    Visit more :- community lifestyle | SSC Chsl | Heart Problems | KickAss Proxy | Increase Battery | ApunKaGames | bridal makeup artist | NEWS NEGATIVELY IMPACTS

    BalasHapus
  13. As mentioned above, a luxury watch is an investment that makes it more

    valuable than the rest of your other belongings. It can symbolize your triumph and success in life. It tells the story of how you started in your career up to the time

    when you can purchase a timepiece that costs a fortune.

    Visit more :- COMMERCIAL SOLAR PANEL

    | Blogging Software | BEST INTERNET SECURITY SOFTWARE | Gestational

    Surrogacy
    | E-COMMERCE PLATFORMS | Travel App | Fashion Bloggers

    BalasHapus
  14. As we can see that there are millions of people are always interested in downloading the Tamil movies that too in HD quality. If you are the one who is looking for the

    same, then without going for a second thought, you can always move ahead with kuttymovies site. Yes, this could be the best platform in terms of offering the latest movies to download at any time.

    Vistit more :- Working Remotely | Kinesiology Taping | Kidney Stone | UTube | Kinky Hair Curly | Birthday Cake Recipe | MOBILE-FRIENDLY WEBSITE | GM DIET

    PLAN

    BalasHapus
  15. The classic TV antenna is another perfect solution to stream NFL playoffs season without any

    hassle. Most of them will think about the classic antenna connection for watching NFL games. No more fear. There are numerous changes with the antenna and make use of

    the parent’s basement for adjustments.

    Visit more :- Car Insurance | Marketing Strategy | Birthday Party And Surprise | Kate Winslet | Azure Data Platform | Secured PDF Files | Different Prominent Individuals | PUBLIC EVENTS

    BalasHapus
  16. There is just nothing like staring at a bit of quartz, opal or pearl, especially when you realise that they are materials that come from the very ground we stand on .

    It consequently makes a lot of sense, then, that online slot developers get massively excited over the precious gem theme, something that Yggdrasil have taken to the

    next level with the impressive Gem Rocks slot game.

    Visit more :- Immunity System | Switch Mods Vapors | Herbal Snuff | Ethical Hacking | Khatrimazafull | Fort Wayne | Nicotine Pouches

    BalasHapus
  17. Even if your biggest reason for not getting health insurance is your young age and good health, there’s no guarantee that you won’t fall ill. Or you could be involved in an accident that causes you severe injuries. Given the high healthcare costs, you’ll be be faced with a massive bill, which, without any health plan, will force you to pay out of pocket.

    Visit more :- CAREER IN CANADA | Gomovies | Cucumber Benefits | Extramovies | HOME LOAN | F95ZONE

    BalasHapus
  18. Putting together security checkpoints is another effective way of controlling public events

    through security and surveillance. You can have security personnel walking throughout the area. You should also have security making sure that only invited guests or

    guests with tickets coming to the event.

    Visit more :- movierulz | kuttymovies | 7starhd | moviesflix | khatrimazafull

    BalasHapus

  19. The final day of the GM diet plan allows you to have fruits, vegetables and rice. An orange or a bowl of watermelon

    with a bowl of brown rice can be eaten for breakfast. For lunch, you can consume a glass of fresh fruit juice without sugar and a bowl of brown rice. Finally for

    dinner, you can have a bowl of raw or cooked vegetables with a bowl of brown rice.

    Visit more :- Bathroom Accessories | EV charging | CLOUD COMPUTING | Nicotine Pouches | Cigars Online

    BalasHapus
  20. While GuidoMaggi excellent elevator shoes undoubtedly have many benefits and certainly increase

    the wearer’s height, many people ask why they should care about being taller and improving their posture. There are many benefits of being taller for men in

    particular. It is widely understood that women find taller men significantly more attractive and smarter, which boosts their chances of finding the perfect partner.

    For many women, a man’s height is as important, if not more important than his looks.

    Visit more :- Exhaust System | Khatrimazafull | EXTRATORRENTS | Memory

    Care
    | Real Money

    BalasHapus
  21. The outlook is not just quite believing but its offering of movies make people definitely believe in having Good Friday night and lazy Sunday. So yes, those who are going to pick up Movierulzthey are surely going to get an experience with the kind of they can suggest others too. It is that good, ‘try it and you will get to know by yourself.

    Visit more :- Thanksgiving This Year | Playtamil Website 2020 | Robert De Niro | Faking GPS on iOS | Sdmoviespoint | CLOUD COMPUTING PLATFORM | Automotive Franchise

    BalasHapus
  22. Putting together security checkpoints is another effective way of controlling public events through security and surveillance. You can have security personnel walking throughout the area. You should also have security making sure that only invited guests or guests with tickets coming to the event.

    Visit more :- movierulz | kuttymovies | 7starhd | moviesflix | khatrimazafull

    BalasHapus
  23. The final day of the GM diet plan allows you to have fruits, vegetables and rice. An orange or a bowl of watermelon with a bowl of brown rice can be eaten for breakfast. For lunch, you can consume a glass of fresh fruit juice without sugar and a bowl of brown rice. Finally for dinner, you can have a bowl of raw or cooked vegetables with a bowl of brown rice.

    Visit more :- Bathroom Accessories | EV charging | CLOUD COMPUTING | Nicotine Pouches | Cigars Online

    BalasHapus
  24. For all Windows users, Windows 11 is the only desired version, and it has always been extravagant. Windows 11 comprises three assistants on older operating systems for problem circumstances.File Explorer, and Device and Task Manager. You may solve driver issues through the Device Manager.

    visit more :- kgf chapter 2 | Ganool Movies | Movierulz3 | mk11 Tier | 7starhd | skymovieshd | khatrimazafull | Octopus energy

    BalasHapus
  25. Great information you shared through this blog. Keep it up and best of luck for your future blogs and posts.
    www.amazon.com/code verification | youtube.com/activate |
    pluto.tv/activate | amazon.com/code

    BalasHapus
  26. SkymoviesHD website was reportedly established a few years ago but now it has turned out to be everyone’s favourite. Yes, initially, no one would have thought that this website will emerge as one of the best and trusted free movie download sites.

    Visit more :- Gomovies | K.G.F Chapter 2 | Pipe Tobacco | Kisscartoon | Cucumber Benefits | Gomovies | Performance Marketing

    BalasHapus

  27. Apart from unlawful and illegal, the 7StarHD website is another most popular site available across the movie buffs. This is one of the impressing websites to download or stream your favorite TV shows and movies. Instead of downloading the movies, users can also stream their favorite shows on any electronic device. Find below the list of some interesting features of the 7StarHD website for your reference.

    Visit more :- Extramovies | DVDPlay | LosMovies | COMPUTING PLATFORM | Movierulz | Kisscartoon | Home Decor

    BalasHapus
  28. Google has announced that it wont support Google Picasa desktop application, however, the application is a popular photo editor and organizing application or a software that are generally used by photography professionals. Well, to let you know Google has replaced Picasa with new photo storage application called photos,
    yet you can use the Picasa application, as long as you have it, but Google won’t be providing any future updates to the app though. Hence, we have got these top 4 Google Picasa alternatives

    Visit more :- Moviesflix | KissCartoon | BLOXBURG | Cyber Security | F95Zone | Extramovies | Khatrimazafull

    BalasHapus
  29. These days, there are many places online where you can watch popular TV shows for free, but not all of them are created equal. Some offer only a very limited selection of content, while others are overflowing with ads and pop-up windows to such an extent that theyre barely usable. Fortunately, there are also sites like Project Free TV which show just how great and accessible online streaming can be.

    Visit more :- Project Free TV | Project Free TV | Project Free TV | Project Free TV | Project Free TV | Project Free TV | Project Free TV

    BalasHapus
  30. While downloading the movie from KatmovieHD you may see an error when you visit this website because these websites are blocked by the government. Therefore to access the website you may need VPN software. Can access blocked websites through VPN. Worldfamoushub.com completely opposes the piracy of the movie and we advise you not to download movies from such pirated websites.

    Visit more :- KatmovieHD | KatmovieHD | KatmovieHD | KatmovieHD | KatmovieHD | KatmovieHD | KatmovieHD

    BalasHapus
  31. Google has announced that it wont support Google Picasa desktop application, however, the application is a popular photo editor and organizing application or a software that are generally used by photography professionals. Well, to let you know Google has replaced Picasa with new photo storage application called photos,yet you can use the Picasa application, as long as you have it, but Google won’t be providing any future updates to the app though. Hence, we have got these top 4 Google Picasa alternatives

    Visit more :- Moviesflix | KissCartoon | BLOXBURG | Cyber Security | F95Zone | Extramovies | Khatrimazafull

    BalasHapus
  32. Are you seeking for free websites to watch and download online HD movies fr free? The ultimate solution for your hunt might be 7starHD 2020 website but its an illegal website. Like other pirated sites, 7starHD allows the users to watch and download all the latest films, TV shows, and web-series in HD for free. In this article, well uncover everything that you need to know about the 7starHD 2020 website.

    Visit more :- 7starHD 7starHD 7starHD 7starHD


    BalasHapus
  33. Skymovieshd 2020: Everyone loves watching movies, TV shows and web series but one a few know websites where they can download all of them for free. Yes, keeping in mind those section of people, we have come up with a free movie download website called, Skymovieshd or Skymovieshd.in.


    Visit more :- Skymovieshd Skymovieshd Skymovieshd Skymovieshd

    BalasHapus
  34. India is one of the countries where a lot of pirated content is accessed despite the strong rules and regulations laid down by authorities. Websites like Moviesflix are made for illegal Hollywood movies download and to watch Hollywood movies online. The pirated content makes it difficult for the movies to make business in theatres.

    Visit more :- Moviesflix Moviesflix Moviesflix Moviesflix

    BalasHapus
  35. TamilMV is a very famous piracy website to watch all kind of movies online. It is a platform where one can find Telugu Malayalam And Tamil movies online for free. If the movie buff is looking for documentaries and shows, these are also available on This website. It is a complete package for seamless entertainment as there are many super hit movies and shows that one can download from this website.

    Visit more :- Tamil movies Tamil movies Tamil movies Tamil movies

    BalasHapus
  36. Katmovies is an online pirated website that allows you to browse, watch, and download all the latest Tamil, Telugu, Malayalam, Hollywood and Bollywood movies in HD. That too, for free.



    Visit more: katmoviehd |
    tamilrockers |
    angioplasty |
    webmd |
    capital budgeting |
    jersey |
    luxury watches |
    waterfalls |
    downloadhub

    BalasHapus
  37. Anyone who wants to start a micro, small, or medium business can use the Udyam Registration portal to fill out a self-declaration form with no need to upload any paperwork, papers, certifications, or proof.


    Visit more: udyam registration |
    science career opprtunities |
    property owner list |
    worship in this way |
    sharepoint intranet |
    influencer marketing |
    diesel mechanic

    BalasHapus
  38. If the camera system of the iphone is damaged, then they repair or replace it. The lens of the camera may be damaged or cracked. It should be replaced. You can also experience problem due to software issues.


    Visit more: personal loan mumbai |
    personal loan mumbai |
    best cuban café in miami |
    forex trading |
    ceramic dinner |
    rent a car in sharjah |
    influencer marketing

    BalasHapus
  39. MSME propel the market forward with minimal investment, while also creating jobs and boosting the economy. Every company begins small, yet appropriate investment is what keeps the wheels turning. All government programs aimed at boosting the MSME sector can only be used if a company is registered with the Ministry. The following are a few of the advantages of registering:

    Visit more:

    msme registration |
    mobile repair centers |
    restaurants in cuba |
    quick personal loan |
    buying handmade crockery |
    ktm duke 250 |
    home loan vs loan against property |
    hair dandruff free
    electric bikes |
    aac block

    BalasHapus
  40. Movierulz is a website for piracy considered to encourage users to download pirated films. This infamous online portal will stream before it is released or shown in theatre the hottest films of Language, Bollywood, Punjabi, Malayalam, Tamill and Telugu. With TV shows and internet series becoming more and more popular on TV channels and online streaming sites.

    Visit more:

    123mkv |
    movierulz wap |
    skymovieshd |
    extra movies |
    watch series |
    maladaptive daydreaming |
    khatrimaza |
    7starhd |
    payroll software |
    usha sewing machine

    BalasHapus
  41. We have a team of experts who can provide you with the best Certificate IV In Commercial Cookery experts in Australia, which will surely help you, uplift your grades. They provide Certificate IV In Commercial Cookery that are 100% plagiarism-free and contain content that the industry experts have written.

    BalasHapus
  42. I checked out both your website and your blog and read some of the content on each of them.. cope with a long-distance relationship

    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 |