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
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;
}
#header-wrapper {
width:760px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
#footer {
width:760px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
#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
18 comments:
nice post
kalo template yg udah banyak gadget tmbahan bisa ga dilebarin??
bisa aja bro
Trims infonya. Bagus, sederhana dan mudah dipahami. Ana mo coba dulu n moga berhasil
wah thankz bro dah q cb dan berhasillll!!!mampir ya www.devildivinity.blogspot.com
thanks brooo
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
saya pake tempelate standaert blogger, tapi kode HTMLnya ga sama?
Outer wrappernya?
thanks n jangan lupa backlinnya n klo mau tukeran link segera kunjungi blog saya
thank infonya
mas kan saya coba lebaarin.. ko sidebar nya jd pindah ke bawah ya begitu di tambahin pxnya? itu knp ya?
langsung sukses sob.. mantap banget tutorialnya.. makasih yua.. nice info...
tankyu boss
untung ada sobat jadi agak lebar dikit blog wa, trims ya sob 'n slam kenal
http://albertpynstein.blogspot.com
silaturahmi sob
thanx infox..
Posting Komentar