Cara DESAIN BLOG Membuat Kolom Widget Baru Di Bawah Header Blog

Cara Membuat Kolom Widget Baru Di Bawah Header Blog

Template yang kamu gunakan tidak menyediakan kolom widget yang sesuai dengan keinginan kamu? kolom widget di bawah header blog kamu hanya tersedia satu kolom sedangkan kamu membutuhkan yang tiga kolom? tenang, bisa kamu buat dengan cara ini.

Kolom widget di bawah header ini bisa dibuat dengan mudah. jumlahnya bisa 1, 2, atau 3 pilih sesuai keinginan kamu, atau mau pasang ketiga-tiganya juga tidak apa-apa. untuk ukuran juga bisa diatur dengan mudah jika kamu ingin mengganti ukuran yang saya tetapkan.

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.

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

» Cari kode : <div id='main-wrapper'> atau kode <div id='main-wpr'> atau sejenisnya. setiap template memiliki elemen yang berbeda. namun pada umumnya ditulis dengan kode <div id='main-wrapper'>.
Kamu harus berusaha mencari elemen ini jika memang kode elemen pada template kamu berbeda  dengan kode elemen yang saya contohkan.
» Setelah kode tersebut sudah ditemukan, silahkan pasang kode di bawah ini tepat di atasnya.

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

» Satu Kolom Widget :

<div id='underheader'>
<div id='box1' style='width: 100%; float: left;
margin:0; text-align: left;'>
<b:section class='header' 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='underheader'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col2' preferred='yes' style='float:left;'/>
</div>
</div>

Keterangan :

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

» Tiga Kolom Widget :

<div id='underheader'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col3' preferred='yes' style='float:left;'/>
</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 :)