Cara Mengedit Template Dua Kolom Menjadi Tiga Kolom

Cara Mengedit Template Dua Kolom Menjadi Tiga Kolom - Seni bagi seorang yang punya blog atau website pasti akan berurusan dengan kode-kode HTML dan JavaScript,  bahasa PHP dan bahasa kode pemograman lainnya. Mengedit template merupakan salah satu seninya ngeblog selain untuk belajar bahasa algoritma yang dipelajari orang bidang IT, kita sebagai masyarakat umum juga berhak untuk mempelajarinya tujuannya adalah agar bisa mengenal serba serbi dunia IT khususnya keajaiban bahasa komputer yang membuat teknologi semakin canggih, modern dan tentunya sesuatu yang sudah kita nikmati selamai ini dari megahnya teknologi. Bahasa komputer yang konon katanya bikin pusing kepala tapi toh setiap hari ada yang hal saja baru. Ide manusia tidak pernah habis dalam urusan utak atik bahasa rumit tersebut seperti contoh game terbaru, gadged terbaru,  theme atau template-template baru yang setiap hari bermunculan dan masih banyak lagi kalau mau ditulis he he.

Nah karena kita masih tahap pemula dalam kode-kodean dan sedang mencoba membuat tampilan blog lebih profesional, rapi, nyaman alias bikin betah visitor saat membaca tulisan yang kita posting. Selain membuat pengunjung nyaman karena keberadaan widget maupun penempatan iklan yang sesuai pada slotnya, kita sebagai empunya blog pun kerap kali bolak balik melihat perkembangan blog dan membanding-bandingkan dengan blog orang lain. Barang kali yang paling sering adalah masalah template dan ide tulisan yang tidak ada habis-habisnya.

Kembali ke judul posting dalam beberapa template sering kali kita menemui template yang hanya memiliki dua kolom atau satu sidebar, masalahnya kita menyukai tampilan demo template tersebut, tapi disatu sisi kita ingin mencari template dengan tampilan yang sama kecerahan bagcround yang sama dan ingin memiliki tiga kolom atau dua sidebar. dan ada juga sebaliknya sebagian orang suka dua kolom tapi demo template tersebut tiga kolom, nah bingung kan solusinya gimana?

Cara menambahnya
+ Login ke akun blogger
 - Pilih Template lalu cadangkan lalu save (buat antisipasi jika gagal)
+ Klik Edit HTML
+ Format Template

Langkah Pertama
Perhatikan kode berikut atau cari menggunakan Ctrl +F (jangan lupa format dulu sebelum mencari)
Setelah Format Template untuk lebih mudah mencarinya tekan ctrl +F ketik kata kunci Blog1 maka akan muncul kode seperti berikut :
======================================================
<div class='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</div>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>

======================================================
Kode diatas merupakan kode 'main-wrapper' yaitu (main posting). Sedangkan 'sidebar-wrapper' bawaan sidebar blog anda yang belum ditambah. posisi kode tersebut sesuai dengan template anda saat ini masing-masing (posisi biasanya yang sering kita jumpai disamping kanan).

Langkah Kedua
Memasukan kode sidebar baru untuk disamping kiri, copy kan script kode dibawah dan letakan diatas main-wrapper atau dibawa outer-wrapper
======================================================
<div class='sidebarkiri-wrapper'>
<b:section class='sidebar' id='sidebarkiri' showaddelement='yes'>
</div>
======================================================

Sehingga penempatan kodenya seperti ini

<div class='sidebarkiri-wrapper'>
<b:section class='sidebar' id='sidebarkiri' showaddelement='yes'>
</b:section>
</div>
<div class='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</div>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>

======================================================
Langkah Ketiga

Di langkah ketiga ini kita beralih ke bagian CSS untuk menyisipkan kode pembagian slot khusus  sidebar baru samping kiri tadi. Caranya cari kata kuncinya
.outer-wrapper atau #outer-wrapper sehingga akan muncul seperti script dibawah ini :

.outer-wrapper{position:relative;width:100%;padding:0}

Jika muncul seperti diatas itu artinya tampilan luarnya 100% relative, anda tidak perlu lagi mengubah lebarnya. Namun Jika muncul script kode atau scriptnya rada-rada mirip seperti dibawah ini

.outer-wrapper {width:840px;margin:0 auto;padding:10px;text-align:left;font: $bodyfont;}
atau
#outer-wrapper {width:840px;margin:0 auto;padding:10px;text-align:left;font: $bodyfont;}

Anda tinggal menyesuaikan tampilan luarnya. misalnya anda ingin mempersempit atau memperlebar


Selanjutanya mengurangi lebar main posting, Cari kata kunci .main-wrapper atau #main-wrapper sehingga akan tampil script atau scriptnya rada-rada mirip seperti dibawah 
.main-wrapper{width:840px;margin:0;float:left;word-wrap:break-word;overflow:hidden}
atau
#main-wrapper{width:840px;margin:0;float:left;word-wrap:break-word;overflow:hidden} 
Ubah lebar main-wrappernya menjadi Width:650px atau sesuaikan dengan main posting yang anda inginkan


Tahap Penting
Menambahkan kode script untuk sidebar kiri copy code dibawah, lalu pastekan dibawah sidebar wrapper. Caranya cari dengan kata kunci .sidebar-wrapper atau #sidebar-wrapper Sehingga muncul script seperti dibawah ini

.sidebar-wrapper{width:320px;font-size:13.3px;float:right;word-wrap:break-word;overflow:hidden}
atau
#sidebar-wrapper{width:320px;font-size:13.3px;float:right;word-wrap:break-word;overflow:hidden}

Lalu pastekan code berikut dibawah kode sidebar-wrapper

======================================================
.sidebarkiri-wrapper{width:180px;font-size:13.3px;float:left;word-wrap:break-word;overflow:hidden}  
atau
#sidebarkiri-wrapper{width:180px;font-size:13.3px;float:left;word-wrap:break-word;overflow:hidden}
 ======================================================

 Sehingga akan tampak seperti berikut ditemplate anda
======================================================
 .sidebar-wrapper{width:320px;font-size:13.3px;float:right;word-wrap:break-word;overflow:hidden}
.sidebarkiri-wrapper{width:180px;font-size:13.3px;float:left;word-wrap:break-word;overflow:hidden}
======================================================
Silahkan sesuaikan lebarnya sesuai kebutuhan anda, misal lebar sidebar-wrapper anda rubah menjadi width:300px, dan lebar sidebarkiri-wrapper anda rubah menjadi width:160px.
Perhatikan juga float:right dan float:left ini yang menentukan kedua sidebar akan ditampilkan di samping kanan (right) dan disamping kiri (left).

NB : Jika template anda menggunakan hashtag alias tanda Pagar(#), gunakan code tanda pagar. Dan jika template anda mengguna tanda titik gunakan tanda titik (.).

Langkah Keempat 

Simpan / SAVE Template Anda dan lihat hasilnya, belum berhasil? coba lagi ikuti tahapnya secara step by step.

Next..
Jika anda ingin mengapus salah satu sidebar atau kolom template yang kebetulan template anda sudah memiliki tiga kolom silahkan pahami langkah-langkah di atas. saya yakin anda menemukan solusinya :) bereksperimen mungkin akan menambah jam terbang di dunia template kwkwk :p

Salam Blogging