Feb 18, 2010

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.

4 Comment

Azmil Ahud ® Fri Feb 19, 02:18:00 PM

Ms, kod dropcaps lma mcm mna nk ubah? :-/

Eriyza Fri Feb 19, 10:06:00 PM

ZelL ThE gReaT ! ™ : Buang jer yg lama, gantikan yg baru.

Azmil Ahud ® Fri Feb 19, 11:44:00 PM

ok ms, im done, thnx k? :D

Eriyza Sat Feb 20, 10:53:00 AM

ZelL ThE gReaT ! ™ : Okey.

Post a Comment

Gunakan tatabahasa yang betul sewaktu menulis komentar agar mudah difahami oleh penulis. Terima kasih. :-)

Sila ambil perhatian perkara² berikut :-

1. Tinggalkan nama dan url blog atau laman web anda.
2. HTML tag seperti <b>, <i>, <a> boleh digunakan.
3. Sila berhemah di dalam berbahasa.