>Membuat Tampilan Sidebar Tampak Lebih Rapi


>

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
sidebar1 sidebar2
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
sidebar4 sidebar5 sidebar6
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.


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

%d blogger menyukai ini: