Home » » Cara Mengubah Lebar Dan Luas Template

Cara Mengubah Lebar Dan Luas Template

Written By Hidayahtullah Abdi Robhani on Minggu, 22 Mei 2011 | 19.06


Sebelum mengubah ukuran-ukuran blog sobat harus mengerti elemen-elemen apa saja yang ada di dalam sebuat templet dasar,kalau begitu mari kita lihat bersama-sama gambar berikut ini untuk mengetahui beberapa elemen dasar yang ada dalam sebuah templet blogspot.


Kalau sudah paham langsung kita ke tahap pengeditan halaman langsung saja ke TK.....P

1. Login ke Blog Kamu
2. Klik tata Letak
3. Klik Edit HTML
4. Disarankan sebelum mengedit Kode Html kamu,silahkan kamu membackup Code HTML kamu, demi keamanan, jika terjadi sesuatu yang tidak di inginkan,dikarenakan untuk mengedit bagia-bagian ini perlu dengan keserasian dan ketelitian untuk mengubah bentuk blog sobat.


* Untuk mengedit ukuran Halaman Blog

Cari kode di bawah ini:

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


Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar halaman blog, kamu cukup merubah angka pada width sesuai dengan keinginan sobat.


* Untuk mengedit 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 */
}


Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Halaman Posting, sobat cukup merubah angka pada width sesuai dengan keinginan sobat.


* Untuk mengedit ukuran Sidebar Blog

Cari Code 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 */
}



Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Side Bar Blog, sobat cukup merubah angka pada width sesuai dengan keinginan sobat.

* Untuk mengedit ukuran Header Blog,

Cari Code di bawah ini:

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


Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Header Blog, sobat cukup merubah angka pada width sesuai dengan keinginan sobat.


* Untuk mengedit 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 memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Footer Blog, sobat cukup merubah angka pada width sesuai dengan keinginan sobat.


Catatan:
Jika lebar salah satu dari kelima elemen yang telah di sebut 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 merubah 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 mempercantik blog anda justru ujung-ujungnya malah merusak blog anda sendiri maka dari sobat sebelum mengedit ke tahap ini selalu ingat membackup template dulu....
Share this article :
Comments
2 Comments

2 komentar:

  1. Wah, ini bagus banget, sangat bermanfaat bagi blogger yg masih newbie, thanks yah atas postingannya

    Salam spirit dari Fahri's Articles

    BalasHapus

 
Support : Hidayahtullah Abdi Robhani
Copyright © 2013. Electricle - All Rights Reserved
Thanks for visiting Electricles Copyright © by Abdi Robhani
This site was built on 10th January 2011 from Blogger