Buat Efek Toggle Sidebar Blog dengan "jQuery"

Pada kesempatan kali ini saya ingin share tentang membuat Efek Toggle sidebar pada blog,setelah saya otak-atik mengenai template Uniqx, dan saya berinisiatif untuk membuat Efek Toggle pada sidebar blog dari template Uniqx di template saya ini. dan akhirnya behasil.maka dari itu saya ingin share ke teman. baiklah langsung saja.

Jika sobat masih penasaran, sobat bisa Lihat contohnya di template saya sekarang ini, coba arahkan cursor anda pada sidebar saya, maka akan kelihatan semacam buka tutup pada sidebar saya. atau bisa lihat lansung pada template Uniqx, disini.

Gimana tertarik untuk mencobanya??

Berikut langkah - langkah pembuatannya.
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
Lalu letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> 

#sidebar h2 {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9N2d5Zz-QmOzqIhRUChabYqvbWIx9cOYIRLBVXXcgTnxgewRGTEmpZmXdmNJ34a5N2fxV3CYKLvYqCj4R5dTG8gCgl6Un8oxbDGsUO9uaMq1ConcSDjwZdBT4PQELD4mZ38eGGeOFBo3T/")no-repeat 100% 50%;
}
#sidebar h2.headactive {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilXResmIsh8Kv3b2cjuxy9WIgW6SxYrmdy5ZzNTOSthJIt5hTp6ILkhZvEC2xbEQFpz6N2x55j8KBDLAC24Tvl3k1STv7kwPtcqmPG0f3zhyphenhyphen8WWYiCfCR1NKlwdDzVV37ujtdVvBujgQnF/")no-repeat 100% 50%;
border-bottom:1px solid #282828;
}
#sidebar2 h2.headactive {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9N2d5Zz-QmOzqIhRUChabYqvbWIx9cOYIRLBVXXcgTnxgewRGTEmpZmXdmNJ34a5N2fxV3CYKLvYqCj4R5dTG8gCgl6Un8oxbDGsUO9uaMq1ConcSDjwZdBT4PQELD4mZ38eGGeOFBo3T/")no-repeat 100% 50%;
}

::: Sobat dapat mengedit code CSS diatas sesuka anda,

5. Setelah Itu taruh kode dibawah ini dibawah kode ]]></b:skin> , atau diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

<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://introbloggerscripts.googlecode.com/files/accordionscriptv101-min.js' type='text/javascript'/>

6. Langkah terakhir Save, dan lihat hasilnya..