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, ……..
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; , dan 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 :
<b:section class="'main'" id="'main" showaddelement="'no'">
<b:widget id="'Blog1'" locked="'true" title="'Blog" type="'Blog'/">
</b:widget>
</b:section></div>
<div id="'sidebar-wrapper'">
<b:section class="'sidebar'" id="'sidebar'" preferred="'yes'">
<b:widget id="Profile2" locked="false" title="About Me" type="Profile">
<b:widget id="BlogArchive2" locked="false" title="blog Archive" type="BlogArchive2">
<b:widget id="followers2" locked="false" title="Followers" type="Followers">
</b:widget>
</b:widget></b:widget></b:section></div>
Lalu tugas Anda selanjutnya adalah copy dan paste kode dibawah ini dibawah kode script diatas.
<b:section class='sidebar' id='second-sidebar' preferred='yes'/>
</div>
Dan akhirnya Anda klik kembali “ Save Template “
Dan masuk ke tab “ Elemen Halaman “, Lihat apa yang terjadi saudara-saudara ??? wah kayak orator 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 Make Money Online 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 template versi 2
From gustiandri
Posts
