Rabu, 07 Desember 2011

Cara Membuat atau Menambah 2 Kolom pada Sidebar Blog

Tips blog kali adalah bagaimana cara membuat 2 kolom pada sidebar blog. Langsung saja, cara membuat 2 kolom pada sidebar blog atau menambahkan 2 kolom baru pada sidebar blog (contoh disini saya mengambil template blog bumicaang ), 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;}
  • 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 -->
  • Simpan Template, lalu lihat di tab Elemen Laman
Sidebar sebelum ditambah kolom baru
Sidebar setelah ditambah 2 kolom baru
Komentar Anda Sangat Bermanfaat Bagi Perkembangan Blog InI