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