Cara desain blog Membuat Kolom Widget Baru Di Bawah Blog

Cara Membuat Kolom Widget Baru Di Bawah Blog

Ada kalanya kamu membutuhkan kolom widget baru untuk blog kamu. yang posisi, ukuran dan jumlahnya sesuai dengan keinginan kamu.
Kali ini saya dapat masalah, yaitu kolom widget pada blog saya tersedia sebanyak 3 kolom. sedangkan saya membutuhkan kolom baru yang menyediakan 2 kolom untuk widget.
Setelah saya cari cara untuk menambahkan kolom widget akhirnya cara tersebut ditemukan.

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

Ingat : Sebelum kamu mengedit HTML, sebaiknya BACKUP dulu template blog kamu.

1. Klik Template.
2. Klik Edit HTML.
3. Pilih Format Template.
4. Cari Kode (agar lebih mudah mencari kode di kotak template kamu, gunakan tombol ctrl+f » tunggu sebentar » jika berhasil maka akan terlihat Di Dalam Kotak Template Kamu).

» Cari kode : ]]></b:skin>
» Setelah kode tersebut sudah ditemukan, silahkan pasang kode di bawah ini tepat di atasnya.

#footer-column-container {clear:both;
}
.footer-column {padding: 10px;
}
<small><a href="http://enoparnoabiezz.blogspot.com/2013/06/cara-membuat-kolom-widget-baru-di-bawah.html" target="_blank">Cara Membuat Kolom Widget Baru Di Bawah Blog</a></small>

Lanjut...

Kamu Bisa Menggunakan Cara A Atau Cara B (Pilih Salah Satu Saja) :
   Cara A
» Cari kode : <div id='footer'> atau kode <div id='footer-wrapper'>
» Setelah kode tersebut sudah ditemukan, silahkan pasang kode di bawah ini tepat di bawahnya.

   Cara B (Cara Alternatif)
» Cari kode : <div id='credits'>
Setelah kode tersebut sudah ditemukan, silahkan pasang kode di bawah ini tepat di atas/di bawahnya (dengan cara ini, kolom widget akan terdapat di bawah footer).

Ingat :
Kamu cukup pilih salah satu kode di bawah ini.

» Satu Kolom Widget :

<div id='footer-column-container'>
<div id='footer2' style='width: 100%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
</div>

Keterangan :

• Warna biru adalah ukuran kolom widget, silahkan kamu ganti dengan selera yang kamu mau.

» Dua Kolom Widget :

<div id='footer-column-container'>
<div id='footer2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:right;'/>
</div>
</div>

Keterangan :

• Warna biru adalah ukuran kolom widget, silahkan kamu ganti dengan selera yang kamu mau.

» Tiga Kolom Widget :

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
</div>

Keterangan :

• Warna biru adalah ukuran kolom widget, silahkan kamu ganti dengan selera yang kamu mau.

5. Sebelum Kamu Klik Simpan Template, sebaiknya kamu klik Pratinjau Template terlebih dahulu untuk memeriksanya.
6. Jika Sudah Oke » Klik Simpan Template.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat :)