Melakukan aksi show/hide pada sidebar blog

---

Kali ini saya akan membagikan sebuah tips yang lumayan unik, yaitu membuat sidebar anda bisa dihilangkan maupun ditampilkan. Tidak hilang secara total sih, cuma menyembunyikan sidebar dari pandangan... :D
Jadi widget-widget yang ada didalam sidebar tetap diloading.

Mengapa ini perlu dilakukan? Saya lihat kebanyakan blogger memposting foto-foto yang resolusinya sangat besar sehingga foto tersebut melewati main-wrapper (tempat postingan) kemudian masuk ke sidebar-wrapper (sidebar blog). Jadi dengan tips ini kita bisa menghilangkan sidebarnya sejenak untuk melihat foto.. :D

Walau masalah ini bisa diatasi dengan mengubah ukuran gambar, namun saya kira banyak blogger yang malas melakukannya, apalagi jika gambarnya banyak... :D
Nah, berikut tipsnya... :D

Sisipkan dulu script ini di bagian HEAD pada template:

<script>
function hide(){
document.getElementById("sidebar-wrapper").style.display="none";
}

function show(){
document.getElementById("sidebar-wrapper").style.display="block";
}
</script>

Kemudian di edit layput, tambahkan widget HTML/javascript lalu isi dengan script semacam ini:

<a href='#' onclick='hide();'>HIDE</a> the sidebar or <a href='#' onclick='show();'>SHOW</a> the sidebar

Kalimatnya bisa anda ubah sesuai keinginan
Pastikan bahwa anda tidak meletakkan widget ini di sidebar karena akan ikut hilang bersama sidebar.... :D

Perlu diperhatikan bahwa anda harus menyesuaikan nama sidebar-wrapper dengan div id sidebar di template anda.
Demonya ada di blog teman saya, blogger iseng. Silakan klik.. :D

Selamat mencoba. Kalau ada pertanyaan silakan kasih komentarnya..

SHARE THIS POST:

Untuk langsung menjalankan kode-kode HTML atau javascript, anda bisa menggunakan TryIt editor.

Click to open

Kunjungi juga blog saya yang lain di Online tutorial