Menambah Kolom Elemen Di Bawah 2 Sidebar

kemarin saya posting menambah 2 kolom elemen di bawah sidebar   tutorial sekarang saya akan mencoba menambahkan dibawah 2 sidebar kita buat kolom sidebar baru, caranya cukup sederhana karena ini akan mengotak-atik template anda makanya sebaiknya download terlebih dahulu template anda

Elemen Dibawah 2 Sidebar


Mari kita mulai tutorial menambah kolom elemen dibawah 2 sidebar

elemen 2 sidebar

1.Seperti biasa Log in dulu ke blogger
2.Tata letak
3.Edit HTML
4.Backup template anda, klik Download Template Lengkap
5.Beri tanda centang pada kotak kecil kanan atas
6.Sekarang cari kode ini

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 */
}
#left-col{
width:150px;
float:left; 
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:150px;
float:right;
word-wrap:break-word;
overflow:hidden;
}

yang  berwarna biru  adalah lebar dari sidebar dan yang berwarna merah adalah properti dari sidebar
ini tergantung pada template anda karena lebar dan floath berbeda-beda setiap blog . jadi cari yang mendekati di atas
#sidebar-wraper ( adalah kolom sidebar yang paling atas )
#left-col dan #right-col (adalah kolom kiri dan kanan yang di bawah sidebar utama)

untuk menambah satu kolom lagi di bawah 2 kolom kiri kanan di atas tinggal tambahkan kode berikut ini


#bottom-col {
width:320px; 
float:right;
word-wrap:break-word; 
overflow:hidden; 
}

sehingga menjadi seperti 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 */ }
#left-col {
width:150px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
 width:150px;
float:right;
word-wrap:break-word;
overflow:hidden;
}
#bottom-col { 
width:301px; 
float:right; 
word-wrap:break-word; 
overflow:hidden;
}


sekarang cari kode seperti ini

kode ini:

<div id='sidebar-wrapper'>
<b:section class='sidebar' 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>

tambakan kode ini

copy paste kode ini:

<b:section class='sidebar' id='bottom-col' preferred='yes'/>
sehingga menjadi seperti ini


<div id='sidebar-wrapper'>
<b:section class='sidebar' 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>
<b:section class='sidebar' id='bottom-col' preferred='yes'/>



Simpan hasil menambah kolom elemen di bawah 2 sidebar , dan lihat hasil nya.

Pin It!

fb comment box

5 komentar:

Mona Ona mengatakan...

klo menambah kolom di atas 2 sidebar gimana bang???

juntenx blog mengatakan...

ada tutorial nya silahkan baca di menambah 2 kolom elemen dibawah sidebar

Rudy Hartono mengatakan...

ok gan, thanks ya atas informasinya, saya akan mencoba menerapkan, semoga saya berhasil

Bloggers Pemalang mengatakan...

waahhh mantaf ni sob, saya coba dulu yaa... thanks tips nya.

Abdu-Green Blog mengatakan...

Makasih bang... kerten... oh ya.. jangan lupa mampir ya...

Poskan Komentar

◄ Newer Post Older Post ►