Catatan ZoeL

Tulisan bergaya koran (drop caps)

https://zoelf.blogspot.com/2010/02/tulisan-bergaya-koran-drop-caps.html

Sudah tahu kan sobat bagaimana tulisan yang bergaya seperti koran?? Biasanya kalau tulisan dikoran huruf yang paling awal ditulis itu akan menjadi besar,,

Seperti ini
caranya seperti ini:
1. login di blogspot sobat

2. pada tampilan dashboard cari tab bertuliskan layout -> edit HTML

3. Setelah masuk pada code HTML, sobat tinggal copas code CSS di bawah ini di atas code ]]></b:skin>

/* kode untuk hurup awal----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}

6. klik save

 Sobat sudah selesai meng-edit code CSS nya, dan sekarang tinggal penempatan sedikit code lagi untuk memanggil code yang tadi telah kita tulis di halaman CSS.
Untuk pemanggilan code ini dilakukan apabila sobat mau posting, codenya akan seperti ini <span class="awal">huruf awal</span>, dan di lakukan tentunya di tab Edit HTML bukan di compose.
Maka nantinya tulisan tersebut akan tampak huruf depan/awal lebih besar seperti tulisan koran.

Adapun penjelasan dari code CSS di atas sebagai berikut:

.awal    --> ini adalah penamaan saja, mau di ubah jadi begin, start, atau apa saja boleh, cuma jangan lupa untuk membubuhkan tanda titik (dot) di awal tulisan.

float:left;    --> ini adalah kode agar tulisan awal di letakan pada posisi kiri alias mepet ke kiri, jangan di ubah kalau yang ini.

color: #000000;    --> ini adalah kode untuk warna tulisan, kode #000000 adalah kode warna hitam, jika sobat ingin warna yang lain maka silahkan saja di ganti, lebih banyak warna disini.

background:#ffffff;    --> ini adalah kode untuk warna latar belakang, kode #ffffff adalah kode warna putih, jika sobat ingin warna yang lain silahkan di ganti sesuai keinginan.

line-height:80px;    --> ini adalah kode untuk jarak baris, sebaiknya jangan di ganti.

padding-top:1px;    --> ini adalah kode untuk jarak sela antara tulisan dengan bagian atasnya, sebaiknya jangan di ganti.

padding-right:5px;    --> ini adalah kode untuk jarak sela antara tulisan awal dengan tulisan selanjutnya sebesar 5 pixel, jika sobat berniat mengganti jaraknya, silahkan ganti nilainya saja.

font-family:times;    --> ini adalah kode jenis hurup, yang di pakai adalah jenis times, jika tidak suka dengan times bisa di ganti dengan yang lain, mau Georgia, Verdana, sans-serif atau yang lainnya silahkan saja.

font-size:100px;    --> ini adalah kode untuk besarnya hurup, jika mau di ganti silahkan ganti nilainya saja.

Selesai deh..

(sumber:kolom-tutorial.blogspot.com)
Copyright © 2014 Catatan ZoeL Design by SHUKAKU4RT - All Rights Reserved