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 :

19 comments:

Trik Bloging mengatakan...
Komentar ini telah dihapus oleh pengarang.
epl mania mengatakan...

nice post

gdpermana mengatakan...

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

trik blogging mengatakan...

bisa aja bro

yoga.destiny mengatakan...

thanks atas infonya

Jabir mengatakan...

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

devil mengatakan...

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

r3nDrArrc mengatakan...

thanks brooo

Syaiful Rahman,S.ST 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

Arry mengatakan...

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

andayuna mengatakan...

Outer wrappernya?

ibnumasrupa mengatakan...

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

Karsy mengatakan...

thank infonya

petzy 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...

HADY QMS mengatakan...

tankyu boss

albertpynstein mengatakan...

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

Rudy Hartono mengatakan...

silaturahmi sob

Agusstyn cezt mengatakan...

thanx infox..

Posting Komentar

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