membuat kolom baru di sidebar

Membuat kolom baru disidebar perlu kita terapkan bila kita ingin menambahkan layout baru pada blog kita karena tentu kita sudah menyadari bahwa pada umumnya kebanyakan template minimalis Blogger cuma menggunakan 2 layout yang biasanya terdiri dari main post dan sidebar disebelah kanan . Bener gak? hehehehehe. So, bagaimana jika kita menambahkan 1 lagi layout
 pada sidebar sebelah kiri, tentu menarik bukan? yup,,,, kali ini kita akan membuat kolom baru di sidebar sebelah kiri.

Baiklah tidak usah berlama lama lagi basa basinya tentang cara membuat kolom baru di sidebar kiri

Masuk ke Blogger >>> Rancangan >>> Edit HTML Template

• backup template Anda yang sekarang (unduh lengkap) untuk antisipasi jika error
• jangan centang Expand Template Widget
• tekan F3 untuk pencarian

Tambahkan kode css di bawah ini setelah #sidebar-wrapper {...}

#sidebarbaru-wrapper { width: 180px; float: left; padding-left:10px; 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 */ }

Perlu Sahabat pucanglaban perhatikan kode "float: left;" berarti posisi penempatan sidebar baru  di sebelah kiri.

Sehingga kode css seluruhnya menjadi  seperti ini :

/* 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; 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: left; padding-left:15px; 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 */ }

Kode html untuk id sidebar baru :

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

Letakan kode diatas, tepat sebelum/diatas kode berikut :

<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>

Sehingga kalau digabungkan kode id tersebut menjadi kurang lebih seperti ini :

<div id='sidebarbaru-wrapper'> <b:section class='sidebar' id='sidebarbaru' preferred='yes'/> </div> <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>

Selesai....!!!

Sekarang Anda bisa cek hasilnya di Tata Letak di Dasbor Blogger, kolom sidebar baru akan berada disebelah kiri main blog post atau lay out template blog sekarang telah menjadi 3 kolom dengan 2 kolom sidebar di kiri dan kanan main blog post.

Kesimpulan

Membuat Kolom Sidebar Baru Sebelah Kiri Main Blog Post sebenarnya tidak jauh berbeda prosesnya dengan membuat kolom 2 sidebar di kanan main post, namun yang perlu diperhatikan :

pemasangan kode id bila pada 2 sidebar di sebelah kanan, kode id sidebar baru "<div id='sidebarbaru-wrapper'>" berada dibawah kode id  "<div id='sidebar-wrapper'>"

bila sidebar dikiri dan dikanan main post, kode id sidebar baru "<div id='sidebarbaru-wrapper'>" berada diatas kode id  "<div id='main-wrapper'>"

Selamat mencoba......

Jangan sungkan beri komentar bila ada saran atau mau bertanya.....ok!!

Sumber: http://problogiz.blogspot.com/2012/09/membuat-kolom-sidebar-baru-sebelah-kiri_2.html

pucanglaban.com informatif, kompetitif dan kreatif bersama berbagi ilmu dan pengetahuan.
posted by: Khoirul Anwar