Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.


proBlogiz

Ketersediaan  ruang atau space di blog sangat urgen bagi Anda yang menggunakan banyak widget Blogger atau kebutuhan ruang bagi penempatan adsense, atau iklan lainnya di blog /web. Bagi Anda yang menggunakan template blogger dengan 2 kolom dan satu sidebar, tentu ini menjadi permasalahan. Dengan hanya mengandalkan 1 sidebar utama tentu ini kurang efektif dan bagi Anda yang ingin memprioritaskan impressions atau tampilan adsense , iklan PPC atau ads lainnya lebih optimal, tidak diragukan lagi Anda butuh "more space".


Menambah 2 Kolom di Bawah Sidebar Utama, mungkin jawaban permasalahan kebutuhan ruang yang cukup dan profesional. Dengan cukup menambah beberapa kode CSS dan kode HTML di dalam template blogger Anda, maka membuat tambahan 2 elemen kolom di bawah sidebar utama dapat terwujud.

Caranya? Mudah dan sederhana!! Ikuti langkah-langkahnya menambah 2 Elemen Kolom di Bawah Sidebar Utama di template blogger

Langkah Menambah 2 Kolom di Bawah Sidebar Utama

1. Menambahkan kode CSS di Template

Masuk Blogger > pilih Template > edit HTML
Back up template > Jangan Cek "Expand Widget Templates" box
Tekan Control+F >> cari kode #sidebar-wrapper atau #sidebar-wrap
  • mungkin bisa berbeda kode sidebar utama di template Anda, yang terpenting Anda harus tahu lebar / width sidebar utama
Saya ambil contoh template yang saya gunakan, kode CSS sidebar sebagai berikut :

#sidebar-wrapper {
float:right; 
width:320px; 
padding:5px;
margin:0px;
}

Kemudian tambahkan kode CSS baru berikut setelah kode diatas :

#kolom-kiri {
width:160px;
float:left;
padding:5px;
}

#kolom-kanan {
width:150px;
float:right;
padding:5px;
}

  • lebar kolom-kanan dibuat width:150px; karena 10 px digunakan untuk ukuran margin kolom

Finally kode CSS keseluruhan akan seperti berikut ini :

#sidebar-wrapper {
float:right;
width:320px;
padding:5px;
margin:0px;
}

#kolom-kiri {
width:160px;
float:left;
padding:5px;
}

#kolom-kanan {
width:150px; 
float:right;
padding:5px;
}

Pada tahap ini, Anda selesai menambah kode CSS untuk 2 kolom di bawah sidebar utama. Selanjutnya memasang kode HTML di body template Anda.

2. Memasang kode HTML 2 Kolom Baru di Template


Pertama temukan kode html untuk sidebar utama, kurang lebih seperti dibawah ini:

 <div id='sidebar-wrapper'>
       <b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>....
</div>

Tambahkan kode HTML kolom baru berikut ini, tepat diatas kode  </div>

<b:section class='sidebar' id='kolom-kiri' preferred='yes'/>
<b:section class='sidebar' id='kolom-kanan' preferred='yes'/>

Sehingga kode keseluruhan menjadi seperti berikut :

     <div id='sidebar-wrapper'>
       <b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
<b:section class='sidebar' id='kolom-kiri' preferred='yes'/>
<b:section class='sidebar' id='kolom-kanan' preferred='yes'/>
</div>

Lihat Pratinjau, jika OK maka Save Template Anda

Tahap membuat 2 kolom elemen dibawah sidebar utama telah selesai Sob!!
Jika Anda lihat layout template di Tata Letak Blogger, 2 kolom elemen tersebut seharusnya muncul di bagian bawah sidebar utama, just like this :

2 kolom elemen dibawah sidebar utama
2 kolom yang ditambahkan dibawah sidebar utama


Semoga artikel Menambah 2 Kolom di Bawah Sidebar pada Blogger Template ini bisa membantu Anda, kolom seperti ini sangat efektif digunakan untuk penempatan adsense Anda.

Keep Spirit n Good Luck!!!

Artikel Terkait Lainnya:
Click here for comments

17 komentar

Sip postinganya sob, template baru ya? hehe

REPLY

hei, apa kabar sob?
hehe iya nih coba tampilan baru

REPLY

mantap, caranya mudah di mengrti

REPLY

terima kasih gan sudah saya coba, dan ternyata berhasil.... ^_^

REPLY

wow pasti modif yang keren banget dekkh kalo gunakan tips ini,,hhe

REPLY

thanks mas, mudah2 berhasil:)

REPLY

siiplah mas
senang mendengarnya :)

REPLY

baik gan saya akan mempraktekannya langsung dehhh

REPLY

wah bagus tuh ,l;lumayan buat nyimpen label lagi

REPLY

Thanks infonya bermanfaat sekali,...

REPLY

makasih bos atas imfonya,,, sangat bermanpat sekali????????????????

REPLY

Mantap gan, sudah saya cobain. dan BERHASIL. terima kasih atas tutorialnya.

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|