Cara Memperlebar Halaman Blog

Hore para sahabat..
saya tadi baru saja mencoba untuk memperlebar halaman blog saya..
jika tampilan standar dari blog sahabat pasti terdapat ruang di kanan-kiri blog sahabat yang lumayan lebar.
hal itu bisa dirubah dan bisa dimanfaatkan untuk tapilan dan gadget yang lain.

untuk itu sahabat harus merubah settingan HTML..sahabat sekarang akan bermain dengan kode-kode HTML,
jangan takut, saya yakin sahabat pasti bisa..buktinya saya juga bisa.

berikut langkah yang sahabat lakukan

1. log in di blogger sahabat
2. klik customize > page element > edit html
3. sekarang sahabat akan menemui kode-kode HTML. jangan bingung, saya akan tetap memandu
4. langkah awal adalah copy kode HTML sahabat dan paste di notepad, tujuannya adalah mengamankan settingan awal, sehingga jika terjadi sesuatu g tidak diinginkan bisa di copy-paste lagi.
5. tidak usah memberikan tanda centang pada kolom expand template widget karena hanya akan membingungkan saja
6. tekan control + f [ini adalah shortcut untuk mencari kode yg sahabat inginkan]
7. ketik #outer-wrapper

sahabat akan menemui

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

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word;
  overflow: hidden;   

#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 */
}


maksud dari tulisan yang saya pertebal adalah
#outer-wrapper --> kode untuk lebar halaman blog.
#main-wrapper --> kode untuk lebar postingan blog
#sidebar-wrapper --> kode untuk lebar sidebar blog.



gantilah angka widht pada ketiga wrapper diatas, angka yang perlu diganti saya beri warna merah. 
Blog saya menggunakan:
#outer-wrapper --> 900px
#main-wrapper --> 500px
#sidebar-wrapper --> 400px


sahabat boleh mencoba sesuai dengan keinginan.
setelah selesai settingan angka, masih ada satu lagi settingan yang perlu dirubah...carilah kode seperti di bawah ini


/* Footer
----------------------------------------------- */
#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;




widht pada footer sahabat ganti dengan angka yang sama dengan outer-wrapped yaitu 900px jika settingan yang saya pakai..

jangan di simpan dulu,...lakukan preview....jika terjadi perubahan maka dapat sahabat SAVE

SELAMAT MENCOBA!!!


"ILMU UNTUK DIBAGI BUKAN DI BAWA MATI"

1 komentar:

Author
avatar

makasih bos infonya ini penting banget bgi newbie kayak aku, tukeran link ya nos

Reply