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.