Cara Membuat Huruf Drop Cap Pada Awal Artikel Cara Membuat Huruf Drop Cap Pada Awal Artikel

Tutorial cara membuat huruf dropcap ini pada dasarnya sudah banyak sekali yang menshare, namun tanpa berkecil hati saya akan tetap mempublish tutorial yg satu ini yakni tentang tata cara membuat huruf dropcap. Huruf besar tersendiri yang biasanya terletak diawal kalimat, atau mungkin anda lebih sering melihatnya dalam sebuah artikel majalah dimana huruf awal selalu tercetak lebih besar dari default atau bawaan huruf  penulisan.

Jika sobat sudah sering membuka- buka banyak  artikel dalam blog ini saya yakin anda akan menjumpai tiga jenis huruf dropcap yang berbeda dalam setiap postingnya, di mana bentuk- bentuk huruf drop cap yang ada  tersebut kurang lebih terlihat seperti ini:

Nah, jika sobat tertarik.untuk  menerapkan salah satu huruf dropcap seperti yang terlihat di atas kedalam setiap halaman artikel sobat, maka silahkan ikuti tata cara pembuatannya. Saya akan coba merinci satu persatu tentang cara pembuatannya. Oya, sebelumnya ke, 3 jenis huruf dropcap ini kita namai dulu supaya mudah di ingat.

Yang pertama huruf dropcap Simple, yang kedua, dropcap Square, dan yang terakhir huruf dropcap Fancy

Ok, sekarang langsung saja akses ke dalam halaman dasbor blog sahabat, lalu pilih "Template" kemudian pilih " edit html " dan sekarang kita lanjut pada cara membuat ke 3 jenis huruf dropcap tersebut.

Cara membuat huruf dropcaps

Dalam halaman edit html silahkan cari kode yang mirip seperti ini ]]></b:skin> jika sudah menemukannya, selanjutnya copy dan pastekan kode berikut ini tepat di bawah kode ]]></b:skin>

 /* DROPCAPS
----------------------------*/
.dropcapsimple, .dropcapsquare, .dropcapfancy {
float:left;
overflow:hidden;
text-align:center;
}

.dropcapsimple {
font-size:34px;
height:34px;
line-height:38px;
width:30px;
text-align:left;
}

.dropcapsquare {
font-size:28px;
height:38px;
line-height:38px;
width:38px;
margin-right:7px;
color:#fefefe;
background:#111;
text-shadow:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}

.dropcapfancy {
font-size:26px;
height:40px;
line-height:40px;
width:40px;
margin-right:7px;
color:#fefefe;
text-shadow:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS0750YdXHEPFp4vCL5ZBZgVK0i_EFWoN1b_y8-9YGTpr_lEFvxFt-QJvpuzOPgdESF6hzEuRZv1_oeihtWVFHQEa1UOacQh_kIlvGMkYC4JO9KXScXhGr93sZ-x138-aSD7Y3xqkop5k/s1600/bk_dropcap3.png) 0 0 no-repeat !important;
}

Simpan template,  done! 

Nah, untuk memunculkan huruf dropcap tersebut kedalam setiap postingan baru, langkah selanjutnya adalah klik "Pengaturan" lalu pilih "Post dan Komentar" copy dan pastekan kode html berikut kedalam kotak "Template Entri"

 <span class="dropcapsimple">Huruf awal Anda</span>

Untuk merubah tampilan huruf Dropcap Anda hanya perlu mengganti tulisan dropcapsimple yang tercetak tebal dan berwarna merah tersebut dengan kata berikut ini : "dropcapfancy" untuk dropcap Fancy, "dropcapsquare" untuk Dropcap Square. Buka postingan baru untuk memunculkannya kemudian ubahlah mode penulisan menjadi mode "HTML" dan ganti tulisan "Huruf awal Anda" dengan awal huruf postingan.