Cara Lebarkan Sidebar Blog

Ini adalah post terbaru yang dicopynpaste, cara melebarkan sidebar blog .
Cara Lebarkan Sidebar Blog Setiap blogger perlu faham beberapa asas penting template standard blogger yang mempunyai Header, Outer dan Footer. Kalau kita tak tahu asas binaan rumah kita, macam mana nak buat renovation, kan?
Untuk Outer kita mempunyai:
Main – tempat kita menyimpan posting / entri
Sidebar – tempat kita menyimpan berbagai tools dan aksesori untuk mencantikkan blog.
Outer-Wrapper menyimpan nilai dalam pixel main-wrapper serta sidebar-wrapper. Luas blog kita keseluruhan kiri dan kanan .

1. Mula² Dashboard > Layout > Edit HTML > cari code Outer-Wrapper seperti di bawah : Ini contoh code asas, saya rasa setiap blog mempunyai nilai px untuk Outer Wrapper yang berbeza.

/* Outer-Wrapper
—————————————— */
#outer-wrapper {
width: 840px;
 margin:0 auto;
padding:10px;
 text-align:left;
font: $bodyfont;
}
#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 */
}
#sidebar-wrapper {
width: 220px; float: right;
padding-left:10px; /* yg ini tambahan supaya ada jarak */
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 */

Sebelum mengubah lebar sidebar fikirkan dulu sama ada akan mengekalkan nilai lebar Outer-wrapper atau hanya kecilkan Main wrapper dan lebarkan sidebar.

1. Kalau nak kekalkan Outer Wrapper – lebar bahagian isi entri dikecilkan dan sidebar dibesarkan. sidebar-wrapper = width: 220px – tambah nilai px tersebut tetapi kena kurangkan nilai main-wrapper = width: 410px; Contoh sidebar wrapper jadikan 250px ( ditambah 30px ) , main wrapper kenalah tolak 30px , jadi nilai main wrapper = 380px

2. Kalau nak kekalkan Main Wrapper – maksudnya lebar bahagian isi entri masih sama jadi board blog ( Outer wrapper ) itu sendiri yang perlu dibesarkan.
Outer-wrapper (width: 840px ) di tambah . Contohnya kita tambah 30px jadikan 870 px. Sekarang sidebar-wrapper = width: 220px + 30px = 250px
Kalau gunakan cara ini, ganti juga nilai pixel bagi Header Wrapper dan Footer Wrapper sama dengan nilai Outer Wrapper yang baru. Dalam kes ini menjadi 870px

 /* Header
———————————————–
*/
#header-wrapper {
width:870px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
dan
/* Footer
 ———————————————–
*/
#footer { width:870px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.
1em; text-align: center;
}

NOTA:- Nilai px dalam tutorial ini mungkin tidak sama dengan nilai px dalam blog anda. Tambah atau kurang nilainya bergantung pada kehendak anda sendiri. Ini hanyalah contoh asas.

Jangan buat ubahsuai di blog utama dahulu, create satu blog untuk tujuan belajar . Kita perlu mengetahui dan merekodkan apa juga kesalahan atau kemajuan yang telah kita lalui, apa yang boleh dicapai dan kegagalan demi rujukan di masa depan. Kempen kenali blog anda…Selamat mencuba...

Ketahui Bagaimana Suri Rumah menambah pendaptan http://globalinvestments.stiforpmy.com/

NAMA ANDA - Selasa, Mei 03, 2011

MASUKKAN TOMBOL TWEET DISINI