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