Untuk membuat kolom sidebar yang baru dibuat tidaklah terlalu sulit, sobat hanya perlu menempatkan kode float menjadi di kiri (left) serta penambahan kode padding-right agar kolom kiri tidak bertabrakan dengan kolom posting. Bingung?...
Langkah pertama yang harus di ingat adalah beri tanda conteng pada kotak kecil di samping tulisan Expand widget Template anda.
/* 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: 220px;
float: right;
padding-left:10px; /* yg ini tambahan juga 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 */
#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
Agar hasilnya berbeda dengan yang dulu yaitu kolom yang di buat bukan berada pada sebelah kanan, maka sobat perlu sedikit mengubah kode yang saya cetak merah menjadi seperti ini :
#sidebarbaru-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
Terlihat pada huruf yang saya cetak biru bahwa yang di ubah hanyalah dua baris kode saja, yang lainnya tidak perlu di ubah. Jika sudah selesai mengubahnya, jangan lupa untuk menutupnya dengan menekan tombol simpan template.
Langkah selanjutnya adalah menuju ke bagian bawah template, yaitu pada bagian body, jika dulu saya menyarankan agar kode sidebar di tempatkan seperti ini :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>
<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>
Maka apabila sidebar baru ingin di tempatkan di sebelah kiri, maka kode sidebar baru harus di pindahkan di atas kode main (posting) sehingga kodenya kira-kira akan menjadi seperti ini :
<div id='sidebarbaru-wrapper'> <!-- perhatikan yang ini -->
<b:section class='sidebar' id='sidebarbaru' preferred='ye'/'>
</div>
<div id='main-wrapper'> <!-- perhatikan yang ini -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>
Apabila sudah selesai menempatkan kode sidebar baru, silahkan akhiri dengan menekan tombol Simpan Template, selesai. Silahkan lihat hasilnya !
Keyword's : Head line, Membuat sidebar, Sidebar new, New, Sidebar kiri, Tutorial blog, Sidebar kanan, Wordpress, Cara membuat sidebar, Membuat sideba, Kiri, Kanan, SEO, Keyword, Readmore otomatis, Left, Kolom posting, Kolom widget, Belajar seo, Cara pasang seo di blog, Buat blog, Cara Membuat Head Line News
Baca Juga Artikel :
* Pasang iklan gratis di google* Media Berita online indonesia
* Kumpulan biodata lengkap para artis
* Kumpulan artikel seputar dunia wanita
* Situs agama islam terpopuler
