KafeGue.com

Membuat Tampilan Sidebar Tampak Lebih Rapi

Pada 16 April 2010 → 2768 kali dilihat

Tampilan menu di sidebar yang terkesan kurang rapi bisa mengurangi pesona sebuah blog/situs di mata pengunjungnya. Selain itu, juga bisa menurunkan tingkat keterbacaan (readibilty) daftar link yang terdapat pada sidebar tersebut.

Dalam arti, pengunjung jadi dibuat agak sulit membedakan batas antara satu link (misalnya judul posting) dengan link lainnya. Kondisi seperti ini bisa menyurutkan minat untuk lebih banyak membuka daftar menu yang kita pasang pada sidebar. Daftar menu yang tersedia jadi sulit dibedakan karena terkesan tidak ada pembeda yang jelas.

Coba perhatikan 3 screenshoot berikut ini.

sidebar 1	sidebar 2	sidebar 3

Sidebar 1 dan 2 menggunakan kode CSS seperti berikut ini :

.rightsidebar ul li{float:left;list-style-type:none;padding-left:15px;padding-bottom:.29em; no-repeat 0px .20em;
margin: 0 0 2px; no-repeat 0px .20em; padding:0 0 .25em 17px; line-height:1.2em;}
.midsidebar ul li{list-style-type:none;padding-left:15px;padding-bottom:.29em; no-repeat 0px .20em; margin:0 0 2px;
;no-repeat 0px .20em; padding:0 0 .25em 17px; line-height:1.2em;}

Sedangkan sidebar 3 menggunakan kode CSS seperti ini :

div.widget li{margin-left:20px; padding:5px;}

Bandingkan dengan 3 screenshoot berikut.

sidebar 4	sidebar 5	sidebar 6

Mana yang terkesan lebih rapi?

Betul sekali. Screenshoot kedua tampak lebih rapi, yaitu sidebar 4,5, dan 6. Apa penyebabnya?

Sidebar 4 dan 5 pada screenshoot kedua menggunakan atribut berupa

background:url(http://i35.tinypic.com/2n03mgz.jpg) border-bottom:1px dotted #cccccc; margin:0 0 5px; line-height:1.5em;

Penjelasan kode tersebut :

di setiap permulaan list link pada sidebar menggunakan model list berupa tanda panah kecil yang diambil dari url http://i35.tinypic.com/2n03mgz.jpg dan di setiap batas bawah link pada sidebar diberi bingkai/border sebesar 1 pixel berupa dot/titik-titik berwarna abu-abu terang (#cccccc), serta margin bawah sebesar 5 pixel dan jarak spasi sebesar 1.5em.

Dan sidebar 6 pada screenhoot kedua menggunakan atribut tambahan berupa kode

border-bottom:1px dotted #666; list-style-type:square; color:#000

Penjelasan dari kode tersebut :

di setiap batas bawah link pada sidebar diberi border/bingkai sebesar 1 pixel dengan model dot/titik-titik berwarna abu-abu gelap (#666). Pada awal list setiap link menggunakan atribut list dengan model kotak (square) berwarna hitam (#000).

Kesimpulan

Jadi yang membuat screenshoot kedua (sidebar 4,5, dan 6) tampak lebih rapi yaitu penggunaan model list (list-style-type) dan border bawah. Kodenya yaitu :

list-style-type:square; color:#000
border-bottom:1px dotted #666;

Anda harus menyesuaikan warna list-stylenya dengan theme yang anda gunakan agar serasi. Untuk blog ini saya pilih warna hitam (#000). Warna border atas juga harus anda sesuaikan dengan theme yang dipakai.

Jika theme blog anda belum mempunyai atribut list-style-type dan border-bottom pada bagian sidebarnya, maka anda bisa tambahkan 2 kode di atas. Contohnya seperti berikut ini :

Kode asal

div.widget li{margin-left:20px; padding:5px}

Kode baru

div.widget li{margin-left:20px; padding:5px; border-bottom:1px dotted #666; list-style-type:square; color:#000}

Kode tersebut tidak sama antar theme. Intinya, carilah kode ul li atau li pada bagian style.css (jika menggunakan wordpress.org) atau pada edit html (untuk blogger.com). Cari pada bagian kode untuk sidebar-nya.

Selamat mencoba.

Maaf, karena alasan tertentu, kotak komentar ditutup!