Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.

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
template minima 2 kolom sebelum dirubah
template minima left right sidebar
setelah dirubah jadi 3 kolom right sidebar-left sidebar

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!!
Artikel Terkait Lainnya:
Click here for comments

18 komentar

Punya saya ga ada kode ini ...sidebar-wrapper'>.. cara nambahinnya di sebelah mana?

REPLY

kasi alamat blognya bos
template bisa berbeda2

REPLY

bos dari gondrong botak kok kga ada code itu yac ini alamat blognya : http://oppoest.bogspot.com

REPLY

ada gan, buka aja link /css/style_park.magazine.css

REPLY

makasih infonya..........kita tunggu kunjungan baliknya ke link kita

REPLY

sidebar_wrapper saya ga ada... mohon bantuannya ya.. ni http://indraarga00.blogspot.com/ makasi sebelumnya

REPLY

gan di html saya koq gak ada #sidebar-wrapper ya?? apa template saya yg gk mendukung ya gan?? tolong dibantu gan http://ivanafx.blogspot.com

REPLY

Terimakasih, masih di coba.
silahkan kunjungi http://pesantrenlink.blogspot.com

REPLY

gan bantuin blog ane dong, pengen bikin sidebar baru dikiri tapi susah :-(
blog ane http://downloads-corners.blogspot.com/
email ane yah kalo mau bantu di moch.irfan18@yahoo.co.id

REPLY

Hai, gan thx berat yah buat inponya. sungguh benar manpaat nih. Semoga amal agan diterima di Sisi-Nya yah, Aamiin.
Thx sekali lagi ya Sob :

Erlina Febrianovida

REPLY

terima kasih bro ilmu nya.sukses terus.

REPLY

Lieur bos !!
http://polesan-mobil-motor.blogspot.com/

REPLY

min kok nggak berhasil, soalnya sidebar barunya malah muncul di aats postingan bukan di kiri

REPLY

gan aku buat seperti code diatas tapi knapa dia jauh ke bawah

REPLY

trimakasih, sangat membantu.

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|