Membuat Kolom Sidebar Baru Sebelah Kiri Main Post

Membuat kolom sidebar  kiri dan kanan Main Post

Kebanyakan template Blogger yang minimalis selalu menggunakan lay out 2 kolom dengan satu kolom sidebar disebelah kanan kolom main post....hmmm bosan?.  Jadi bagaimana jika membuat atau menambah kolom sidebar baru di sebelah kiri main post?....pasti lebih menarik. Tutorial proBlogiz seperti biasa selalu membagi tip dan trik, kali ini cara Membuat Kolom Sidebar Baru Sebelah Kiri Main Post.

Sebenarnya topik ini adalah kelanjutan dari artikel sebelumnya Membuat Template Blogger 2 Kolom Jadi 3 Kolom, yang perlu Anda baca juga untuk lebih mengerti dan memahami topik Membuat Kolom Sidebar Baru baik itu yang sidebar kiri atau kanan. Kalau pembahasan artikel yang lalu difokuskan membuat  kolom sidebar baru disebelah kanan main post, sekarang sebaliknya membuat atau menambah kolom sidebar baru di sebelah kiri main post, dengan kata lain 2 kolom sidebar kanan dan kiri diantara elemen main blog post.

template minima 2 kolom sebelum dirubah	setelah dirubah jadi 3 kolom right sidebar-left sidebar

DEMO LIVE   DOWNLOAD 

Sebelum dirubah template minima ini, ukuran #outer-wrapper sebesar: 660px.
Untuk lebih jelas Anda cek dulu artikel cara pembuatan template 3 kolom ini dari awal.

Baik kita langsung membuatnya, ikuti langkah trik berikut :

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 anda perhatikan kode yang berwarna merah "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!!