Membuat Template Blogger 2 Kolom Jadi 3 Kolom

Tutorial Blogger proBlogiz kali ini sharing tip dan trik cara membuat atau merubah Template Blogger 2 Kolom Jadi 3 Kolom, yang bisa bermanfaat untuk Anda yang ingin tampilan template blog lebih maksimal. Secara default template 2 kolom mempunya satu kolom sidebar dikiri atau dikanan dari elemen post blog (elemen main). Tentu Anda bisa membuat dengan merubahnya atau menambahnya menjadi 3 kolom yaitu dua kolom sidebar baik sidebar kiri dan kanan atau semuanya berada di kanan atau kiri. Design blog atau template seperti ini biasanya disesuaikan dengan kebutuhan penempatan widget-widget di blog. Membuat template menjadi 3 kolom tidaklah sulit asal Anda benar-benar mengikuti tutorial dan tip-trik dibawah ini.

Sebelumnya saya akan memberikan contoh yang telah saya buat dengan metode ini pada template minima 2 kolom menjadi 3 kolom 2 right sidebar. Anda juga bisa melihat Demo dan Download hasilnya, pada link yang telah disediakan dibawah. Artikel ini saya harus update kembali karena beberapa pembaca Blogger mengalami kesulitan atau gagal menerapkan metode/cara menambah 3 kolom pada blogger template ini.

template minima 2 kolom sebelum dirubah	template minima setelah dirubah menjadi 3 kolom 2 right sidebar

DEMO LIVE   DOWNLOAD 

Ada baiknya Anda download contoh template yang telah dibuat ini, dan coba lihat file XML-nya dengan notepad atau wordpad. Anda akan menemui kode-kode css dan html sama persis yang saya gunakan dibawah ini : #outer-wrapper {width: 840px;....}, begitu juga dengan ukuran sidebar, padding, float dll.

Kembali saya ingin mengingatkan jika Anda ingin merubah template yang Anda gunakan sekarang, bisa jadi  hasilnya berbeda, dikarenakan ada beberapa perbedaan kode-kode template Anda dengan kode yang saya gunakan ini (template minima), namun perbedaan itu bisa diatasi jika memahami kode-kode (CSS dan HTML) pada template yang Anda gunakan. Sebagai contoh: ukuran (#outer-wrapper ; #main-wrapper ; #sidebar-wrapper), mengatur kembali padding antara main-wrapper dengan sidebar (agar sesuai dengan outer-wrapper).

Pada dasarnya untuk menambah kolom sidebar baik itu sidebar kiri atau sidebar kanan yang Anda harus perhatikan adalah kode-kode seperti : #outer-wrapper ; #main-wrapper ;  #sidebar-wrapper  , sebab kode inilah yang nantinya kita rubah di template.

Sebagai contoh template Anda sekarang adalah template sederhana seperti Minima Template, umumnya menggunakan lebar/ width  #outer-wrapper : 660 px dan #main-wrapper : 410 px, #sidebar-wrapper : 220px   , kalau Anda mau menambah kolom sidebar baru ukuran 180 px misalnya, maka otomatis Anda harus menambah ukuran #outer-wrapper = #main-wrapper + #sidebar-wrapper + #sidebarbaru-wrapper + margin left.

#outer-wrapper  = 410 px + 220 px + 180 px + 20 px = 830 px

Agar sidebar tidak berdempetan dengan main elemen berikan jarak antara keduanya 10 px, sehingga ukuran

 #outer-wrapper  = 840 px

Trik Membuat 3 Kolom Pada Blogger Template

Masuk ke Blogger >>> Edit HTML Template

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

Perhatikan kode css tersebut :

/* Outer-Wrapper ------------------------------------------ */ #outer-wrapper { width: 660px; 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; 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 */ }
Fokuskan pada kode-kode yang diwaranai diatas, dan lakukan trik tersebut :

rubah #outer-wrapper width: 660px menjadi 840 px

tambahkan  padding-left:10px; pada #sidebar-wrapper 

Tambahkan kode kolom baru ini :
#sidebarbaru-wrapper { width: 180px; 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 */ }
Sehingga  kodenya 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: 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 */ } *float: right; >> menempatkan sidebar lama sebelah kanan

 Setelah pemasangan kode css sidebar baru telah selesai,selanjutnya Anda juga perlu memasang code id sidebar baru pada body template.

Kode id sidebar baru Anda, buatlah seperti ini:

<div id='sidebarbaru-wrapper'> <b:section class='sidebar' id='sidebarbaru' preferred='yes'/> </div>
Tambahkan kode id sidebaru tersebut dibawah kode HTML berikut :

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

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

<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/> <b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/> </b:section> </div> <div id='sidebarbaru-wrapper'> <b:section class='sidebar' id='sidebarbaru' preferred='yes'/> </div> Setelah langkah diatas selesai, maka Save Template

Dua kolom Template Blogger Anda sekarang telah menjadi 3 kolom template dengan dua kolom sidebar sebelah kanan kolom main (post blog elemen). Untuk melihat dan memastikan hasil perubahan Anda bisa cek di Tata Letak, disini Anda bisa melihat lay out template telah menjadi 3 kolom.

Tambahkan widget baru di kolom sidebaru Anda, dan lihat hasilnya.

note : agar tampilan template lebih proporsional Anda juga bisa merubah ukuran lebar (width) #header-wrapper  dan #footer dengan ukuran yang sama pada  #outer-wrapper yaitu 840 px.

Selamat dicoba sobat......

Jika Anda masih bingung tentang trik cara Membuat Template Blogger 2 Kolom Jadi 3 Kolom, silahkan bertanya di form komentar dibawah ini.....dan jangan lupa jempolnya!!!

Update: Susunan Kode HTML kurang lebih seperti ini:
<div id="main-wrapper">...</div> <div id="sidebarbaru-wrapper">..</div> <div id="sidebar-wrapper">....</div>

Baca Juga Artikel >>> Cara Buat Kolom Sidebar di Kiri dan Kanan