CSS:Text Indent

Tidaklah indah dipandang melihat beberapa tautan di Sidebar menempati posisi yang berantakan terutama tautan yang berkarakter panjang.

Ini dialami saat kita menyukai judul postingan panjang dengan atau tanpa kita rencanakan sebelumnya. Beberapa artikel di internet menyarankan untuk menuliskan judul pendek untuk mengakali bagian ‘Previous Post’ pada Sidebar.Perhatikan saja, kadang judul panjang akan terpotong menjadi 2 baris, parahnya menyertakan beberapa space kosong pada baris dibawahnya.

Apa yang menyebabkan hal itu bisa terjadi? ini adalah salah satu kegunaan tag ‘text-indent’.Bagi pengguna Word, indent biasa kita gunakan untuk memberikan tanda untuk memulai paragraph yang baru.Maka kegunaan semacam itu yang dipakai oleh tag ini.Menurut w3schools.com tag ini bisa memiliki nilai negatif.Artinya baris pertama akan di inden (ada yang tahu terjemahan Bahasa Indonesia untuk ini?) ke kiri bila nilainya negatif.

Kita langsung masuk ke template di Blogger saja.Bila menggunakan template Harbor seperti yang saya gunakan, pada baris 298 di bagian /* Sidebar Content akan ditemukan tag seperti ini :

#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
font: 70%/160% ‘bitstream vera sans’, ‘lucida grande’, verdana, sans-serif;
}

Guna merapihkan bagian tautan yang panjang agar memiliki sisi yang sama, maka kita bisa ubah nilai text-indentnya menjadi :

#sidebar li {
margin:0;
padding:0 0 .25em 0px;
text-indent:0px;
line-height:1.5em;
font: 70%/160% ‘bitstream vera sans’, ‘lucida grande’, verdana, sans-serif;

Sengaja saya mengubah nila pada padding untuk mendapatkan hasil yang lebih baik.

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