Tips blogging kali adalah bagaimana cara membuat 2 kolom pada sidebar blog. Sebelumnya saya ingin mengucapkan terima kasih kepada kawan blogger Riani Natalina, karena saya mendapatkan ide ini atas masukkan dari beliau, yang telah berkomentar di artikel Tambah Emoticon pada Kolom Komentar Template Blog.
Langsung saja, cara membuat 2 kolom pada sidebar blog atau menambahkan 2 kolom baru pada sidebar blog (contoh disini saya mengambil template blog ranafiza), yaitu:
- Sign in ke Blogger - Rancangan - Edit HTML
- Download Template Lengkap, untuk jaga-jaga bila terjadi kegagalan
- Cari (gunakan tombol Ctrl+F pada keyboard) kode #sidebar
- Berapa lebar kolom sidebar tersebut? disana saya dapati width: 350px; lalu sebagai acuan, 2 kolom baru pada sidebar harus lebih kecil atau samadengan lebar kolom sidebar ÷ 2, kemudian berikan perintah CSS dibawah #sidebar, seperti ini
.sidebar1 {float: left; width: 170px; margin: 0; padding: 0;}
.sidebar2 {float: right; width: 170px; margin: 0; padding: 0;}
#sidebar-wrapper {float: left; width: 350px; margin: 0; padding: 0;}
5. Cari kode
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
----hingga----
</b:section>
</div>
- Tambahkan kode berikut diatas </div>
<!-- tambah 2 buah sidebar -->
<b:section class='sidebar1' id='sidebar1' preferred='yes'/>
<b:section class='sidebar2' id='sidebar2' preferred='yes'/>
<!-- /tambah 2 buah sidebar -->
Sidebar sebelum ditambah kolom baru
Sidebar setelah ditambah 2 kolom baru
0 komentar:
Posting Komentar