Cara membagi elemen sidebar menjadi 2 kolom | Pada postingan kali ini saya akan bahas tentang membagi ruang sidebar blog menjadi dua kolom. Untuk masing-masing template yang digunakan oleh para blogger pasti tidak sama, ada senang dengan memakai 1 kolom, 2 kolom, 3 kolom, 4 kolom. Anda sendiri pakai yang mana, mau tau aja. Ok sob lanjut...
Sekarang ini saya akan ulas mengenai bagaimana membagi elemen homepage menjadi 2 kolom. Untuk merubah ruang / elemen sidebar dari satu kolom menjadi dua kolom, hanya diperlukan tambahan kode css.
Berikut langkah-langkah dalam membuat 2 kolom pada ruang sidebar blog :
1. Login ke Blogger
2. Pilih Rancangan => Edit HTML
3. Backup template anda dahulu
4. Lalu cari kode seperti di bawah ini (pakai ctrl + F)
#sidebar-wrapper {
width:300px;
color:#4c4c4c;padding:0;
}
Keterangan :
Untuk kode width:300px; angka 300px adalah lebar sidebar
Lebar kolom sidebar akan dibagi menjadi 2 kolom, yaitu dengan membagi nilai width. Untuk width akan saya bagi menjadi 2 bagian yaitu masing-masing ukuran 150px. Supaya sideb`r tidak mepet, kasih jarak 10px tiap sidebar, sehingga lebarnya menjadi 140px.
Langkah selanjutnya membuat duplikat dari kode di atas dengan nama #sidebar-wrapper2 { =>Lihat contoh penerapannya di bawah ini :
#sidebar-wrapper {
width:300px;
color:#4c4c4c;
padding:0;
}
#sidebar-wrapper2 {
width:300px;
color:#4c4c4c;
padding:0;
}
Setelah kode duplikat, lalu ganti ukuran width menjadi 140px dan tambahkan margin:0px 10px 0px 0px; dan float : right; pada bagian sidebar-wrapper2. Lihat contoh penerapannya di bawah ini :
#sidebar-wrapper {
width:140px;
color:#4c4c4c;
padding:0;
}
#sidebar-wrapper2 {
width:140px;
color:#4c4c4c;
padding:0;
margin:0px 10px 0px 0px;
float : right;
}
Langkah berikutnya anda cari lagi kode seperti ini :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML13' locked='false' title='Random Post' type='HTML'>
</b:section>
</div>
Setiap template mempunyai widget yang berbeda, saya kasih contoh dalam sidebar berisi widget Random Post, seperti contoh diatas dengan kode <b:widget id='HTML13' locked='false' title='Random Post' type='HTML'>
Tambahkan kode yang berwarna kuning dibawah kode </div> Lihat contoh penerapannya dibawah ini :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML13' locked='false' title='Random Post' type='HTML'>
</b:section>
</div>
<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
Selesai dan Simpan Template anda.
Begitulah Cara Membagi Elemen Sidebar Menjadi 2 Kolom pada blogspot, semoga bermanfaat dan semoga berhasil.
:.
Comments
Post a Comment