Huruf Permulaan Ukuran Besar Dalam Pos |Tutorial Blogger Blogspot

Jan 10, 2010

Huruf Permulaan Ukuran Besar Dalam Pos

Panduan bagaimana membuat huruf permulaan ukuran besar (drop cap) dalam pos blog. Jika anda seorang penulis blog yang prolifik mungkin hiasan ini boleh membantu sebagai satu daya tarikan pembaca terhadap penulisan yang dibuat.

1. Log masuk kedalam Blogger melalui Blogger in Draft.

2. Highlight dan salin kod CSS dropcaps berikut:

.dropcaps {
float: left;
color: #000000;
font-size: 80px;
line-height: 60px;
margin-top: -10px;
padding-right: 0px;
}

3. Dalam papan pemuka pilih Layout kemudian pilih Edit HTML:

4. Cari kod CSS seperti di bawah dalam kod template blog. Jangan risau sekiranya Selector yang terdapat di bawah kod .post { mungkin berbeza antara satu template dengan satu template yang lain.

.post {
background: #FFF;
float: left;
width: 590px;
margin: 0 0 10px;
padding: 10px;
border: 1px solid #DDD;
}

5. Paste masukkan kod CSS .dropcaps di para 2 di bawah kod CSS .post para 4 seperti berikut, (jangan lupa klik SAVE TEMPLATE):

6. Size pixels warna merah dalam kod CSS dropcaps boleh dipinda supaya sesuai dengan perenggan berkenaan dalam pos:

.dropcaps {
float: left;
color: #000000;
font-size: 80px;
line-height: 60px;
margin-top: -10px;
padding-right: 0px;
}

font-size: 80px;	Ukuran besar huruf 80px; boleh pinda untuk besar atau kecilkan
line-height: 60px;	Tinggi baris yang digunakan oleh Huruf 60px; boleh dipinda
padding-right: 0px;	Jarak huruf dengan huruf lain disebelah kanannya boleh dipinda kalau terlalu rapat

7. Semasa menaip pos dalam Post Editor gunakan pilihan mode Edit HTML. Sebelum dan selepas huruf mula dalam pos tambah kod berikut:

<span class="dropcaps">Huruf mula di sini</span>

8. Jika cara di atas tidak berfungsi seperti dikehendaki cuba masukkan kod CSS secara terus dalam pos blog seperti berikut:

Sekian, selamat mencuba dan selamat berjaya.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://calipso-tutorialblogger.blogspot.com/.

Salam hormat dari

Tutorial Blogger Blospot