Find What You Need

28 Des 2009

Kode Menambah tiga kolom Di bawah Header

Untuk anda yang senang memasang berbagai gadget di Blog , dan ingin memasangnya di bawah header tentu sedikit kecewa karena karena cuma satu yang disediakan pada template asli blogger .Nah, jika anda ingin menambah misalnya tiga kolom itu sangat mudah sekali, apalagi jika anda pernah membaca postingan saya tentang "Membuat Tiga Kolom dibawah Posting". Jika anda belum sempat membacanya, silahkan baca dulu disini, biar nantinya anda lebih paham dan lebih mudah dalam menerapkannya.


 Pada postingan mengenai membuat tiga kolom dibawah posting, hasilnya seperti gambar ini :



Nah , jika anda sudah selesai membaca postingan yang disebutkan diatas, sekarang anda
Sign In ke Draft Blogger
Dalam Dasbor --> Tata Letak --> Edit HTML
Pada postingan "Membuat Tiga Kolom dibawah Posting",kodenya seperti ini :

/* Bottom
---------------------------- */

#bottom {
width: 930px;
position: relative;
clear:both;
margin: 0 auto;
color:#000;
float: left;
padding: 0;
}



#left-bottom {
width: 290px;
float: left;
margin:0;
padding:7px 10px;
}

#center-bottom {
width: 290px;
float: left;
margin:0;
padding:7px 10px;
}

#right-bottom {
width: 290px;
float: left;
margin:0;
padding:7px 10px;
}

  
  nah anda tinggal menduplikat kode yang diatas. kemudian anda ganti nama yang diwarnai merah. Misalnya, karena akan ditempatkan dibawah header yang posisinya diatas maka nama bottom anda rubah menjadi atas,  top atau sesuai kehendak anda. Sedangkan untuk ukuran lebar / width anda rubah sesuai ukuran lebar template anda.
  
Biar lebih cepat copy saja kode berikut :

/* Atas
---------------------------- */

#atas {
width: 930px;
position: relative;
clear:both;
margin: 0 auto;
color:#000;
float: left;
padding: 0;
}

#left-atas {
width: 290px;
float: left;
margin:0;
padding:7px 10px;
}

#center-atas {
width: 290px;
float: left;
margin:0;
padding:7px 10px;
}

#right-atas {
width: 290px;
float: left;
margin:0;
padding:7px 10px;


Tempatkan diatas kode ini   ]]></b:skin> 

Pada postingan yang lalu, id untuk bottom adalah

<div id='bottom'>

<b:section class='bottom' id='left-bottom'/>

<b:section class='bottom' id='center-bottom'/>

<b:section class='bottom' id='right-bottom'/>

</div> 


Cari kode ini :

 <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
</b:section>
      </div> 


Nah, anda ganti deh nama yang berwarna merah dengan atas , jadi seperti ini , kemudian anda copy .


<div id='atas'>

<b:section class='atas' id='left-atas' maxwidgets='1'>

<b:section class='atas' id='center-atas' maxwidgets='1'/>

<b:section class='atas' id='right-atas' maxwidgets='1'/>

</div> 
 

  Pastekan deh kode yang diatas, di atasnya kode ini :

<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
</b:section>
      </div>


Simpan Template 

Maka template anda jika berhasil seperti ini :

 


**** Semoga Berhasil **** 

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

Berlangganan Lewat RSS

0 komentar:

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