Merubah Ukuran dan Posisi Sidebar dengan Main Wrapper

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.