Dropcaps Ditambah Kotak

Sudah agak lama penulis tidak menulis tentang tutorial blog. Kali ini tergerak di hati untuk berkongsi cara menulis huruf besar di awal topik atau lebih dikenali sebagai dropcaps yang mempunyai kotak. Kalau anda sudah menggunakan dropcaps lama, gantikan sahaja yang itu dengan yang ini.


1. Login ke Blogspot.

2. Pilih Layout - Edit HTML.

3. Download Full Template sebelum mengedit blog.

4. Cari ]]></b:skin>, tampal kod ini di atasnya.

.dropcaps {
border: 3px solid #B93B8F;
background: #F9B7FF none repeat scroll 0% 0%; margin-right: 6px; margin-top: 5px;
float: left; color: red;
-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial;
-moz-background-inline-policy: -moz-initial;
font-size: 70px; line-height: 60px; padding-top: 2px;
padding-right: 5px; font-family:"Forte"; }
5. Save template.

6. Sekarang pergi pula ke Settings - Formatting.

7. Masukkan kod di bawah ini ke dalam Post Template.

<span class="dropcaps">Huruf pertama</span>
8. Save settings.

Nota : Sila tukar kod² berwarna merah mengikut kesesuaian blog anda.

a. border: 3px solid #B93B8F - warna sempadan kotak
b. background: #F9B7FF - warna dalam kotak
c. color: red - warna dropcaps
d. font-family:"Forte"; - jenis tulisan

Siap. Sebarang soalan, tanya saja di bahagian komen.