Mengatur Tinggi Antarbaris Judul Posting

Ada yang perlu diedit lagi mengenai judul posting pada template blog ini (Thesis SEO Blogger Template). Mengapa perlu diedit? Karena bila saya memberi judul posting yang cukup panjang hingga 2 baris, ternyata antara baris pertama dan kedua judul posting terlihat berhimpitan atau tumpang tindih sehingga tidak enak untuk dilihat.

Agar jarak atau tinggi antarbaris judul posting menjadi lebih renggang, maka perlu diperbesar nilai pada line-height-nya. Lalu, di manakah letak kode untuk mengubah nilai line-height judul posting pada template ini? Line-height judul posting template ini dapat ditemukan pada susunan kode seperti di bawah ini.

Judul posting sebelum diubah nilai line-height-nya.

.post h1, .post h2 {
color:#007ACC;
font-family:'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif;
font-size:18px;
font-weight: normal;
line-height:0.5em;
margin:0;
padding:0 0 5px;
}

Di situ terlihat kalau nilai line-height-nya adalah sebesar 0.5em. Maka perlu diubah nilai tersebut dengan yang lebih besar agar terdapat spasi antarbaris judul posting. Misalnya saja, nilainya diganti menjadi 1.3em sehingga bila ada posting yang judulnya memuat hingga 2 baris maka tampilannya akan tampak seperti di bawah ini.

Tampilan judul posting yang telah diperbesar nilai line-height-nya.

Mengapa Huruf Judul Widget dan Judul Posting Blog Ini Tebal?

I

ngin tahu mengapa huruf pada judul posting dan judul widget pada sidebar template blog ini tebal? Berikut ini jawabannya, silakan disimak. Untuk membuat huruf menjadi tebal pada kedua judul di atas, kita perlu menambahkan kode font-weight:bold; pada CSS kedua komponen di atas. Nah, berikut ini CSS untuk judul widget template blog ini selengkapnya:

h2 {
color:#000000;
font-family:'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif;
font-size:16px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;

font-weight:bold;

letter-spacing:1;
line-height:3em;
margin-bottom:1px;
margin-top:1px;
}

Dalam kode di atas terdapat kode yang membuat judul widget menjadi huruf tebal yaitu font-weight:bold;. Bila ingin huruf judul widget menjadi biasa alias tidak tebal, maka kata bold diganti dengan normal sehingga kodenya menjadi font-weight:normal;.

Sedangkan kode font-weight:bold; yang membuat huruf judul posting menjadi huruf tebal sekali terdapat pada CSS sebagai berikut:

.post h1 a, .post h1 a:visited, .post h1 strong,  .post h2 a, .post h2 a:visited, .post h2 strong {
color:#333;
display:block;

font-weight:bold;

text-decoration:none;
}

Bila ingin mengubahnya menjadi tidak tebal sekali, maka kode font-weight:bold; diganti menjadi font-weight:normal;.