Cara Merubah Template Blogger 2 kolom Menjadi 3 Kolom

Tutorial Blogger by Blog Chiber 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.

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 Selesai semua Langkah-langkah diatas, selanjutnya klik ctrl+f kemudian ketik 660px pada kotak tersebut kemudian semua ganti yang berbau 660px menjadi 840px.

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

Atau Mau terima Beres dan ingin kami yang merubahnya, silahkan hubungi kami. jasa 150rb per blog.

Saat Ini Saya belum memakai cara ini pada blog ini yang dimana bawaan dari maskolis yaitu johny wusss hanya 3 kolom pada home page yaitu 2 kolom posting dan 1 kolom sidebar. kelak jika rating blog ini sudah meningkat juga akan saya rubah menjadi 2 kolom sidebar sebelah kanan sehubung berkembangnya advertiser di blog ini.


Oke, sekian dlu Artikel tentang Cara Merubah Template Blogger 2 kolom Menjadi 3 Kolom Kali ini dan semoga bermanfaat buat teman-teman blogger and Happy Blogging..

Read more »