Border Style Multiple pada 3 Kolom Widget

Sudah beberapa bulan ini saya menerapkan 3 kolom widget di atas footer blog ini. Memang saya sebelumnya pernah melakukan hal yang serupa, namun beberapa waktu kemudian saya menghapus kembali 3 kolom widget tersebut. Kini saya telah memasang kembali kolom widget tersebut.

Ada yang berbeda jika dibandingkan dengan pemasangan 3 kolom widget pada waktu sebelumnya. Di manakah letak perbedaannya? Pertama, dari segi widget-widget yang saya pasang pada ketiga kolom tersebut. Sekarang saya memasang widget-widget yang berhubungan dengan statistik blog ini yaitu info pagerank, info Alexa rank, total tayangan laman, user online status, dan jumlah pengunjung.

Perbedaan kedua adalah mengenai pemanis yang saya tampilkan pada ketiga kolom widget tersebut. Bila pada waktu sebelumnya saya menambahkan border dobel pada bagian atas, maka pada kali ini saya menambahkan border style multiple.

Border Style Multiple pada 3 Kolom Widget

Sedangkan mengenai cara pemasangannya dapat saya tuliskan di bawah ini. Kalau ada yang ingin menerapkannya pada template selain yang saya gunakan ini, mungkin hasil yang berbeda akan didapat.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" lalu pilih "Template".

3. Kalau mau membuat salinan template, bisa mengeklik tombol "Cadangkan / Pulihkan" terlebih dahulu.

4. Setelah itu klik tombol "Edit HTML" dan tombol "Lanjutkan".

5. Kemudian cari kode ]]></b:skin> lalu letakkan kode berikut di atas kode tersebut.

#tiga-kotak-bawah {
clear:both;
border-color: orange;
border-style: dotted dashed solid double;
border-width: 6px;
margin-bottom: 6px;
}
.kolom-kotak {
padding:0px 10px 10px 10px;
}

6. Selanjutnya cari kode <div id='footer'> lalu taruh kode berikut di atas kode tersebut.

<div id='tiga-kotak-bawah'>
<div id='kotak1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol1' preferred='yes' style='float:left;'/>
</div>
<div id='kotak2' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol2' preferred='yes' style='float:left;'/>
</div>
<div id='kotak3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

7. Klik tombol "Simpan template" dan lihat hasilnya di menu "Tata Letak".