Membuat Huruf Awal Paragraf menjadi Besar

Salah satu trik CSS yang saya gunakan pada blog ini adalah memperbesar huruf awal paragraf yang dapat sedikit mempercantik tampilan blog. Contohnya bisa dilihat pada huruf pertama ('S') pada tulisan ini. Lalu, bagaimana cara membuatnya? sebenarnya caranya sangat mudah yaitu kita hanya perlu menambahkan kode CSS kedalam template yang kita gunakan dan untuk lebih jelasnya, praktekan langkah berikut:

Cara Pertama

Copykan kode dibawah ini kedalam template yang anda gunakan.

.hurufbesar:first-letter {
  padding:0.10em 0.08em 0.01em 0.05em;
  font:bold 400% arial,times,Tahoma;
  line-height:0.2em;
  color:#000;
  float:left
}

cara pasang pada blogger

1. Login ke account blogger
2. Pilih tab Rancangan --> Edit HTML
3. Sebelum melakukan perubahan pada template, biasakan untuk membackup terlebih dahulu untuk menghindari hal-hal yang tidak diinginkan.
4. Centang pada expand template widget
5. Copykan kode diatas tepat diatas kode ]]> atau kode yang sejenis di template yang anda gunakan.
6. Simpan template.

cara pasang pada wordpress

Edit file css biasanya style.css pada folder theme yang anda gunakan dan tambahkan kode css diatas↑.

Cara penggunaanya untuk wordpress dan blogger

Untuk cara penggunaanya adalah menambahkan class hurufbesar yang telah dibuat diatas↑ pada tag p di paragraf yang akan kita perbesar huruf awalnya.

<p class="hurufbesar">
lihat huruf awal dari paragraf ini,
bukankah ukuranya lebih besar dari huruf lainnya? 
ini adalah contoh penulisan paragraf dengan huruf awal yang besar.</p>

Hasilnya akan jadi seperti ini :

Lihat huruf awal dari paragraf ini,
bukankah ukuranya lebih besar dari huruf lainnya?
ini adalah contoh penulisan paragraf dengan huruf awal yang besar.

Cara kedua

Sebenarnya cara kedua ini lebih mudah dibanding dengan cara pertama. Lihat kode css berikut:

.post-body p:first-child:first-letter {
  font:bold 400% arial,times,tahoma;
  float:left;
  padding:0.10em 0.08em 0.05em 0.05em;
  color:#000;
}

Pada kode ini ditambahkan .post-body dimana .post-body adalah area posting atau DIV/ID pada template yang saya gunakan. Maksud penambahan kode ini adalah agar perubahan yang dibuat oleh tag <p> hanya pada paragraf pertama di area posting.

DIV / ID untuk area posting pada masing-masing template berbeda, jadi untuk menerapkan kode diatas gantilah .post-body dengan DIV / ID area posting template anda.

Dengan cara yang kedua ini kita akan dibuat lebih mudah, yang kita perlu hanyalah mendefenisikan paragraf dengan tag <p>...</p> tanpa harus menambahkan class hurufbesar pada tag <p> tersebut.

<p>
lihat huruf awal dari paragraf ini,
bukankah ukuranya lebih besar dari huruf lainnya? 
ini adalah contoh penulisan paragraf dengan huruf awal yang besar.</p>

Hasilnya pun akan tetap sama. jadi pilih yang mana ?

Dapatkan update terbaru: * Cek email konfirmasi untuk berlangganan yang telah dikirimkan ke email anda