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 <span class="ujangyoyo">huruf awal</span>. Kata huruf awal, ganti dengan huruf pertama yang akan anda posting. Misalnya : <span class="ujangyoyo">Y</span>
  • Anda dapat klik "preview" untuk melihat hasil dropcaps ini. Publish jika post anda telah rampung.. :D

Update the script

Example of drop cap for letter, M
/* 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);}
Example of drop cap for letter, T
/* 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;}
Example of drop cap for letter, S
/* 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</span>}

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 :)






Artikel Menarik Lainnya :



9 comments

avatar
26 May, 2013

wah keren kalau diterapkan gan....
jadi Bisa terlihat lebih Elegant ,seperti Situs - situs besar dunia...
terima kasih banyak,,
Jangan Lupa Kunjungi Balik ya.....
http://beginerblog.blogspot.com/

BalasHapus
avatar
26 May, 2013

PEngen deh mas bikin drop caps ...
Tips biar di terima GA yah mas? daftar GA memang sulit mas ... semua itu tergantung kerja keras, telaten dan usaha mas ... kadang juga ada blog yg Copas tapi diterima GA ... :) Tetap semangat aja mas ...

BalasHapus
avatar
26 May, 2013

Follow sukses mas .. :D Follow back yah ... :D

BalasHapus
This comment has been removed by a blog administrator.
avatar
yoyo suharyo Author
26 May, 2013

@Mas Nazaroke siap, ntar saya lagi ngedit template dulu

BalasHapus
avatar
29 May, 2013

ternyata mudah banget gan... nice info

BalasHapus
avatar
06 July, 2013

qok saya gk bza..... :( help me

BalasHapus
avatar
yoyo suharyo Author
06 July, 2013

nggak bisa disebelah mananya gan? pemasangan pada template sudah belum ? jika sudah jangan lupa insert kode yang span class="ujangyoyo" pada huruf pertama pada postingan agan.

BalasHapus
avatar
12 August, 2013

terima kasih banget nih infonya, sudah saya coba blog saya dan berhasil dengan baik.... namun saya kurangi sedikit tinggi dan ukuran font agar matching dg desain blog.

BalasHapus