Monday, March 12, 2012

Cara Membuat atau Menambah 2 Kolom pada Sidebar Blog

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 bumicaang), yaitu:
  1. Sign in ke Blogger - Rancangan - Edit HTML
  2. Download Template Lengkap, untuk jaga-jaga bila terjadi kegagalan
  3. Cari (gunakan tombol Ctrl+F pada keyboard) kode #sidebar
  4. 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>
  6. 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 -->
  7. Simpan Template, lalu lihat di tab Elemen Laman

    sidebar_awal_blog_bumicaang
    Sidebar sebelum ditambah kolom baru


    sidebar_tambah_2_blog_bumicaang
    Sidebar setelah ditambah 2 kolom baru

No comments:

Post a Comment