Cara Membuat Huruf Posting Pertama Otomatis Besar

Huruf Posting Besar
Hari ini saya akan berbagi tips dalam rangka menciptakan suatu keunikan pada blog dimata pengunjung. Rata-rata (95%) blogger lokal tidak menggunakan trik ini, termasuk saya sendiri :D

Teman-teman lebih mengenalnya dengan sebutan DropCaps yang terdiri dari dua kata, yaitu drop (memasukkan) dan caps (huruf besar) sehingga jika digabungkan menjadi memasukkan huruf besar :D

Penggunaan dropcaps tidak terbatas pada huruf kapital saja. Jadi meskipun huruf atau karakternya kecil semua, maka huruf pertama akan otomatis berubah menjadi lebih besar sesuai dengan perintah pada CSS (Cascading Style Sheets) sebelumnya.

Bagaimana cara menggunakannya untuk bagian tertentu

Cukup mudah dan tentunya tidak akan sulit karena prosesnya tidak berbelit belit bahkan bisa dikerjakan oleh seseorang yang berpengetahuan sempit.
Anda bisa menempatkan DropCaps pada selektor body, div, p, b, a, blokquote, code, pre dan yang lainnya. Anda juga bisa menyisipkan pada kode Class atau ID pada selektor div dan yang lainnya, seperti <div id="TesBesarkan">Tulisan</div>

Contoh sederhana jika menggunakan pada teks yang dibungkus selektor div maka CSS_nya adalah
div:first-letter {
kode perintah disini
    }

Sedangkan jika ingin menggunakannya pada BlockQuote, silahkan gunakan CSS ini
blockquote:first-letter {
kode perintah disini
    }

Dan jika ingin menggunakannya pada ID, silahkan gunakan CSS ini
#TesBesarkan:first-letter {
kode perintah disini
    }

Pada bagian kode perintah silahkan diisi sesuai dengan selera atau kebutuhan Anda.
Bisa dengan perintah pembesaran teks {font-size:50px} bisa juga dengan perintah perubahan warna {color:red} dan perintah lainnya.

Contoh sederhana yang sudah jadi seperti berikut

<div id="TesBesarkan">
Abcdefghijklmnopqrstuvwxyz
Abcdefghijklmnopqrstuvwxyz
Abcdefghijklmnopqrstuvwxyz
</div>

<style>
#TesBesarkan:first-letter {font-size:38px;float:left}
</style>

Hasil:

Abcdefghijklmnopqrstuvwxyz
Abcdefghijklmnopqrstuvwxyz
Abcdefghijklmnopqrstuvwxyz
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini