tes

Pada postingan kali ini saya ingin membagi tips tentang bagaimana cara membagi kolom sidebar menjadi dua bagian. Sebelum saya menjelaskan cara-caranya ijinkan terlebih dahulu saya sedikit memberikan informasi lowongan kerja pasti di postingan ini. Pada dasarnya setiap orang yang mencari lowongan pekerjaan di internet adalah orang yang sudah mempunyai keahlian lebih dibanding dengan orang yang mencari info lowongan kerja lewat media cetak (baca: koran). Lho, apa hubungannya dengan sidebar dua kolom ya??? Gak ada kalee...

Trus, mana donk tutorialnya? sabar ya...bentar juga ada kok...

Tapi sebelum memasang dua kolom sidebar ini perlu sobat pertimbangkan matang-matang masalah loading page blognya. Karena semakin banyak sidebar yang di jejali html ato banner, maka otomatis loading page blog kita akan semakin lelet. Untuk menghindari hal tersebut adalah dengan mengakali dengan membuat sidebar tampil bergantian agar blog kita kelihatan lebih dinamis dan yang lebih penting lagi load page blog kita lebih ringan.

Untuk membagi kolom sidebar menjadi dua bagian, berikut cara-caranya:
disimak baik-baik ya....

• LOGIN ke blogger.com dengan account sobat
• Pilih menu Tata Letak
• Pilih menu Edit HTML
• Kemudian cari kode ini ]]></b:skin>
• Copy kode dibawah ini dan letakkan diatas kode ]]></b:skin>

#lsidebar-wrapper {
float: left;
margin:0 10px 0 5px;
padding:0;
width:150px;
display:inline;
}

.lsidebar {
line-height: 1.5em;
}

.lsidebar .widget {
background:#f5f4f0
float:left;
width: 140px;
margin: 0 0 10px 0;
padding: 10px;
border:1px solid #f1f1f1;
}

#rsidebar-wrapper {
float: right;
margin-right:10px;
padding:0;
width:140px;
}

.rsidebar {
line-height: 1.5em;
}

.rsidebar .widget {
background:#f5f4f0;
float:right;
width: 130px;
margin: 0 0 10px 0;
padding: 10px;
border:1px solid #f1f1f1;
}


• Cari kode berikut atau yang mirip di dalam kode template sobat
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
</b:section>
</div>

• Setelah ketemu copy kode berikut dan letakkan di bawah kode di atas
<div id='lsidebar-wrapper'>
<b:section class='lsidebar' id='lsidebar' preferred='yes'>
</b:section>
</div>


<div id='rsidebar-wrapper'>
<b:section class='rsidebar' id='rsidebar' preferred='yes'>
</b:section>
</div>

• Simpan Template
• Selesai

Sekedar tambahan. Jika sobat ingin meletakkan kedua bagian sidebar ini di atas sidebar yang ada, sobat tinggal memasang kode berwarna MERAH di atas kode berwarna HIJAU. Jika sebaliknya, letakkan kode berwarna MERAH di bawah kode berwarna HIJAU.

Nah, sekarang sobat tinggal menambahkan widget sesuai dengan keinginan sobat, entah itu banner 125x125 kayak di blog ini atau isi yang lain....

Silahkan sobat ganti lebarnya sesuai dengan kondisi template sobat...

Selamat mencoba......