Menambah 3 Elemen Di Bawah Sidebar

[+] Post Title :

Menambah 3 Elemen Di Bawah Sidebar

[+] Date :
[+] Author : Fathur Sumardiono
[+] Link : http://advennation.blogspot.com/2012/11/menambah-3-elemen-di-bawah-sidebar.html
[+] Tag : Blogging

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

Seperti gambar dibawah ini:

1.Login ke blogger dengan id anda
2.Masuk ke menu Tata Letak
3.Pada tab menu, klik Edit HTML
4.Backup template anda, klik Download Template Lengkap
5.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 */ 

}

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

}

7.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; 

}

8.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; 

}

9.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>

10.Sisipkan kode berikut di bawah kode tadi : 

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

11.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>

12.Sekarang klik tombol SIMPAN TEMPLATE

13.Selesai

Sumber

Advennation backlink

URL

Code For Forum

HTML Code <a href='http://advennation.blogspot.com/2012/11/menambah-3-elemen-di-bawah-sidebar.html' target='_blank'>Menambah 3 Elemen Di Bawah Sidebar</a>