Merubah Ukuran dan Posisi Sidebar dengan Main Wrapper ( Halaman Posting)

Sebenarnya saya bingung mau kasih judul postingan ini apa, tapi kalo kalian baca artikel ini mungkin kalian akan mengerti (semoga saja). Postingan ini mungkin sudah sangat ditunggu-tunggu oleh sahabat saya yang memberikan pertanyaannya :

" mas saya mau tanya pas maz ngerubah template kolom q menjadi 2 kolom tuh gmana caranya maklum masih Oon,yang kodenya ditaruh diatas head itu lo maz.mohon bantuannya thanks "

Pertanyaan diatas sebenarnya sangat mengarah ke pembuatan template magazine, yaitu dengan adanya fitur muncul hilang widget, dan merubah ukuran, seperti yang telah saya jelaskan pada artikel sebelumnya yaitu :

== Menghilangkan widget diHomepage/halaman depan
== Menyembunyikan widget dihalaman tertentu

saya akan mencoba menjawab dan menjelaskannya, mudah-mudahan ini jawaban yang pas buat sahabat blogger saya dan buat semua yang membaca artikel ini.

sebelumnya saya akan mengingatkan kembali tentang posisi dalam kode HTML template kita yaitu :

Atas ==> TOP
Bawah ==> BOTTOM
Kiri ==> LEFT
Kanan ==> RIGHT

Jika kita sudah mengerti dengan posisi-posisi diatas sebenarnya kita sudah bisa merubah template kita. Sekarang kita mengarah kepada elemen template yang akan kita rubah posisi dan ukurannya.
Dalam sebuah template terdapat beberapa elemen yang bergabung menjadi satu halaman web/blog seperti Header. Sidebar, Main, Outer, dan Footer. Silahkan baca artikel saya tentang Elemen dalam template. Namun untuk kali ini yang akan kita bahas antara sidebar dan main wrapper. untuk kodenya sendiri biasanya seperti ini (kita ambil contoh template 3 kolom):

** main wrapper

#main-wrap1{width:460px;float:left; margin-top:10px}

#main-wrap2{float:left;width:474px;background:#FFF
{display: none !important;}); border:0px solid #323232}

.main .widget{margin-top:4px;margin-left:1px;width:455px;padding:0px 5px;}

** Sidebar Wrapper

#sidebar-leftwrap{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:#FFF; border:1px solid #323232}

#sidebarright{width:200px;float:right;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:#FFF; border:1px solid #323232}

(Kode diatas akan terlihat tidak serupa pada setiap template, tapi intinya sama.)

Coba perhatikan tulisan warna merah pada kode diatas. Jika kalian ingin merubah atau bertukar posisi antara main wrapper dengan sidebar kalian tinggal mengCopy kodenya dan menukar tulisan warna merahnya sebagai contoh kita akan menukar posisi sidebar right dengan main wrapper. Hasilnya seperti ini :

#sidebarright{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:#FFF; border:1px solid #323232}

#main-wrap1{width:460px;float:right; margin-top:10px}

#main-wrap2{float:right;width:474px;background:#FFF
{display: none !important;}); border:0px solid #323232}
.main .widget{margin-top:4px;margin-left:1px;width:455px;padding:0px 5px;}

Jadi sidebar kanan akan pindah ke kiri dan halaman posting akan pindah dari kiri ke kanan. Jika sudah kita tukar posisinya, sekarang kita tinggal menyisipkan kode tambahan supaya hanya muncul dihalaman tertentu seperti yang telah saya jelaskan DISINI. Untuk kodenya seperti ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

</b:if>

Sehingga kalo digabung hasilnya akan seperti ini (jangan lupa menyisipkan kode <style> untuk kode CSSnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#sidebarright{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:#FFF; border:1px solid #323232}

#main-wrap1{width:460px;float:right; margin-top:10px}

#main-wrap2{float:right;width:474px;background:#FFF
{display: none !important;}); border:0px solid #323232}
.main .widget{margin-top:4px;margin-left:1px;width:455px;padding:0px 5px;}
</style>
</b:if>

Kode diatas berarti pada halaman single post, posisi sidebar akan pindah ke kiri dan posisi main wrapper pindah ke kanan, namun pada halaman depan posisinya sebaliknya. Simpan kode diatas dibawah kode ]]></b:skin> atau diatas kode </head>

Tunggu bentar ya saya mau bernafas dulu ........

Ok... mari kita lanjutkan. penjelasan diatas adalah menukar posisinya, sekarang kita tinggal merubah ukuran main-wrapper lebih lebar dan menghilangkan satu elemen sidebar yaitu sidebar kiri yang dari tadi belum kita otak-atik. Coba perhatikan tulisan berwarna biru pada kode diatas :

== Main : width:455px;
== Sidebarleft : width:200px;

sebenarnya gampang saja, kalian tinggal membuang sidebar left dan menambahkan angkanya pada main (halaman posting). jadi hasilnya seperti ini :

== Main : width:655px;
== Sidebar left : {display:none;} ---> dihilangkan.

jadi kode keseluruhan akan seperti ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

#sidebarright{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:#FFF; border:1px solid #323232}

#sidebar-leftwrap {display:none;}

#main-wrap1{width:460px;float:right; margin-top:10px}

#main-wrap2{float:right;width:474px;background:#FFF
{display: none !important;}); border:0px solid #323232}

.main .widget{margin-top:4px;margin-left:1px;width:655px;padding:0px 5px;}

</style>
</b:if>

** PEMASANGAN PADA TEMPLATE

Pilih Rancangan --> EDIT HTML (centang expand template widget) --> simpan kode modifikasi tadi diatas kode </head> atau dibawah kode ]]></b:skin>

Simpan template.

sekali lagi saya ingatkan, kode diatas hanya contoh pada salah satu template. KODE UNTUK SETIAP TEMPLATE TIDAK SELALU SAMA.

Semoga bermanfaat. ;))