Tips Merubah Lebar Template Downloadan

Biasanya bagi temen temen yang memakai template yang berasal dari template gratisan atau mendapatakan template diluar dari yang disediakan oleh blogspot nya, maka untuk pengaturan template standarnya dihilangkan maka dari itu disini saya akan mencoba membahas tips bagaimana merubah ukuran template kita agar pas di tampilan dengan hati kita, melalui edit code HTML nya...

Tips mengatur ukuran dari template blog kita meliputi Mengubah Ukuran Halaman Blog, Mengubah Halaman Posting, Mengubah Ukuran Header, Mengubah Ukuran Sidebar, atau Mengubah Ukuran Footer. Tenang saya akan membahas semuanya sekaligus. Mungkin akan sulit menemukan Template Blog yang cocok dengan selera anda dan utamanya bahwa Template Blog diibaratkan seperti sebuah tampilan rumah yang indah, bagus, dan mempesona agar banyak orang yang ingin berkunjung di Blog anda.


Tapi bukan hanya tampilan saja yang digunakan melainkan tata letak dan ukuran setiap konten haruslah sesuai dengan isi dari blog itu sendiri, mungkin juga anda ingin mengedit ukuran inilah itulah agar semua terlihat seperti keigninan anda. Ok kita langsung saja ke TKP,
Ikuti langkah berikut :
1.  Login ke Blog anda
2. Klik "Design"
3. Klik/pilih "Edit HTML"

- Saya sarankan sebelum Mengedit HTML di Blog anda, silahkan BackUp Template terlebih dahulu agar nantinya jika terjadi sesuatu yang tidak di inginkan anda bisa memasang template semula yang belum anda  Edit HTML nya. (dan setelah di Edit jangan langsung di save, cukup di Preview/Pratinjau lebih dahulu, bila sudah sesuai dengan keinginan anda barulah save hasil Editan tadi).

Untuk mengubah ukuran Halaman Blog

Cari kode di bawah ini:


#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Untuk mengubah ukuran Halaman Posting

Cari kode di bawah ini:

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}

Untuk mengubah ukuran Sidebar Blog

Cari kode di bawah ini:

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
} 


Untuk mengubah ukuran Header Blog 
Cari kode di bawah ini:

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

Untuk mengubah ukuran Footer Blog

Cari Code di bawah 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;
}

Keterangan:

Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F

Untuk mengubah ukuran nya, anda cukup mengubah angka pada width (warna merah) sesuai dengan keinginan 

Perhatian:

Jika lebar salah satu dari kelima elemen di atas (Halaman Blog, Halaman Posting, Side Bar Blog, Header Blog, dan Footer Blog) diubah, maka akan mempengaruhi keserasian elemen yang lain. Oleh karena itu, jika anda ingin mengubah lebar salah satu elemen, maka anda juga harus menyesuaikan dengan lebar elemen yang lain, karena jika antara satu elemen yang satu dengan yang lain tidak serasi, maka tampilan blog anda akan menjadi kacau, anda tidak mau kan kalau tujuan anda yang mulanya ingin menyesuaikan tampilan blog anda sesuai keinginan dan selera anda malah justru merusak blog anda sendiri. Seperti yang sudah saya bilang diatas, jangan langsung di save melainkan di preview/pratinjau terlebih dahulu, jika sudah sesuai dengan keinginan anda barulah di save.