Cara membuat sidebar jadi 2 kolom

Cara membuat sidebar jadi 2 kolom - Pada umumnya sidebar 2 kolom jarang sekali ditemukan di kebanyakan tempate blogspot namun ada juga yang sengaja mendesain sidebar menjadi 2 kolom, karena mungkin style template itu sendiri telihat agak padat, jadi sang creator template tersebut sengaja membuat membagi sidebar jadi 2 kolom agar template tersebut bisa memuat lebih banyak widget.

Cara membuat sidebar jadi 2 kolom

Namun bagi sobat yang ingin membagi sidebar template blognya jadi 2 kolom, tentu bisa di lakukan oleh kita / sobat sendiri, dengan sedikit mengedit HTML blog sobat, untuk itu mari lihat langkah-langkahnya di bawah ini :

Cermati dengan baik dan benar

  • Login ke blogger.com
  • Pilih blog sobat kemudian klik Template
  • Pilih Edit HTML
  • Cek Expand widget template
  • Cari kode ]]></b:skin>
  • Letakkan kode di bawah ini tepat diatas kode ]]></b:skin>
  • #kolom-kiri { width: 49%; float: left; }
    #kolom-kanan { width: 49%; float: right; }
  • Kemudian Carilah kode <div id='sidebar-wrapper'> selengkapnya lihat dibawah
  • <div id='sidebar-wrapper'>
    ...
    scriptnya panjang
    ...
    </b:section>
    </div>

Perhatian : Intinya sobat cari kode yang berwarna, cara mencarinya sobat telusuri kebawah dari kode <div id='sidebar-wrapper'>

  • Setelah itu sobat Letakkan kode dibawah ini, diantara kode </b:section> dan </div>
  • <b:section class='sidebar' id='kolom-kiri' showaddelement='yes'>
    <b:widget id='Text514' locked='false' title='Kolom kiri' type='Text'/>
    </b:section>
    <b:section class='sidebar' id='kolom-kanan' showaddelement='yes'>
    <b:widget id='Text524' locked='false' title='Kolom kanan' type='Text'/>
    <div style="clear: both;"></div>
  • Contoh lihat dibawah ini
  • <div id='sidebar-wrapper'>
    ...
    scriptnya panjang
    ...
    </b:section>

    <b:section class='sidebar' id='kolom-kiri' showaddelement='yes'>
    <b:widget id='Text514' locked='false' title='Kolom kiri' type='Text'/>
    </b:section>
    <b:section class='sidebar' id='kolom-kanan' showaddelement='yes'>
    <b:widget id='Text524' locked='false' title='Kolom kanan' type='Text'/>
    <div style="clear: both;"></div>

    </div>
  • Terakhir Simpan Template

Nah, Sekarang tinggal di tes di blog sobat, cara untuk melihat hasilnya sobat bisa cek di pada halaman Tata Letak pada blogger sobat.
Oke sekian tips dari saya, selamat mencoba dan semoga berhasil.

Tulisan Lainnya :
Free download google chrome terbaru | V-datoe
Cara memasang tag alt manual pada gambar | V-datoe
Cara agar blog terverifikasi yandex.com | V-datoe
Cara membuat sidebar jadi 2 kolom | V-datoe

3 komentar:

  1. makasih ya gan ilmunya.. bisa jadi referensi
    follback www.reviewjujur.blogspot.com makasih gan :)

    BalasHapus
  2. wah gan hebat follow back ajahh

    http://andry-kreasi.blogpot.com

    BalasHapus
  3. mantap gan.
    kalau 3 kolom mau di edit jadi 2 kolom gmn ya?
    yang di hps yang mana?
    http://belajarjaringankomputerdanaplikasi.blogspot.com/

    BalasHapus

Pages