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 jikalau dipasang iklan semacam AdSense. Letaknya yang stratrgis eksklusif dilihat dikala pertama kali membuka blog, memungkinkan mendapat klik banyak.

Naum jikalau 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

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 isyarat ]]></b:skin> dan letakkan isyarat berikut diatasnya

#siji-kolom {margin:10px 0;padding:1%;width:98%;}

6. Selanjutnya cari isyarat ibarat 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 isyarat 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

Menambah 1 Kolom, 2 Kolom, 3 Kolom Dibawah Header/  di Atas Postingan Blog:
1. Cari isyarat ]]></b:skin> dan letakkan isyarat berikut diatasnya

#loro-kolom {clear:both;}.gawe-loro-kolom {}

2. Selanjutnya cari isyarat <div id='main-wrapper'> dan letakkan isyarat 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

Menambah 1 Kolom, 2 Kolom, 3 Kolom Dibawah Header/ di Atas Postingan Blog:
1. Cari isyarat ]]></b:skin> dan letakkan isyarat berikut diatasnya

#tellu-kolom {clear:both;}.gawe-tellu-kolom {}

2. Selanjutnya cari isyarat <div id='main-wrapper'> dan letakkan isyarat 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.

Share this post