4 Trik CSS Untuk Memperindah Tulisan Artikel Blog

Pada artikel sebelumnya kita sedikit mengetahui bermacam-macam kesalahan yang sering kita temui pada blog, dalam hal keindahan tipografi (setidaknya menurut saya :D ). Selanjutnya yang akan kita bahas di sini adalah bagaimana memanfaatkan CSS untuk mengatur dan membentuk tulisan postingan kita menjadi sedikit lebih menarik dan bernilai. Ya, yang akan kita bahas kali ini sepenuhnya mengenai CSS styling, dan bagaimana mengaplikasikannya pada setiap artikel yang kita tulis. Jadi, siap-siap buka text editor dan menyalin deklarasi-deklarasi CSS berikut sekalian belajar CSS dengan mencoba sedikit demi sedikit mengubah nilai dari property CSS yang tersedia supaya sesuai dengan template yang kita gunakan.
Heading

Tag heading (h1, h2, h3, h4, dst.) berfungsi untuk membentuk hirarki dari sebuah tulisan, dari judul, sub-judul, dan seterusnya. Nah, untuk membedakan masing-masing tag kita bisa mengubah tampilannya menggunakan CSS. Sebagai contoh, saya menggunakan CSS di bawah ini untuk tag h3 yang sering saya gunakan di postingan ↓
view source
print?
1 h3 {
2 margin:2.0em 0 0.25em 0;
3 font:normal 1.33333em/1.0em Georgia, "Times New Roman", Times, serif;
4 letter-spacing:-0.02em
5 }

Hasilnya bisa kita lihat di tulisan ini, dimana saya menggunakan tag h3 sebagai sub judul artikel.
Drop Cap

Gunakan drop cap untuk mempercantik tulisan kita dengan menggunakan stylesheet berikut ↓
view source
print?
1 .drop_cap {
2 padding:0.17em 0.08em 0.05em 0;
3 font-size:3.4em;
4 line-height:0.6em;
5 color:#aaa;
6 float:left
7 }

Gunakan style di atas sebagai span dan taruh pada id atau class yang digunakan di template, misalnya ↓
view source
print?
1 .post .drop_cap {
2 padding:0.17em 0.08em 0.05em 0;
3 font-size:3.4em;
4 line-height:0.6em;
5 color:#aaa;
6 float:left
7 }

Sekarang, setiap kali menulis postingan, masukkan huruf inisial pada kode HTML, misalnya A

Update: Drop cap bisa dibuat menggunakan pseudo element first:letter pada CSS2. Cara ini lebih bagus digunakan dan paling saya rekomendasikan ↓
view source
print?
1 p.first_paragraph:first-letter {
2 padding:0.15em 0.08em 0.05em 0;
3 font-size:3.4em;
4 font-weight:normal;
5 line-height:0.6em;
6 color:#aaa;
7 float:left
8 }

Untuk menambahkan drop cap, tambahkan class first_paragraph pada setiap paragraf pertama artikel:

Your first paragraph.

Snazzy Pullquote

Pullquote, disamping fungsinya sebagai penegas, penjelas, atau apapun itu, juga bisa membuat pembaca tertarik membaca tulisan kita.

Sekarang, kita akan mencoba menambahkan sebuah elemen yang sering kita lihat di majalah-majalah tapi jarang kita lihat di blog: pullquote. Pullquote, disamping fungsinya sebagai penegas, penjelas, atau apapun itu, juga bisa membuat pembaca tertarik membaca tulisan kita. Ada dua metode untuk mengaplikasikan pullquote, dengan menambahkan class attribute pada blockquote, atau dengan cara membuat div (atau span) baru untuk membuat pullquote. Kali ini kita akan menggunakan cara pertama, alasannya: secara semantic HTML lebih tepat karena pullquote akan tetap dibaca sebagai blockquote (hanya menambahkan atribut class baru pada blockquote).
view source
print?
01 blockquote.left {
02 width:200px;
03 margin:5px 15px 5px 0;
04 font-size:1.4em;
05 text-align:center;
06 color:#abafb9;
07 background:none;
08 border:none !important;
09 padding:0 !important;
10 float:left
11 }
12 blockquote.right {
13 width:200px;
14 margin:5px 15px 5px 0;
15 font-size:1.4em;
16 text-align:center;
17 color:#abafb9;
18 background:none;
19 border:none !important;
20 padding:0 !important;
21 float:right
22 }

Untuk memasukkan pullquote, masukkan class yang telah kita buat pada blockquote →

Dummy Text

untuk pullquote di sebelah kiri tulisan, dan

Dummy Text

untuk pullquote di sebelah kanan tulisan.
Gunakan Div

Seperti yang saya tulis di artikel sebelumnya bahwa kebanyakan blogger kita tidak mempedulikan pentingnya semantic, meaning, atau arti dari masing-masing tag HTML yang sebenarnya, yang bisa saja menurunkan kualitas tulisan dan nilai SEO-nya (baca artikel Opera Developer Community mengenai semantic HTML dan SEO). Contohnya, kebiasaan menggunakan tag dan untuk menebalkan dan memiringkan tulisan, yang sebenarnya cuma tampilannya saja yang jadi tebal dan miring, tetapi sesungguhnya tidak ada bedanya dengan plain text dan tidak memberikan arti apa-apa pada tulisan tersebut (sangat berbeda bila menggunakan tag dan ). Kemudian ada lagi yang memasukkan blok kode atau markup HTML dalam blockquote, yang tentu saja tetap dianggap sebagai blockquote secara semantic, betapapun rumitnya kode tersebut :D

Nah, yang di atas ↑ tadi cuma sebagian kecil contoh bagaimana seringnya kita menggunakan blockquote. Sekarang, kita akan coba membuat div baru untuk menggantikan tag blockquote yang sering digunakan untuk highlight, pengumuman, atau apapun itu. Tujuannya, supaya tampilannya lebih menarik aja sih :D
view source
print?
1 .update {
2 padding:6px 9px;
3 background:#fffbbc;
4 border:1px solid #E6DB55
5 }

Masukkan teks pada class yang telah kita buat →

Dummy Text

, maka hasilnya menjadi seperti ini ↓

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam egestas, mauris id dignissim dignissim, leo augue rutrum lacus, id condimentum nisl elit ut nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi.

Selamat mencoba :)

sumber:  http://fanari-id.com/tutorial/4-trik-css-untuk-memperindah-tulisan-artikel-blog/