Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Jumat, 08 November 2013

Cara Membuat Kolom Widget di Bawah Header pada Blogger

 Cara Membuat Kolom Widget di Bawah Header pada Blogger
Berikut ini cara-cara Membuat Kolom Widget di Bawah Header pada Blogger
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template.
3. Cari kode ]]></b:skin>. Gunakan Tombol ctrl+F
4. Masukan kode berikut diatas kode ]]></b:skin>.

#underheader { clear:both; } .underheader-widget {
padding:0px 10px 10px 10px; }

5. Kemudian cari kode <div id='main-wrapper'> atau <div id='main-wpr'> atau sejenisnya. Setiap template memiliki elemen yang berbeda. Namun pada umumnya ditulis dengan kode <div id='main-wrapper'>. Sobat harus berusaha mencari elemen ini jika memang kode elemen pada template sobat berbeda  dengan kode elemen yang saya contohkan.
6. Pilihlah beberapa kode di bawah ini dan kemudian letakan di atas kode <div id='main-wrapper'> atau <div id='main-wpr'>.

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>

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>

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, untuk ukuran sobat bisa ubah pada nilai "width".

7. Klik simpan, selesai dan sobat lihat hasilnya.

Contoh hasil pemasangan Satu kolom widget.
 Cara Membuat Kolom Widget di Bawah Header pada Blogger
Satu Kolom Widget
Selamat Mencoba dan Semoga Bermanfaat. "KEEP MOVING FORWARD"