Wednesday, February 6, 2013

Cara Menambah 2 Kolom Di Bawah Sidebar Blog


Dengan gambar diatas pasti anda sudah tahu maksud tutorial ini, ok kita mulai saja ke topik pembahasan mengenai cara menambah 2 elemen dibawah sidebar blogspot.

Menambah dua elemen / kolom di bawah sidebar blog
1. Login ke blogger
2. Pilih Templates => Edit HTML
3. Untuk jaga-jaga kalau terjadi kesalahan sebaiknya Backup dulu template anda dengan cara Download Template Lengkap
4. Ceklis kotak kecil dekat Expand Template Widget
5. Tekan F3 untuk mencari kode yang mirip dengan kode dibawah ini, fokuskan pada kode #sidebar-wrapper

#sidebar-wrapper{width:310px;float:right;word-wrap:break-word;overflow:hidden}

6. Lalu tambahkan kode berikut ini dibawahnya :

#left-col{width:130px;float:left;word-wrap:break-word;overflow:hidden}
#right-col{width:174px;float:right;word-wrap:break-word;overflow:hidden}

7. Sehingga penerapannya akan seperti berikut ini :

#sidebar-wrapper{width:310px;float:right;word-wrap:break-word;overflow:hidden}
#left-col{width:130px;float:left;word-wrap:break-word;overflow:hidden}
#right-col{width:174px;float:right;word-wrap:break-word;overflow:hidden}

8. Simpan dulu template anda.

9. Selanjutnya hilangkan tanda ceklis pada Expand Template Widget dan tekan F3 untuk mencari kode seperti ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
.................
.................
</b:section>
</div>

10. Lalu letakkan kode berikut sesudah kode </b:section>

<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>

11. Sehingga penerapannya menjadi seperti ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
.................
.................
</b:section>
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
</div>

12. Selesai, simpan template dan sekarang lihat hasilnya di Tata Letak. Jika berhasil maka 2 kolom sidebar yang ditambahkan terlihat seperti gambar diatas.

Selamat mencoba tutorial blog tentang cara menambah 2 kolom di bawah sidebar blog, semoga berhasil.
Sekian Dan Terimah Kasih