CARA MEMBUAT 2 COLOM/ELEMEN DI BAWAH SIDEBAR

Cara Membuat 2 Colom/elemen di bawah sidebar,itu yang mau saya shere kali ini,saya yakin pasti ada beberapa sobat tidak puas dengan jumlah elemant yang ada,sama seperti saya,lalu saya coba2 yari reverensi tentang menambah elemen / colom di bawah sidebar,akhirnya setelah sekian lama mencari ku temukan juga, saya temukan di blog sahabat Abdu-Green ,ternyata setelah saya baca cara membuat colom  dibawah sidebar nggak sesulit yang aku bayangin,sobat semua pasti juag bisa,langsung aja deh saya jelaskan satu-persatu.
 contoh sebelum di edit

dan cara membuat 2 colom dibawah sidebar yaitu:

1. login ke blogger
2. masuk ke rancangan >> edit HTML
3. [sebagai contoh]cari kode seperti di bawah ini


#sidebar-wrapper {
float:left;
width:320px;
padding:5px;
margin:0;
}

4. agar sesuai dengan contoh diatas,tambahkan kode berikut di bawah kode no 3

#sidebar-kiri {
width:160px;
float:left;
padding:5px;
margin:0;
}

#sidebar-kanan {
width:160px;
float:right;
 padding:5px;
 margin:0;
}

sehingga hasilnya akan seperti ini

#sidebar-wrapper {
float:left;
width:320px; /* ini contoh lebar kolom sidebar */
padding:5px;
margin:0;
}

#sidebar-kiri {
width:160px; /* sesuaikan dg setengah ukuran lebar sidebar template anda*/
float:left;
padding:5px; margin:0px;
}

#sidebar-kanan {
width:160px; /* sesuaikan dg setengah ukuran lebar sidebar template anda */
 float:right;
padding:5px;
margin:0px;
}

5.kemudian cari kode seperti ini

<div id='sidebar-wrapper'>
      <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='BUKU TAMU' type='HTML'/>
<b:widget id='HTML2' locked='false' title='DAFTAR ISI' type='HTML'/>
<b:widget id='HTML3' locked='false' title='SPONSOR' type='HTML'/>
</b:section>
   </div>

6.tambah kode berikut di atas </div>


<b:section class='sidebar' id='sidebar-kiri' preferred='yes'/>
<b:section class='sidebar' id='sidebar-kanan' preferred='yes'/>

Sehingga hasilnya seperti ini

<div id='sidebar-wrapper'>
      <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='BUKU TAMU' type='HTML'/>
<b:widget id='HTML2' locked='false' title='DAFTAR ISI' type='HTML'/>
<b:widget id='HTML3' locked='false' title='SPONSOR' type='HTML'/>
</b:section>
<b:section class='sidebar' id='sidebar-kiri' preferred='yes'/>
<b:section class='sidebar' id='sidebar-kanan' preferred='yes'/>
   </div>

7.simpan Template sobat.lalu menuju kerancangan>> tata letak dan lihat hasilnya jika berhasil maka akan muncul 2 kolom di bawah side bar yang tadi hanya ada 1 kolom seperti di bawah ini

selamat mencoba ya semoga bermanfaat buat sobat semua yang ingin mempercantik blognya,jika ada yang salah dari postinganku ini silahkan kasih komentar di bawah agar saya bisa memperbaikinya lagi terimakasih sudah mau mampir di blog ku yang sederhana ini
Tag : Blogger
0 Komentar untuk "CARA MEMBUAT 2 COLOM/ELEMEN DI BAWAH SIDEBAR"

Back To Top