Cara memperlebar kolom pada templates blog

Setelah beberapa hari tidak up date blog, gatal juga pengen kasih sesuatu heee, tapi yan gini Cuma trik sederhana cara meperlebar kolom pada templates blog kita, tetapi untuk templates bawaan dari blogger, bukan dari templates yang sudah dimodifikasi
Sebelum kita masuk ke masalah ada baiknya kita mengenal dulu bagian- bagian dari templates blogger, maka sebuah template akan mempunyai tiga elemen penting, yaitu :
Elemen Header
Elemen Outer
Elemen Footer
Untuk elemen Outer di bagi kembali menjadi :
Elemen main, elemen main ini adalah elemen tempat kita menyimpan posting, jadi apabila kita memposting sebuah artikel maka akan masuk dan di tampilkan pada elemen ini

Elemen Sidebar, elemen sidebar ini adalah merupakan elemen untuk menyimpan berbagai blog tools ataupun aksesori yang kita inginkan untuk mempercantik blog.

Outer-Wrapper merupakan wadah untuk menyimpan main-wrapper serta sidebar-wrapper. Jadi jika kita ingin menambah kolom baru atau dengan kata lain sidebar baru, maka hal yang pertama wajib di lakukan adalah menambah nilai lebar dari Outer-wrapper itu sendiri

Nah sekarang bagaimana cara melebarkan kolom yang ada pada templates kita, tetapi sekali lagi ingat ini hanya untuk tempalates yang masih asli bawaan dari blogger atau templates minima,

Ikuti langkah2 berikut ini tapi dengan catatan jangan mencentang Expand Widget Template, karena akan muncul kode-kode yang tidak saya mengerti

Nah Langkah pertama cari kode seperti dibawah ini

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Ganti 660px menjadi 760px sehingga menjadi seperti bawah ini

#header-wrapper {
width:760px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
cari kode seperti dibawah ini

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Ganti 660px menjadi 760px dan scriptnya menjadi seperti dibawah ini

#footer {
width:760px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
nah untuk wadah nya istilahnya kita sudah memperlebar dari 660px menjadi 760px maka kolom sidebarnya bisa kita tambahin lebar 100px dan untuk menambahkan lebar sidebarnya kita tinggal mencari kode di bawah ini

#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 */
}

ganti 220px menjadi 320px ( atau selebar jumalah yang kita tambah tadi )jika kita ingin menambah lebar lagi tergantung berapa px yang kita tambah saat di #header-wrapper { dan footernya tadi,


jika yang ingin diperlebar main atau kolom utamanya yang biasanya berisi tentang postingan kita, maka kita tingagl cari kode di bawah ini


#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 */
}

Tapi ingat jika kita menambahkan lebar keduanya kita juga harus menambah jumlah px yang kita tambahkan di #header-wrapper, dan footer-wrapernya tadi
ok selamat mencoba , tapi ingat jangan mencoba pada blog utama kita terlebih dahulu, coba pada blog percobaan dulu
semoga berhasil.. pren

Share on :

18 comments:

Admin mengatakan...
Komentar ini telah dihapus oleh pengarang.
Admin mengatakan...

nice post

Anonim mengatakan...

kalo template yg udah banyak gadget tmbahan bisa ga dilebarin??

trik blogging mengatakan...

bisa aja bro

Jabir mengatakan...

Trims infonya. Bagus, sederhana dan mudah dipahami. Ana mo coba dulu n moga berhasil

Anonim mengatakan...

wah thankz bro dah q cb dan berhasillll!!!mampir ya www.devildivinity.blogspot.com

r3nDrArrc mengatakan...

thanks brooo

Syaiful Rahman mengatakan...

Aku mau mencoba memperlebar, seperti tutor anda, aku menggunakan template asli milik Blogger, tapi kok nggak sama. Jadi aku nyerah, anda bisa bantu.
Makasih dulu

Mr. Love mengatakan...

saya pake tempelate standaert blogger, tapi kode HTMLnya ga sama?

Anonim mengatakan...

Outer wrappernya?

Alfry Aryo A mengatakan...

thanks n jangan lupa backlinnya n klo mau tukeran link segera kunjungi blog saya

Unknown mengatakan...

thank infonya

Anonim mengatakan...

mas kan saya coba lebaarin.. ko sidebar nya jd pindah ke bawah ya begitu di tambahin pxnya? itu knp ya?

afey aja mengatakan...

langsung sukses sob.. mantap banget tutorialnya.. makasih yua.. nice info...

Anonim mengatakan...

tankyu boss

Albert Pynstein mengatakan...

untung ada sobat jadi agak lebar dikit blog wa, trims ya sob 'n slam kenal
http://albertpynstein.blogspot.com

Anonim mengatakan...

silaturahmi sob

Agustin mengatakan...

thanx infox..

Posting Komentar

Cara Ngeblog Copyright © 2011 | Template created by O Pregador | Powered by Blogger