16
Cara Memperbesar Kolom Blog

.
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

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


Bookmark and Share


16 komentar :

Anto Suryanto mengatakan... [Reply to comment]

nais inpo gan.. :D

masyasri mengatakan... [Reply to comment]

kalau ingin mengmenggeser kontak komentar agar tidak terlalu mepet gimana gan?

Download game Gratis mengatakan... [Reply to comment]

terimakasih untuk tutorialnya kawan

unixs share mengatakan... [Reply to comment]

Terimakasih infonya gan, cara ini berhasil, memang kita hanya menyesuaikan ukuran nya dengan template kita . . .

unixs share

Ardityaramdhan mengatakan... [Reply to comment]

saya ga ketemu sama

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

ada d mana ya gan???

Ujie Caprone mengatakan... [Reply to comment]

@Idhan: Coba cari yg ini aja
#sidebar-wrapper

Ujie Caprone mengatakan... [Reply to comment]

@Ilmuini: ya sama aja tinggal cari "comment"..
Sebelum mencoba jangan lupa back up dulua ya, krn klu gagal bisa dikembalikan lagi. Jangan takut mencoba gan...

rihsan mengatakan... [Reply to comment]

mantap sob

internet gratis dan premium account liat di

>>www.kutas-s.blogspot.com

dotriz mengatakan... [Reply to comment]

tempat saya gak nemu #footer {
ada dimana ua gan?

Cara Memperbesar mengatakan... [Reply to comment]

makasih sharenya...

Imam mengatakan... [Reply to comment]

makasih mas..... tapi koq ada perbedaan ya antara template yan satu dengan template yang lain

Hunian Impian mengatakan... [Reply to comment]

Thanks Banget Infonya ya :)

Fastest Way to Lose Belly Fat mengatakan... [Reply to comment]

klo width:660px;
margin:0 auto 10px; itu kita tuliss terserahh gpp kan??

Unknown mengatakan... [Reply to comment]

kalau template bawaan dari perancang template gemana mas...?, soalnya kode-kode:
#outer-wrapper {
#main-wrapper {
#sidebar-wrapper
mohon solusinya bang..???

islam news mengatakan... [Reply to comment]

top

Anonim mengatakan... [Reply to comment]

click this site louis vuitton replica my company Prada Dolabuy Your Domain Name go to the website

Posting Komentar

Silahkan tinggalkan komentar anda disini...

 
Ujie Caprone | © 2011 Blogger Template by Ujiecaprone.com