Membuat Huruf Awal Paragraf menjadi Besar

Sabtu, 18 Desember 2010

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

2 komentar:

putri mengatakan...

Informasinya sungguh sangat menarik sekali...
Banyak pelajaran yang saya dapatkan...
Makasihnya... Semoga sukses...


23 Agustus 2013 09.10
ami mengatakan...

luar biasa sekali sangatbermanfaat informasinya... terimakasih banyak atas informasinya... semoga suksesnya....


23 Agustus 2013 13.00

Posting Komentar

 

Info

Pengikut

Earn Money ($$$)

© 2010 Tutorial Blog Gratis | Wordpress | Blogger All Rights Reserved Thesis WordPress Theme by Hack Tutors.info