Menambah 2 Kolom Elemen Di Bawah Sidebar

Pada tutorial blog kali ini saya akan sedikit menerangkan bagaimana cara menambah 2 kolom elemen dibawah sidebar pada template yang standar memiliki satu sidebar , seperti contoh di bawah ini

2 Kolom Elemen Di Bawah Sidebar

2 Elemen Di Bawah Sidebar

Lalu bagaimana membuat kolom dibawah sidebar utama template seperti dibawah ini

1.Log in dulu ke blogger
2.Tata letak
3.Edit HTML
4.Backup template anda, klik Download tamplate lengkap
5.Kemudian kasih tanda centang di kotak kecil kanan atas
6.Cari kode

copy paste kode ini:

#sidebar-wrapper {
width: 300px;

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

pada warna biru width terserah anda mau ganti berapa pun karena width tersebut adalah panjang dari sidebar utama , namun saya sarankan 300px pun cukup , atau anda tambah menjadi 301px 
pada yang berwarna merah anda ganti dengan poperti sidebar anda misalnya sidebar kanan menjadi float: right;  sehingga menjadi seperti ini

copy paste kode ini:

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

widht telah diganti menjadi 301px sedangkan float telah diganti menjadi floath : right
sekarang anda tambahkan kode berikut ini di bawah kode yang diatas

copy paste kode ini:

#left-col{ 

width:150px; 

float:left; 

word-wrap:break-word; 

overflow:hidden; 

}

#right-col {

width:150px; 

float:right;

word-wrap:break-word; 

overflow:hidden; 

} 

Sekarang kita akan membuat id untuk sidebar left-col dan right-col
tersebut. Cari kode ini:

copy paste kode ini:

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

Sisipkan kode berikut di bawah <b:widget id= dan seterusnya....

copy paste kode ini:

<b:section class='sidebar' id='left-col' preferred='yes'/>

<b:section class='sidebar' id='right-col' preferred='yes'/> 

 sehingga menjadi seperti ini

copy paste kode ini:

<div id='sidebar-wrapper'>
<b:section class='si debar' id='sidebar' preferred='yes'/>
<b:widget id= dan seterusnya....
<b:section class='sidebar' id='left-col' preferred='yes'/>

<b:section class='sidebar' id='right-col' preferred='yes'/>

</div>

Simpan tempalte nya dan lihat hasil Menambah 2 Kolom Elemen Di Bawah Sidebar  . silahkan lihat posting menambah kolom elemen di bawah 2 sidebar.

Menambah 2 Kolom Elemen Di Bawah Sidebar 9out of 10 based on 10 ratings. 9 user reviews.

Jika artikel ini bermanfaat bagi anda. Mohon klik tombol Google+ dan tombol Like dibawah ini untuk mendukung blog ini dan sebagai ucapan terima kasih dari anda. terima kasih

Berlangganan via RSS Feed

Anda Ingin artikel seperti ini langsung ke Email anda Silahkan masukkan alamat Email anda Untuk Berlangganan :

related posts Menambah 2 Kolom Elemen Di Bawah Sidebar:

Label widget blog 7