Membuat 3 (Tiga) Kolom di Bawah Header

Sunday, June 27, 2010
Berikut ini adalah cara membuat 3 kolom dibawah header pada template minima blogger / blogspot.

A. Langkah I

1. Log in ke akun blogger.

2. Setelah masuk ke akun blogger, kemudian klik menu "Tata Letak" atau 'Lay out"

3..Klik "Edit HTML" untuk masuk ke halaman pengeditan kode template.

4. Centang kotak kecil yang berada di sebelah kiri kalimat "Expand template widget" kemudian back up (copy paste) seluruh kode template di notepad. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan kode template.

5. Copy semua kode berikut ini :

#bawah_header-wrapper { width:660px; position: relative; clear:both; margin:15px 0 0 0; color:#000; float:$startSide; padding:10px 0 10px 0; background:#660000; }

#bawah_header .widget{ padding:3px; margin: 1px 1px 1px 1px; background:#ffffff;}
#bawah1 { width:210px; float:$startSide; margin:0 0 0 0; padding:0; display:inline; }


#bawah2 { width:210px; float:$startSide; margin:0 0 0 1px; padding:0; }

#bawah3 { width:210px; float:$endSide; margin:0 0 0 0; padding:0; display:inline; }


6. Letakkan tepat diatas kode berikut ini :

#main-wrapper{

B. Langkah II

1. Copy semua kode berikut ini :



<div id='content-wrapper'><div id='crosscol-wrapper' showaddelement='no' style='text-align:center'>
</div>
<div id='bawah_header-wrapper'>
<div id='bawah1'>
<b:section class='bawah_header' id='bawahheader1' preferred='yes'/>
</div>
<div id='bawah2'>
<b:section class='bawah_header' id='bawahheader2' preferred='yes'/>
</div>
<div id='bawah3'>
<b:section class='bawah_header' id='bawahheader3' preferred='yes'/>
</div></div></div>


2. Letakkan tepat di dibawah atau di atas kode berikut ini:
<div id='content-wrapper'>

3. Simpan template

4. Lihat hasilnya pada halaman "Page Element" atau "Elemen Laman".

5. Selesai.

Untuk mengubah lebar masing-masing kolom, silakan fokus pada kode width: . Ubahlah angka yang ada tepat setelah kode tersebut jika ingin mengubah lebar masing-masing kolom.

Jika ada yang kurang jelas atau kegagalan, maka silakan sampaikan.
Terima kasih..
Semoga bermanfaat ...

Comments :

1 komentar ke "Membuat 3 (Tiga) Kolom di Bawah Header"

dion on May 9, 2011 at 5:57 PM said...

bagus artikelnya sob....

indeks-data


Post a Comment

Silakan berkomentar sesuka Anda. Namun jangan spam, berbau SARA, kekerasan, porno atau intimidasi terhadap orang lain. Komentar yang melewati batas akan di hapus. Terima kasih.

Get Update

Masukkan alamat e-mail Anda pada kotak di bawah ini untuk mendapatkan update terbaru dan berlangganan catatan dari blog "The Notes Web" via e-mail :


Privacy guaranteed, we will never share your e-mail.

Komentar terbaru

Catatan Terbaru

Komentar Terbaru