Membuat Huruf Besar (Drop Cap) pada Awal Postingan [UPDATED!!]

Drop caps? pernahkah anda membuat sebuah huruf besar pada microsoft word dan sebagainya? Drop caps pernah diajarkan pada saat kita kelas 1 SMP, tentang materi microsoft word. Tetapi yang akan kita bahas kalo ini adalah bagaimanan menerapkan drop caps pada postingan blog. Jika anda tertarik lanjutkan membaca tutorial saya dibawah sampai tuntas, Ok?

Drop caps adalah huruf besar yang ukurangnya dapat mencapai lebih dari 10 kali lipat huruf biasa yang diletakkan di awal artikel. Anda mungkin sudah sering melihat huruf huruf gede ini di awal kalimat pada koran, majalah, novel dan sebagainya. Dengan memasangnya ini akan membuat postingan anda lebih indah secara visual. Pembaca pun akan merasa berbeda dan merasa seperti membaca majalah.

Cara membuat drop caps ini sangatlah mudah, Kita hanya perlu memasang kode CSS di template dan kode pemanggil huruf dropcaps pada editan post. Untuk lebih jelasnya anda dapat membaca step by stepnya dibawah ini.

Cara pemasangan pada template

1. Pertama-tama masuk ke akun blogger anda
2. Masuk ke Template > Edit template
3. Tekan CTRL + F dan masukan kode berikut ]]></b:skin>. Cari kodenya..
4. Jika sudah ketemu, masukkan kode di bawah ini tepat di atas ]]></b:skin>

/* kode untuk huruf awal
----------------------------------------------- */
.ujangyoyo {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;}

Keterangan:

- Kode berwarna merah adalah warna dari font. Lihat code warna disini

- Kode berwarna orange adalah warna background dari font. Lihat code warna disini

- Kode berwarna Hijau adalah tinggi line pada font.

- Kode berwarna biru adalah ukuran dari font.

4. Klik Save Template / Simpan

Cara Pemasangan pada postingan blog

Untuk menerapkan drop cap ini, setiap posting anda harus lewat Edit HTML, bukan lewat edit HTML di template anda. Untuk lebih jelasnya baca step by stepnya dibawah ini:

Pertama-tama masuk ke akun blogger anda
Buatlah sebuah post baru.
Masuk ke mode HTML bukan mode compose. Lihat gambar dibawah ini :

Screenshot of Blogger's Post Editor - showing how-to add a drop cap

Lalu ketikkan kode huruf awal. Kata huruf awal, ganti dengan huruf pertama yang akan anda posting. Misalnya : Y
Anda dapat klik "preview" untuk melihat hasil dropcaps ini. Publish jika post anda telah rampung.. :D

Update the script

/* Dropcap */ .ujangyoyo {float: left; font-family: 'Apple Chancery',cursive; font-size: 70px; line-height: 50px; margin: 5px 5px 0px 0px; position: relative; text-shadow: 2px 2px 2px rgb(153, 102, 255);}

/* Dropcap */ .ujangyoyo {background-color: lightgrey; color: darkblue; float: left; font-family: Georgia,Times,serif; font-size: 65px; line-height: 45px; margin: 0px 5px 0px 0px; padding: 5px; position: relative;}

/* Dropcap */ .ujangyoyo {color: red; float: left; font-family: 'Comic Sans MS',cursive,sans-serif; font-size: 70px; font-style: italic; line-height: 50px; margin: 2px 8px 0px 0px; position: relative;">S}

Some explanation & customization:

float: left; posisi drop caps di dalam kalimat
font-family: Georgia, Times, serif; jenis font yang akan digunakan, untuk memilih font ini, anda dapat melihatnya di office. Misalnya microsoft office word. Anda cukup memasukan nama fontnya.
font size: 70px; ukuran font dropcap. Ingat jangan hapus "px".
font-weight: bold; bold adalah ketebalan font. Misalnya "contoh" dan "contoh"
font-style: italic; kemiringan font. Misalnya "contoh" dan "contoh"
color: red; warna dari font, anda dapat menggantinya dengan bahasa inggris dari warna warna yang akan anda pilih atau dengan menggunakan: color: #EEE; atau anda dapat melihat kode warna DISINI.
line-height: 50px; ketinggian garis font. bisa dibilang tinggi font
margin: 0px 5px 0px 0px; - Posisi font. Yang pertama adalah jarak dari atas, lalu kanan, terus bawah dan kiri.
padding: 5px; Kalo ini adalah jarak font dari sekeliling.
background-color: lightgrey; warna background font. anda dapat menggantinya dengan bahasa inggris dari warna warna yang akan anda pilih atau dengan menggunakan: color: #EEE; atau anda dapat melihat kode warna DISINI.
text-shadow: 2px 2px 2px #9966ff; bayangan font, set ukuran jarak bayangan dan ganti warna bayangan tersebut

Last Words

Jadi kesimpulannya, blog anda akan makin cakep aja jika memasang drop cap ini . Pengunjung serasa membaca majalah saja. Sekian post tentang Membuat Huruf Besar (Drop Cap) pada Awal Postingan [UPDATED!!]. Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Maaf bila ada salah-salah kata dan semoga tulisan ini dapat bermanfaat bagi anda :)