Setelah sebelumnya saya memposting Cara Menambahkan Nomor Urut Pada Komentar Blog, nah pada kesempatan kali ini saya akan membagikan tutorial yang berhubungan tentang postingan blog yaitu Cara membuat Drop Caps di postingan blog.
Ada banyak cara untuk menyesuaikan postingan kamu, salah satunya adalah dengan memberi efek Drop Cap. Efek drop caps berfungsi untuk membesarkan huruf pertama dalam sebuah postingan dan biasanya akan meregang tiga sampai empat baris dari teks di sekitarnya. Gaya drop cap biasanya digunakan untuk membuat koran/surat kabar, majalah maupun lainnya. Drop cap juga menggunakan jenis font yang berbeda, jadi kamu bisa mengaturnya sendiri agar lebih maksimal.
DEMO
Untuk membuat efek atau gaya Drop Cap kamu hanya perlu menambahkan beberapa kode CSS dan pengaturan lainnya. Jadi, mari kita mulai menambahkannya...
1. Buka Dashboard -> Template -> edit HTML
2. Cari kode ]]></b:skin> pada halaman kode template. (lebih mudah gunakan CTRL+F)
Baca Juga:
3. Copy kode dibawah ini dan paste kode tersebut di atas kode ]]></b:skin>
.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}Note:
- Ganti kode berwarna biru untuk menyesuaikan ukuran efek Drop Cap, silahkan ganti dengan ukuran yang diinginkan.
-. Ganti kode berwarna pink untuk menyesuaikan warna dari Drop Cap, silahkan ganti menggunkan kode warna HTML.
4. Cari kode <data:post.body/>
5. Ganti kode tersebut dengan kode dibawah ini
<div class='capital'><data:post.body/></div>Note:
Kode <data:post.body/> mungkin ada dua sampai tiga, silahkan coba satu-satu. Biasanya yang kedua dari kode tersebut yang bekerja.
6. Simpan
Silahkan cek salah satu postingannya, apabila huruf pertama dari postingan itu besar, berarti kamu sudah berhasil menerapkan efek Drop Cap pada postingan blog kamu.
Apabila ada permasalahan silahkan komentar dibawah.