Header Ads

Border Style Multiple pada 3 Kolom Widget

Border Style Multiple pada 3 Kolom Widget

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.

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".

8 comments:

  1. Tutorial sangat Membantu dan bermanfaat, boleh dicoba. jangan lupa berkunjung ke blog ane

    ReplyDelete
  2. @Jendrix Technologies | Blogging Silakan dicoba Gan..
    Ane segera ke sana Gan..

    ReplyDelete
  3. wah terima kasih atas tutorialnya
    saya coba akhirnya berhasil tapi bordernya aku ganti warna jadi biru :D

    ReplyDelete
  4. @Seputar Informasi TIK Iya, sama-sama Gan.. Silakan diganti dengan warna yang disukai Gan..

    ReplyDelete
  5. bro bisa bantu ane di :
    http://i-n-i-l-a-h.blogspot.com
    itu kotak widget yang ane isi dari script sponsor kok nggak bisa pas ya...? makasih atas bantuannya

    ReplyDelete
  6. @Anonymous Itu tinggal ditambah aja lebar (width) sidebarnya biar muat sama lebar widgetnya. Penambahan lebar sidebar berarti mengurangi lebar halaman posting biar seimbang.

    ReplyDelete
  7. maksih atas masukan bro, di http://i-n-i-l-a-h.blogspot.com
    kalo rubah sidebar bukannya mempengaruhi layout postingan...? serta tata letak dari widget2 yang lain...? kalo bisa script aja yang myesuai'in lebar panjang widget..., ada trik2 lain nggak bro...., makacih....

    ReplyDelete
  8. @Anonymous Bener bro, klo ngerubah lebar sidebar berarti hrus nyesuaian juga lebar posting sama sidebar yg lain.
    paling pke scrol di widgetnya

    ReplyDelete

Comment Policies:

1. NO SPAM
2. NO LIVE LINK

Any violation will be deleted within 24 hours, thanks for your attention.

Template images by Ollustrator. Powered by Blogger.