Cara Membuat Huruf Pertama Pada Artikel Lebih Besar (Drop Cap)

Memberi tampilan huruf dengan ukuran lebih besar pada awal artikel memang tampak lebih menarik, seperti pada artikel ini. Tehnik ini biasa disebut dengan Drop Cap, dan cara membuatnya sebenarnya sama dengan memberikan gambar pada artikel, yaitu menggunakan fitur CSS Float. Intinya dengan Css Float, kita bisa menampilkan gambar ataupun Drop Cap sesuka selera kita, baik disebelah kiri ataupun kanan.

Nah.... bila anda berminat silahkan anda ikuti langkah - langkah berikut :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<style type="text/css">
hufufbesar
{
float:left;
width:80px;
font-size:400%;
font-family:Edwardian Script ITC;
font-weight:bold;
color:#B85BED;
line-height:80%;
}
</style>

Catatan : Anda bisa ganti jenis huruf sesuai selera anda, silahkan anda bisa lihat macam - macam jenis Font pada artikel Cara Membuat variasi Font pada Teks

6. Simpan Template.  

Langkah selanjutnya anda tinggal menambah sedikit kode HTML pada saat menulis artikel.

Sebagai contoh, saya buat satu paragrap teks sebagai berikut :

"  Dengan CSS float, sebuah elemen dapat kita letakkan disebelah kiri ataupun kanan, yang memungkinkan unsur-unsur lain berada di sekitarnya. Float sangat sering digunakan untuk gambar, tetapi juga berguna ketika berurusan dengan layout, termasuk membuat dropcap seperti pada artikel ini . "

Kemudian pada bagian Edit HTML, sisipkan kode <hufufbesar>HURUF PERTAMA</hufufbesar>, sehingga tampak seperti dibawah ini :

<hufufbesar>D</hufufbesar>engan CSS float, sebuah elemen dapat kita letakkan disebelah kiri ataupun kanan, yang memungkinkan unsur-unsur lain berada di sekitarnya. Float sangat sering digunakan untuk gambar, tetapi juga berguna ketika berurusan dengan layout, termasuk membuat dropcap seperti pada artikel ini.

Berikut hasilnya :

• Anda juga bisa memberi efek shadow pada huruf tersebut :

Tambahkan kode warna biru berikut pada kode CSS tadi, sehingga menjadi :

<style type="text/css">
hufufbesar
{
float:left;
width:80px;
font-size:400%;
font-family:Edwardian Script ITC;
font-weight:bold;
color:#B85BED;
line-height:80%;

text-shadow: 5px 3px 2px #888888;

}
</style>

Berikut hasilnya :

 

• Anda juga bisa menambahkan border pada huruf tersebut :

Tambahkan kode warna Merah Muda berikut pada kode CSS tadi, sehingga menjadi :

<style type="text/css">
hufufbesar
{
float:left;
width:80px;
font-size:400%;
font-family:Edwardian Script ITC;
font-weight:bold;
color:#B85BED;
line-height:80%;

text-shadow: 5px 3px 2px #888888;

border:1px solid #919191;
padding:7px;
margin-right:10px;
background-color:#E4F7D3;

}
</style>

 

Berikut hasilnya :

 

• Anda juga bisa memberi efek box shadow pada border tersebut :

Tambahkan kode warna Merah berikut pada kode CSS tadi, sehingga menjadi :

<style type="text/css">
hufufbesar
{
float:left;
width:80px;
font-size:400%;
font-family:Edwardian Script ITC;
font-weight:bold;
color:#B85BED;
line-height:80%;

text-shadow: 5px 3px 2px #888888;

border:1px solid #919191;
padding:7px;
margin-right:10px;
background-color:#E4F7D3;

box-shadow: 5px 5px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888;

}
</style>

 

Berikut hasilnya :

 
Selamat mencoba ya...