Membuat Efek Sidebar Accordion

image
Sudah banyak orang tau tentang efek ini, tapi saya sendiri baru tau kemaren (saat post ini di buat). Saya menemukan cara ini saat saya sedang blog walking mencari cara buka tutup sidebar, Akhirnya efek accordion keren inilah saya gunakan untuk blog saya. Untuk demonya lihat bagian sidebar yang tertutup, coba klik judul pada sidebar saya, bagaimana?keren kan? jika anda tertarik untuk membuat yang seperti itu tidak perlu belajar jauh-jauh sampai ke negeri China, cukup di blog ini saja. oke langsung ke step by step :

1. Log in ke blog anda adalah hal wajib
2. klik pada tab Design > Edit HTML
3. Cari kode ini --> </head>
4. Letakan kode berikut sebelum kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
5. Masih berhubungan dengan kode  </head>
6. Letakan kode berikut tepat di atas kode </head>
<script type='text/javascript'>
var sidebarnameacc1=&quot;sidebar&quot;;
var accordionside1=true;
var sideshow1=new Array(0,0);
var sidebarnameacc2=&quot;sidebar2&quot;;
var accordionside2=false;
var sideshow2=new Array(0,0);
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/accordionscriptv101-min.js' type='text/javascript'/>
</head>
7. Sekarang perhatikan bagian var sidebarnameacc1=&quot;sidebar&quot;;
sidebar yang bercetak tebal di atas berarti id sidebar anda, jika id sidebar anda bukan sidebar silahkan anda ganti sesuai id anda.

8. Perhatikan lagi bagian var sideshow1=new Array(0,0);
angka 0,0 mengartikan sidebar pertama dalam keadaan terbuka saat web pertama di buka. Jika yang anda inginkan terbuka adalah sidebar no 2 maka ganti angka 0,0 menjadi 1,1. Jika ingin dua-duanya terbuka menjadi 0,1. begitu seterusnya

Sekian dulu materi pembelajaran kita hari ini, jangan lupa untuk meninggalkan comment di bawah sebagai kritik dan saran untuk saya. Terima Kasih

10 komentar:

Unknown, 21 October 2010 at 01:27 | [Reply]

Thanks Banget buat informasinya bos.. Jadi Tambah Ilmu neh setiap hari..
Buat yang doyan berita mampir ke blog gw yah...
Kabar Terbaru
Untuk Informasi Lowongan Kerja terbaru silahkan ke sini..
Info Lowongan Kerja Terbaru
...Bagi yang doyan Jalan2 kalian bisa liat informasinya di siini!!!!
Bukit Lawang Centre

Junior Blogger, 26 October 2010 at 12:25 | [Reply]

Link Teks Dan Link Banner Blog ini sudah ane pasang di blog ane, ditunggu ya pemasangan baliknya gan...Terima Kasih.

Epo, 12 November 2010 at 06:38 | [Reply]

tanks banget gan infonya ......... mau aq praktekan dulu...

Dimas Abi Galoga, 12 November 2010 at 19:30 | [Reply]

thanks semuanya. commentnya

Wahyu Nugraha Putra, 30 November 2010 at 03:30 | [Reply]

Nice info gan...masih baru nie

Unknown, 22 April 2012 at 07:46 | [Reply]

Nice info from MANGALINDAK networking

Unknown, 4 May 2012 at 11:35 | [Reply]

thanks banget infonya coba di tes ya

Unknown, 3 July 2012 at 04:30 | [Reply]

terima kasih atas informasinya kakak.
berkat informasi ini saya dapat menyelesaikan tahap desain sidbar blog saya.

^_^

Anonymous, 14 September 2012 at 08:41 | [Reply]

mantap :D

Anonymous, 17 March 2013 at 09:17 | [Reply]

salam kenal gan ! trick membuat efek sidebar accordion diatas, kenapa untuk blog saya enggak berhasil, sidebar sudah saya ganti dengan id widget=html5, tetep enggak berhasil. mohon pencerahan. terima kasih

Post a comment

Kotak Komentar Klasik Klik Di sini

« Prev Next » Home