CSS : Add Border to Sidebar

Template maupun layout bawaan Blogger memang banyak yang menawarkan tampilan polos. Hanya kekayaan pilihan warna, sajian gambar di header yang berbeda, maupun latar (background) yang bergambar.

Beberapa pengguna blogger yang pada awalnya “terpaksa” untuk menggunakan pilihan yang ada, pada akhirnya banyak mencari cara untuk mengkustom tampilan agar bisa tampil beda.

Misalnya memberikan sentuhan border atau garis pemisah, agar tampilan blog yang polos bisa memiliki batas yang tegas antara bagian postingan dan sidebar.

Nah kali ini kita akan menggunakan metode CSS untuk mewujudkan keinginan ini. Setelah itu kita akan menentukan dibagian mana kode CSS tersebut hendak dipasang. Biasanya, untuk memudahkan pemberian batas ini, kita akan mencari nama class atau div sidebar. Dengan alasan hampir semua template atau layout bawaan blogger menyertakannya.

Pertama adalah mencari bagian yang menyebut Sidebar pada bagian CSS. Misalnya bagian ini dideklarasikan dengan nama #sidebar.

Di bagian ini kita terbiasa menemui bagian seperti width (untuk menyebut lebar kolom samping atau sidebar), float (untuk menyebut arah kolom sidebar pada keseluruhan tampilan), atau juga padding (baik right atau left untuk menyebut spasi pembatas).

Nah untuk menambahkan border dibagian sidebar, kita akan membutuhkan kode berikut untuk ditambahkan :

border-left-width: 1px;
border-left-style: solid;
border-left-color: #B5CF53;

Keterangan :
– border-left-width: 1px; (untuk menyebut lebar pembatas dalam satuan pixel)
– border-left-style: solid; (solid adalah contoh tampilan pembatas, dalam hal ini solid disamakan dengan bentuk lurus tanpa potongan)
– border-left-color: #B5CF53; (kode hexa #B5CF53 untuk menyebut warna tertentu)

Jadi secara keseluruhan, bila kita memiliki kode kode CSS berikut di template/layout :

padding-left: 5px;
padding-right: 5px;
font-size: 13px;
width:150px;
float:right;

maka untuk memberi border, kita akan menuntaskannya menjadi :

padding-left: 5px;
padding-right: 5px;
font-size: 13px;
width:150px;
float:right;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #B5CF53;

Tak lupa, kode tersebut bisa kita temukan pada bagian Edit HTML. Tuju bagian CSS untuk mencari nama Sidebar ya….

Oh ya, untuk style, selain solid kita juga bisa menggunakan nilai lain seperti : dotted (berbentuk bintik-bintik berupa kotak kecil), dashed (hampir sama dengan dotted hanya saja lebih renggang dan besar ukuran dotted-nya), double (berupa dua garus solid berjajar) dan lain-lain.




Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com

4 pemikiran pada “CSS : Add Border to Sidebar

  1. Mantabb, Kang.
    Kang Agus, aq dah beli bukunya meraup dollar……, makasih infonya ya.
    aq lagi blajar seperti buku tsb

    Suka

  2. pro pertamax, coba klik kategori friendster di blog ini, nanti kita butuh bantuan edit profile di fs agar bisa mengganti background.

    pro saefudin, benar mas, panjang border sesuai dengan panjangnya sidebar yang terisi.

    pro geraikonsultasi, makasih pembeliannya ya…moga ikut sukses nih!

    Suka

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s