Find What You Need

23 Des 2009

Menambah Lebar Dan Tambah Kolom Template Blogger

Coba anda perhatikan gambar template ini, itu adalah template asli blogger. Hampir semua Template bawaan Blogger semuanya terdiri dari dua kolom, yaitu kolom untuk posting dan kolom sidebar untuk menempatkan Widget.
   Sekarang pertanyaannya apa bisa template itu lebarnya ditambah sekaligus menambah kolom ?, jawabnya tentu saja bisa. Saya akan tunjukan bagaimana caranya menambah lebar kolom template sekaligus menambah kolom baru.

Silahkan anda Log In di Draft Blogger
Dalam Dasbor  masuk Tata Letak -> Edit HTML
Jangan centang Expand Widget Template
Kemudian anda cari kode seperti ini (sebagai catatan penamaan kode untuk tiap template mungkin saja berbeda, Tapi pada dasarnya sama).Sebagai contoh kode ini diambil dari template Minima :

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


/* 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; /* 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: $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 */
}

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

Untuk merubah lebar template, anda cuma tinggal merubah angka yang di tandai warna merah. Terserah anda ukurannya mau berapa. Sebagai contoh saja, saya akan merubah ukuran dari angka-angka yang ditandai warna merah, menjadi seperti ini :

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


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

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

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

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

Setelah anda merubah ukuran seperti di atas, otomatis sekarang template anda lebarnya telah bertambah. Tetapi , karena main dan sidebar wrapper belum diubah ukurannya, otomatis template anda mempunyai space yang kosong. Untuk menambah kekosongan itu, kita akan buatkan kolom sidebar yang baru sebagai tempat untuk menempatkan berbagai widget nantinya.
Silahkan anda copy kode untuk penambahan kolom sidebar dibawah ini :

#widget-wrapper {
  width: 220px;
  float: right;
  padding: 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 */
}

Tempatkan dibawah sidebar-wrapper sehingga nanti urutannya seperti ini :

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

#main-wrapper {
  width: 410px;   /* ubah juga nilai ini ganti dengan 470 */
  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;
  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 */
}

#widget-wrapper {
  width: 200px;
  float: right;
  padding-left: 10px;
  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 */
}

Beres yang diatas, sekarang anda copy kode berikut :

<div id='widget-wrapper'>
        <b:section class='sidebar' id='widget' preferred='yes'>
</b:section>
      </div>

Kemudian anda simpan dibawah kode ini :

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>

Jadi urutannya seperti ini :

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>

<div id='widget-wrapper'>
        <b:section class='sidebar' id='widget' preferred='yes'>
</b:section>
      </div>

Simpan Template, sekarang coba lihat hasilnya.



                                            **** Semoga Berhasil ****

Untuk mendapatkan informasi dan postingan terbaru dari blog ini, silahkan ketikkan email anda di form berlangganan. Gratiiiis...

Berlangganan Lewat RSS

14 komentar:

ambia Pada 3 Januari 2010 10.03 mengatakan...

makasih sobat, aku lagi mau nambah kolom di templatku nih , untung aja mampir ke blog ini. sekali lagi thank..

mutiara amaliani ™ Pada 7 Januari 2010 13.45 mengatakan...

makasihh :D

ciungtips.co.cc Pada 15 Januari 2010 07.50 mengatakan...

uhm,nice tips tq.,mampir..dumb.

musaragis.blog Pada 2 Februari 2010 16.29 mengatakan...

Kalau ada sobat yg mau nambah lebar kolom sidebar blog,pakai panduan di atas saya jamin berhasil dan tidak error!!Thanks banget ya mas atas postingan ini.

Albani Pada 3 Februari 2010 07.29 mengatakan...

Sama2, saya juga lg belajar, mas. Kita sama2 belajar saja untuk kemajuan bersama:)

cuaryos Pada 2 Maret 2010 21.39 mengatakan...

bro kok tak cuba masih bolong disamping kiri .tambah dong trik nya biar bisa selaras dengan normal screen bukan wide screen.. biar ok... thank

cuaryos Pada 2 Maret 2010 22.06 mengatakan...

thank brother dah bisa salah masukin value

http://cuaryos.blogspot.com/

jagatloka Pada 11 Juni 2010 16.52 mengatakan...

bos saya utak-atik ko malah hilang kolom yang di sebelah kananya yah

. Pada 7 Oktober 2010 13.52 mengatakan...

Bos mo nanya backgraund blog bos ini ko bisa 2 warna, itu 1 file atau setinganya berbeda (latar HITAM dibelakang header itu gmna yah buatnya ) . . .

Anonim mengatakan...

Terima kasih, matur nuwun, Thank you, sekelangkong, mauliate, merci.:D

Bloggerbaru Pada 19 April 2011 19.44 mengatakan...

tuh buat yang nanya buat latar background blog beda, udah ada postingannya..
silahkan lihat disini.. :-* :D

Kolom Blogspot Blogger

DIGScalledDony Pada 25 Juli 2011 21.22 mengatakan...

agak ribet broo .. :D

Download Game/Software/Anime/Movie/Film Pada 9 Agustus 2012 03.54 mengatakan...

Terima kasih tipsnya kapan2 akan saya coba,karena template saya dah cukup nyaman sepertinya.hehehe.......

Blogger Gundul Pada 26 September 2012 20.37 mengatakan...

Sekarang template bawaan Blogger dah ada pengaturan lebar, tapi klo kita pake template orang lain, apa harus semua diganti kayak gitu Sob?

Posting Komentar

Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.

Ketikkan Karakter Jika Ingin Memasang Emoticon.
:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*:|8-}~x(:-tb-(:-Lx(=))

Artikel Yang Lainnya

 

My Best Friend

Mengenai Saya

Foto saya
Sebagai tempat belajar dan menyimpan arsip jika saya membutuhkannya suatu waktu, dan semoga menjadi ilmu yg Bermanfaat bagi Orang yang membacanya .

Visitor

free counters

Belajar Bersama Copyright © 2009 Template Wanaking Di Desain Ulang Oleh Albaniyu | Blogger Template