Kamis, 27 Agustus 2015

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.

The author of the blog Teknologivirtual


EmoticonEmoticon