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
sidebar widget
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.

Pin It!

fb comment box

8 komentar:

Marvel Films mengatakan...

Salam Likum ..

Lam Kenal Ya Kawan n Terimaksih Banyak Tutornya,semoga ilmunya bertambah ..

Unknown mengatakan...

sama-sama gan semoga bermanfaat tutorial nya

Mona Ona mengatakan...

postingannya bagus bgt tp gue gak nemuin kode2 di atas di template gue, saya menggunakan template techlure, http://www.bloggertricks.com/2008/07/stylish-3-column-blogger-template.html, gue mw menambah kolom diatas 2 sidebar tepatx 1 kolom dibawah kotak search.......bisa bantuin gua gak edit ni template???
thanks be4...............

Unknown mengatakan...

saya sudah lihat templatenya.. tidak usah di centang expand template ,, anda cari kode ini <div class='vertstrip' id='sidebar1'> .. lalu simpan kode berikut ini di atas kode tadi <div id='sidebar0'>
<b:section class='sidebar0' id='sidebar0' preferred='yes'/></div> .. simpan..

Dangstars mengatakan...

Bingung sekali nih cara penyampaian tulisannya... :)]

Unknown mengatakan...

bingung nya dari mana gan ,, sudah cukup jelas ko ..

kowandy mengatakan...

itu smua peletakannya dmna? :) kurang jelas gan. :)

Anonim mengatakan...

thanks info nya

Posting Komentar

◄ Newer Post Older Post ►