Sidebar Berpindah dan Menghilang

Tidak terasa, tadi malam puasa ramadhan kita telah memasuki hari ke 21. Ini tentu menjadi kesempatan kita untuk berlomba-lomba dalam beribadah dan menambah  kebaikan, dengan penuh harap mendapatkan malam yang lebih baik dari seribu bulan. Kali ini saya membahas topik yang cukup serius dan membingungkan, saya sendiri juga masih bingung *loh. Tapi supaya ilmu tidak langsung menguap seperti air maka mem-postingnya di blog ini. Walaupun saya juga sering tidak berhasil dalam otak-atik kode html, tapi bagi saya kegagalan membuat diri kita menjadi maju dan semakin baik kedepannya.

Coba sobat liat sidebar blog forantum ini (sidebar adalah kolom di samping kanan dan kiri area postingan atau tempat widget di samping postingan). Sobat pasti bertanya-tanya kenapa tampilan antara homepage dan postingan berbeda, sidebar kirinya bisa hilang, berpindah dan berubah?. Nah trik dibawah ini adalah yang saya gunakan. Tentu digabungkan dengan trik sebelumnya yaitu Widget tidak tampil di homepage dan Widget hanya tampil di homepage. Intinya kita hanya menggunakan kode html IF atau JIKA.

Untuk Membuat Sidebar Berpindah:
Tambahkan css berikut ini di atas ]]></b:skin>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    #main-wrapper{float:left;}
    #sidebar-wrapper{float:right;}
    </b:if>

Penting: kode #main-wrapper dan #sidebar-wrapper berbeda-beda pada setiap template, jadi tolong disesuaikan.

Yang berwarna merah adalah menunjukkan posisi dari area postingan dan area sidebar Anda. Baris pertama script menunjukkan sarat bahwa css tersebut hanya dipanggil untuk halaman postingan.


Membuat Sidebar Menghilang
Agar sidebar menghilang kita tinggal mengganti sedikit kode yang ada di tengah menjadi:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    #main-wrapper{float:left;}
    #sidebar-wrapper{

display: none !important;

    </b:if>

Penting: kode #main-wrapper dan #sidebar-wrapper berbeda-beda pada setiap template, jadi tolong disesuaikan.

Semoga bermanfaat....

Sumber: Mas Doyok I Themasdoyok.com