Postingan kali ini trik menambah elemen halaman dibawah dua kolom atau sidebar yang telah saya buat kemarin.
Seperti gambar dibawah ini:
Seperti gambar dibawah ini:
Menambah elemen di bawah dua sidebar
- 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 {
Sehingga kodenya akan menjadi seperti ini :
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;
}#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
- NB :Semoga bermanfaat! oya senang sekali kalau sobat mau menyediakan sedikit waktu untuk meninggalkan comment dibawan sini,...selamat berkarya..!!!
Posts
0 komentar:
Post a Comment
"Komentar anda sangat bermanfaat untuk perkembangan blog ini. Jangan lupa adab berkomentar, dan jangan buang waktu untuk spam. Terima Kasih!!!."