headerphoto

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

Next→
←Prev

Terkait

Share: FB-share Twitter-share

Join dan Dapatkan Info Terbaru via Email

23 komentar

  1. ini yg dicari tengkyu gan

    BalasHapus
  2. @ andie: Sami-sami bos :c:, yang telah berhasil menambah 2 kolom pada sidebar Blogspot-nya

    BalasHapus
  3. keren nech..?? izin mencoba sob..? :f:

    BalasHapus
  4. terima kasih atas tutorialnya, gan

    BalasHapus
  5. artikel yang sangat menarik gan...thankss yaaa

    BalasHapus
  6. mantap tutornya.....thanks gan

    BalasHapus
  7. Kumpulan Game Gratis, Ringan, Keren dan Gokil Gan!!

    Nice trik banget brader! :D

    BalasHapus
  8. tq gan infonya, nice share

    BalasHapus
  9. Saya sudah kok gak bisa ya gan. mohon pencerahannya . newbie banget nih gan

    BalasHapus
  10. kalau ga ada bsection dan div gmana gan?

    BalasHapus
  11. Keren Nih,Thax Kawan Berhasil

    BalasHapus
  12. thanks gan info nya :f: jangan lupa kujung balik gan Toto

    BalasHapus
  13. akhirnya nemu juga tutor nya...thanks gan,,,:)

    BalasHapus