GOLDEN INFO: CARA MEMODIFIKASI TEMPLATE MENJADI 3 KOLOM ( Versi 1 )

CARA MEMODIFIKASI TEMPLATE MENJADI 3 KOLOM ( Versi 1 )

Pekerjaan mengutak atik suatu barang merupakan pekerjaan yang mengasikkan. Anda pasti akan merasa penasaran ,khususnya bagi Anda yang baru mendapatkan barang baru, akan berusaha mengubah tampilan barang baru tersebut jika barang itu masih original. Kebiasan seperti itu merupakan salah satu ciri orang kreatif.

Oke !! Sekarang kita langsung saja ke pokok permasalahan. Bagi Anda yang baru buat Blog awalnya pasti belum puas melihat design blognya, misalnya tampilan templatenya baru dalam bentuk dua kolom. Apabila Anda berniat memasang iklan atau gambar tentu akan merasakan kekurangan space blog tersebut. Jadi…… Bagaimana caranya agar dapat memodifikasi design original blog Anda yang 2 (dua ) kolom menjadi 3 (tiga ) kolom.

Begini Caranya, ikuti ya dengan serius……..

Langkah Pertama :

Cari Tab “ Tata Letak “, kemudian dibawahnya ada tab “ Edit HTML “ , setelah itu akan terlihat display Edit Template dibawanya ada kotak kode-kode bahasa program . Dan diatas kotak disebelah kanan kotak kecil dengan tulisan “ Expand Template Widget “. Dan kotak kecil tersebut “jangan” Anda contreng karena akan muncul kode-kode yang membingungkan ( khusus yang tak mengerti bahasa program ).

Langkah Kedua :

Agar lebih aman dalam memodifikasi Template Anda, sebaiknya Anda “Backup” template origin anda yang ada didalam kotak besar tersebut dengan copy-paste ke Notepad atau Microsoft Word. Tujuannya adalah apabila terjadi error atau template yang berantakan Anda bisa copy-paste kembali.

Langkah Ketiga :

Cari kode dibawah masih di tab “ Edit HTML “ dengan cara cepat yakni tekan tombol “Ctrl” + F, maka dibawah kiri bawah layar monitor Anda akan ada kota kecil untuk find, kemudian tulis dikotak tersebut kode : #outer-wrapper {

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px ;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Kode tersebut merupakan luas kotak terluar dari Blog Anda, dan apabila ingin membuat lebih lebar silahkan ganti kode merah width : 990 px; ( ini terserah anda, terkadang ada menggunakan kode %, dalam contoh ini satuannya dalam px = pixel ).

Setelah itu Anda klik “ Save Template “

Langkah Keempat :

Setelah di save maka coba perhatikan hasilnya dengan mengklik tab Lihat Blog, bagaimana ?? Ada perubahan ??

Sekarang masuk kembali ke tab menu “ Edit HTML “ . Dan tugas selanjutnya adalah Anda cari kode script berikut ( masih dengan kotak find, “Ctrl+F ) :

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}

Kemudian Anda copy seluruh kode diatas dan paste kan dibawahnya, lalu ubah kode float : $endSide ; menjadi float :$startSide; , kode #sidebar-wrapper { menjadi #second-sidebar-wrapper { , akan terlihat seperti dibawah ini :

#second-sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}

Mengenai lebarnya ( width ) bisa Anda sesuaikan dengan terlbih dahulu melihat script kode berikut :

#main-wrapper {
width: 500px;
float: $endSide;
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 diatas merupakan kotak utama tempat kita buat postingan artikel/tulisan. Maka kesimpulan dapat dirumuskan sebagai berikut :

#outer-wrapper = #main-wrapper + #side-wrapper + #second-side-wrapper + 50

990px = 500px + 220px + 220px + 50px

50px adalah jarak antara kolom tersebut ( ukurannya tergantung anda )

Dan Anda Klik “ Save Template “ tugas diatas.

Langkah Kelima :

Coba Anda cari script berikut :

Lalu tugas Anda selanjutnya adalah tulis atau letakkan kode berikut dibawah kode script diatas.

Dan akhirnya Anda klik kembali “ Save Template “

Dan masuk ke tab “ Elemen Halaman “ Anda lihat APA YANG TERJADI ??? wah kayak Om Mario Teguh saja nich.

Dan apabila sidebar posisi terlalu mepet satu sama lain, Anda bisa menambahkan seperti dibawah (tulisan warna merah )

#second-sidebar-wrapper {
width: 220px;
padding-left:10px;
float: $startSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}

Hasilnya seperti Blog Golden Info ini. Dan sekarang tugas Anda , Selamat mengutak-atik kode-kode tersebut. God Luck !!!!

O ya apabila Anda ingin modifikasi posisi sidebar-wrapper ada di kiri dan kanan dari main-wrapper, silahkan lihat modifikasi versi 2….: ….