MENAMBAH SIDEBAR MENJADI DUA

Penampilan sebuah blog akan semakin cantik jika
memiliki 2 buah sidebar. Disamping itu kita akan lebih leluasa dalam menempatkan
elemen halaman baik berupa tulisan ataupun widget

Tidak sulit membuatnya, anda tinggal mengikuti langkah-langkah dibawah ini.

Ingat...jangan diberi tanda centang pada Expand widget Template karena akan
muncul kode-kode yang rumit sehingga dapat membingungkan



Langkah pertama



Cari Kode dibawah ini (biasanya berada dibagian atas)





/* Outer-Wrapper

------------------------------------------ */

#outer-wrapper {

width: 840px

margin:0 auto;

padding:10px;

text-align:left;

font: $bodyfont;

}

#main-wrapper {

width: 410px;

float: left;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

#sidebar-wrapper {

width: 200px;

float: right;

padding-left:10px; (tambahkan kode ini
biar tampak ada jarak sela)

word-wrap: break-word; /* fix for long text breaking sidebar float in IE
*/

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */



Sesuaikan dulu lebar outer wrapper, main wrapper dan sidebar wrapper
dengan contoh diatas. Ini agar hasilnya sesuai dengan harapan anda.

Jika udah sesuai, Copy kode dibawah ini kemudian paste tepat dibawah kode-kode
tadi



#sidebarbaru-wrapper {

width: 200px;

float: right;

padding-left:10px;

word-wrap: break-word;

overflow: hidden;

}





Kode diatas menunjukan sidebar baru terletak disebelah kanan. Ubahlah kode
tersebut menjadi kode seperti dibawah jika sidebar ingin diletakan di sebelah
kiri.





#sidebarbaru-wrapper {

width: 200px;

float: left;

padding-right:10px;

word-wrap: break-word;

overflow: hidden;

}



Langkah Kedua



Cari kode HTML dibawah ini pada bagian body



<div id='main-wrapper'><b:section class='main' id='main'
showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>

</b:section>

</div>





Copy kode dibawah ini kemudian paste tepat diatas kode tadi jika sidebar
ingin berada di sebelah kiri dan paste tepat dibawahmya jika ingin berada di
sebelah kanan. Jangan lupa kode yang diatas (
#sidebarbaru-wrapper...dst ) harus disesuaikan, dimana akan
meletakkannya..?



<div id='sidebarbaru-wrapper'>

<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>

</div>



Apabila sudah selesai menempatkan kode sidebar baru, silahkan akhiri dengan
menekan tombol Simpan Template, selesai. Silahkan lihat hasilnya !



Jika hasilnya tidak seperti harapan anda, kemungkinan lebar dari main wrapper,
sidebar wrapper dan sidebar baru wrapper jumlahnya tidak sama dengan lebar outer
wrapper, sehingga salah satu sidebar akan kebawah. Solusinya.....cobalah ubah
lebar (width) dari sidebar agar hasilnya sesuai dengan keinginan kita. Lihat

Klik disini untuk mengubah lebar sidebar.

Admin

Endro Prasiswo
tel.:081334169022
fax:03423326622
Email:admin@kesamben.co.cc
URL:http://www.obralilmu.co.cc
Facebook:http://www.facebook.com/endro.prasiswo

Silahkan dibaca juga kelanjutannya dibawah ini