Menambah 3 Elemen Di Bawah Sidebar Menambah 3 Elemen Di Bawah Sidebar

Postingan kali ini trik menambah elemen halaman dibawah dua kolom atau sidebar yang telah saya buat kemarin.
Seperti gambar dibawah ini:

Login ke blogger dengan id anda

Masuk ke menu Tata Letak

Pada tab menu, klik Edit HTML

Backup template anda, klik Download Template Lengkap

Sekarang cari kode ini :

#sidebar-wrapper {

width: 220px;

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

}

Silahkan diganti dulu nilai width 220px; dan properti float: $startSide; dengan nilai lebar sidebar yang anda rencanakan. Misalnya width: 350px dan properti menjadi float: right; Jadinya seperti ini :

#sidebar-wrapper {

width: 350px;

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

}

Jika anda telah membuat dua sidebar di bawah sidebar utama seperti pada tutorial yang sebelumnya, silahkan tambahkan hanya kode yang berwarna hijau saja.

#left-col {

width:170px;

float:left;

word-wrap:break-word;

overflow:hidden;

}

#right-col {

width:170px;

float:right;

word-wrap:break-word;

overflow:hidden;

}

#bottom-col {

width:350px;

float:right;

word-wrap:break-word;

overflow:hidden;

}

Sehingga kodenya akan menjadi seperti ini :

#sidebar-wrapper {

width: 350px;

float: right;

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

}

#left-col {

width:170px;

float:left;

word-wrap:break-word;

overflow:hidden;

}

#right-col {

width:170px;

float:right;

word-wrap:break-word;

overflow:hidden;

}

#bottom-col {

width:170px;

float:right;

word-wrap:break-word;

overflow:hidden;

}

Sekarang buat kode HTML untuk bottom sidebar yang dinamai sebagai "bottom-col" tersebut. Carilah 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>

Sisipkan kode berikut di bawah kode tadi :
<b:section class='sidebar' id='bottom-col' preferred='yes'/>

Sehingga secara keseluruhan 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'/>

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

</div>

Sekarang klik tombol SIMPAN TEMPLATE

Selesai

Untuk melihat hasilnya masuk ke elemen halaman, semoga berhasil!