2015/08/27

Cara Menambahkan 1, 2, 3 Kolom Widget di Atas Postingan Blog


Secara default template blogger yang tersedia di blogger terdiri dari satu elemen widget yang berada di atas postingan atau di bawah judul Blog. Posisi widget di atas postingan blog yang menguntungkan bila dipasang iklan semacam AdSense. Letaknya yang stratrgis langsung dilihat saat pertama kali membuka blog, memungkinkan mendapatkan klik banyak.

Naum bila Anda ingin memasang iklan lebih dari satu di atas postingan maka harus menambahkan 2 atau 3 kolom elemen widget. Berikut ini cara menambahkan 1, 2, 3 kolom widget di atas postingan blog:

1. Menambahkan 1 Kolom dibawah Header/ di Atas Postingan Blog
1 Kolom dibawah Header/ di Atas Postingan Blog

Menambah 1 Kolom, 2 Kolom, 3 Kolom Dibawah Header/ di Atas Postingan Blog:
1. Login ke akun bloger anda
2. Pada dashboard, pilih Templates
3. Pilih Edit HTML
4. Centang Expand Widget Template
5. Tekan F3, cari kode ]]></b:skin> dan letakkan kode berikut diatasnya
#siji-kolom {margin:10px 0;padding:1%;width:98%;}
6. Selanjutnya cari kode seperti ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
7. Lalu letakkan kode berikut dibawahnya
<div id="siji-kolom">
<b:section class='header' id='gawesijikolom' preferred='yes'/>
</div>
8. Simpan template.

2. Menambah 2 Kolom Dibawah Header/ di Atas Postingan Blog
2 Kolom Dibawah Header/ di Atas Postingan Blog

Menambah 1 Kolom, 2 Kolom, 3 Kolom Dibawah Header/  di Atas Postingan Blog:
1. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya
#loro-kolom {clear:both;}.gawe-loro-kolom {}
2. Selanjutnya cari kode <div id='main-wrapper'> dan letakkan kode berikut diatasnya
<div id='loro-kolom'>
<div id='kolom1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='gawe-loro-kolom' id='kolom1' preferred='yes' style='float:left;'/></div>
<div id='kolom2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='gawe-loro-kolom' id='kolom2' preferred='yes' style='float:right;'/></div>
<div style='clear:both;'/></div> 
3. Simpan template.

3. Menambah 3 Kolom Dibawah Header/ di Atas Postingan Blog
3 Kolom Dibawah Header/ di Atas Postingan Blog
Menambah 1 Kolom, 2 Kolom, 3 Kolom Dibawah Header/ di Atas Postingan Blog:
1. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya
#tellu-kolom {clear:both;}.gawe-tellu-kolom {}
2. Selanjutnya cari kode <div id='main-wrapper'> dan letakkan kode berikut diatasnya
<div id='tellu-kolom'>
<div id='kolom1' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='gawe-tellu-kolom' id='kolom1' preferred='yes' style='float:left;'/>
</div>
<div id='kolom2' style='width: 30%; float: center; margin:0; text-align: left;'>
<b:section class='gawe-tellu-kolom' id='kolom2' preferred='yes' style='float:center;'/>
</div>
<div id='kolom3' style='width: 35%; float: right; margin:0; text-align: left;'>
<b:section class='gawe-tellu-kolom' id='kolom3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div> 
3. Simpan dan lihat hasilnya.

Cara Menambahkan 1, 2, 3 Kolom Widget di Atas Postingan Blog Rating: 4.5 Diposkan Oleh: Teknologi Virtual

2 comments:

  1. terima kasih sudah membagi ilmunya. bermanfaat sekali.

    BalasHapus
    Balasan
    1. Terimakasih juga sudah mampir ke blog ane

      Hapus

= > Silahkan berkomentar sesuai topik artikel di atas
= > Berkomentar dengan URL (mati/ hidup) tidak akan dipublish
= > Gunakan gaya bahasa dan tata penulisan yang mudah dipahami