STATUS UPDATED!
FEEL FREE TO ASK~
Tutorial Blog ^_^: TUTORIAL: DROPCAPS BERKOTAK

Sekiranya anda berminat untuk membaca artikel Islam, info semasa, kisah nabi, kisah pengajaran dan lain-lain, bolehlah pergi ke Khaleefah Allah ^_^ Followlah blog ini dan blog itu sekiranya berbaloi untuk difollow. Sebarang ulasan adalah amat amat amat amat diharapkan.
Any Requests or Questions?

Jom, tukar link~

TUTORIAL: DROPCAPS BERKOTAK

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. Cari ]]>, 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";
}

4. Save template.

5. Sekarang pergi pula ke Settings - Formatting.

6. Masukkan kod di bawah ini ke dalam Post Template. <span class="dropcaps">huruf pertama</span>

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

-12 Jamadil Awal 1431H-

0 comments:

Berkatalah dengan akal dan jiwa, kerana itu anugerah Pencipta dan ternyata natijahnya akan lebih bahagia. ^_^

Post a Comment

 
Copyright © 2009-2012 Tutorial Blog ^_^: TUTORIAL: DROPCAPS BERKOTAK
Design by a.a.ghariib