12.5.14

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: 


Cara Membuat Huruf Drop Cap Pada Awal Artikel
Klik untuk Memperbesar gambar

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(http://2.bp.blogspot.com/-LC7nYv-K93A/UjbAN_WgN9I/AAAAAAAAJ6s/i6ma3dk8rRs/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"
Cara Membuat Huruf Drop Cap Pada Awal Artikel
Klik guna memperbesar tampilan gambar

 <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.
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.

→ About the author

Moch Adnan adalah Admin Blog yang mempunyai ketertarikan dengan Dunia Blogging,kamu bisa Menemukan saya dan memfollow saya di Google + Twitter Facebook


Terima Kasih Telah Membaca Artikel Cara Membuat Huruf Drop Cap Pada Awal Artikel . Jika Anda tertarik dengan artikel seperti ini, silahkan untuk berlangganan artikel Gratis dengan cara mengetikkan alamat e-mail anda pada kotak berlangganan berikut:
Subscribe via Email

Silahkan tinggalkan komentarnya
Mohon untuk tidak memasukkan link hidup dalam berkomentar