Penulis: Moch Adnan dipublikasikan: 12 Mei 2014
Cara Membuat Huruf Drop Cap Pada Awal Artikel 

Moch Adnan Blog - 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: 

Ini hanya sebuah contoh pembuatan huruf drop cap menggunakan class drop cap simple.

Ini hanya sebuah contoh pembuatan huruf drop cap menggunakan 'class'= drop cap square.

Ini hanya sebuah contoh pembuatan huruf drop cap menggunakan class drop cap fancy.

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.
  • dropcap Simple
  • dropcap Square
  • 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 Drop Cap Pada Awal Artikel

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/AVvXsEj555wjVL_OOvvdz82r8Jr0BtteJvCSscvO2nloICjzQMY_sADqVvzRyhG_ij0Mh4duhwyjOxEHLDXiB3OFixgyJgFWs3m930VFNB9ZEF0phkwKA0krmuJrx5j07wxRLnGc9U5petwBU-Q/s1600/bk_dropcap3.png) 0 0 no-repeat !important;
}


Simpan template,  done! 

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

Cara Membuat Huruf Drop Cap Pada Awal Artikel
Klik guna memperbesar tampilan gambar


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

Buka postingan baru untuk memunculkannya kemudian ubahlah mode penulisan menjadi mode "HTML" dan ganti tulisan "Huruf awal Anda" dengan awal huruf postingan.

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. 

Ok, rasanya sampai disini saja Cara membuat huruf Dropcap pada awal Artikel baca juga tutorial cara merubah tulisan posting lama dan posting baru dengan judul artikel dalam postingan artikel saya sebelumnya, Terima kasih sudah membaca artikel ini saya ucapkan selamat mencoba.