Sabtu, 28 Januari 2012

Membuat Satu Sidebar Wordpress Menjadi 2 Kolom Scroll



Biasanya sidebar blog wordpress.com terdiri dari 1 kolom dalam arti 1 kolom untuk 1 sidebar.Nah kali ini saya akan berikan sebuah 1 sidebar dengan 2 scrool jadi teman bisa menghemat ruang tempat untuk meletakkan pernak-pernik blog teman-teman sekalian.

Jadi dengan 2 kolom scrool ini teman-teman bisa lebih bebas meletakkan image,banner,link dll yang teman-teman butuhkan.

Berikut Kode HTML yang dapat saya berikan :

<table width="400" border="0" cellspacing="5">
<tbody>
<tr>
<td valign="top" width="150">
<div style="overflow:auto;width:140px;height:100px;background-attachment:scroll;background-image:url('http://alamat gambar anda');border:0 solid #0000ff;padding:5px;">

Kode anda disini...


</td>
</div>



<td valign="top" width="250">
<div style="overflow:auto;width:130px;height:100px;background-attachment:scroll;background-image:url('http://alamat gambar anda');border:0 solid #0000ff;padding:5px;">


Kode anda disini...

</div>
</td>
</tr>
</tbody>
</table>

Penjelasan 

  1. Tabel width = lebar table untuk kedua scroll tersebut.
  2. Width= “150” dan width = “250” adalah width yang dibagi dari table width yang 400.
  3. width:140px;height:100px  dan  width:130px;height:100px itu sesuaikan dengan lebar sidebar blog anda itu bisa anda gontak-gantik sesuai keinginan anda.Sehingga letakkanya sama besar dan seimbang.
  4. background-image:url('http://alamat gambar anda') itu bisa anda masukkan backgroundnya berupa gambar atau berupa warna,kalau berupa warna ini kodenya background-color: kode warna
  5.  border=”0” | bila tidak menggunakan kode  ini, pada gambar akan muncul garis pinggir (border)
  6.  Padding = Ketebalan garis pada kotak scroll
  7. Semoga berhasil

Bila ada sedikit penjelasan diatas yang kurang jelas,mohon masukkannya dengan memberikan komentar supaya kode diatas menjadi lebih sempurna dengan adanya bantuan teman-teman blogger lainnya.Good Luck J.

Untuk contoh Membuat Satu Sidebar Wordpress Menjadi 2 Kolom Scroll, bisa anda lihat disini yang saya buat yang jadinya klik http://anesar.wordpress.com
Terima kasih.

0 komentar:

Posting Komentar

◄ Posting Baru Posting Lama ►
 

Copyright © 2012. informasi dunia - All Rights Reserved B-Seo Versi 4 by Bamz