Rabu, 18 Mei 2011

Home » » Membuat Drop Cap (Huruf Awal Lebih Besar) Di Blog

Membuat Drop Cap (Huruf Awal Lebih Besar) Di Blog


D
rop Cap merupakan suatu teks atau huruf yang ukurannya lebih besar dibandingkan dengan huruf lainnya. Drop Cap ini biasa dijumpai pada huruf awal paragraf atau alinea pertama suatu artikel di media cetak seperti koran atau majalah. Biasanya kita sudah tahu cara membuat drop cap di Ms. Word, Kita juga dapat menerapkan gaya penulisan koran atau majalah ini pada artikel yang kita buat di Blogger. Jika di template Anda belum tersedia drop cap dan Anda tertarik untuk membuat drop cap ini, berikut langkah-langkahnya. Ok prend simak baik-baik ya….
1. Masuk ke akun Blogger Anda.
2. Klik Rancangan > Edit HTML.
3. Back-up template dengan mengeklik Download Template Lengkap untuk berjaga-jaga bila nanti terjadi kesalahan dalam pengeditan.
4. Cari kode ]]></b:skin> (Gunakan Ctrl + F untuk memudahkan pencarian)
5. Copy kode di bawah ini dan paste di atas kode ]]></b:skin>

/* kode membuat posting unik
----------------------------------------------- */
.unik {
float:left;
color: #000000;
background:#ffffff;
line-height:40px;
padding-top:1px;
padding-right:3px;
font-size:50px;
}
6. Klik tombol SIMPAN TEMPLATE.
Langkah-langkah di atas merupakan langkah awal n masih ada lanjutannya, langkah berikutnya yang harus Anda lakukan adalah saat melakukan posting Anda harus berada pada posisi Edit HTML bukan pada Compose. Simpanlah huruf awal artikel pada kode berikut <div class="unik">huruf awal</div>. Setelah selesai membuat sebuah posting lalu terbitkan. Contoh penulisan artikelnya seperti di bawah ini :
<div class="unik">H</div>allo, perkenalkan saya Laila. Bagaimana? Tidak sulit bukan dalam membuat drop cap di Blogger. Dengan adanya drop cap ini di posting kita maka akan membuat artikel kita menjadi lebih menarik seperti tampilan artikel di koran-koran.
Maka hasilnya akan seperti di bawah ini :
image
Berikut ini keterangan untuk kode membuat drop cap :
/* kode membuat posting unik
----------------------------------------------- */
.unik {
float:left;
color: #000000;
background:#ffffff;
line-height:40px;
padding-top:1px;
padding-right:3px;
font-size:50px;
}
.unik >> ini merupakan penamaan saja, kalau mau diganti dengan awal, begin, start, atau apa saja boleh, hanya jangan lupa untuk membubuhkan tanda titik (dot) di awal tulisan.
float:left; >> ini adalah kode agar tulisan awal diletakkan pada posisi kiri alias mepet ke kiri.
color: #000000; >> ini adalah kode untuk warna tulisan, kode #000000 adalah kode warna hitam, bila Anda ingin warna yang lain maka silakan untuk diganti.
background:#ffffff; >> ini adalah kode untuk warna latar belakang, kode #ffffff adalah kode warna putih, jika Anda mau warna yang lain silakan diganti sesuai keinginan.
line-height:40px; >> ini merupakan kode untuk jarak baris.
padding-top:1px; >> ini adalah kode untuk jarak sela antara tulisan dengan bagian atasnya.
padding-right:3px; >>ini adalah kode untuk jarak sela antara tulisan awal dengan tulisan selanjutnya sebesar 3 pixel, jika Anda ingin mengganti jaraknya, silakan diubah nilainya.
font-size:50px; >> ini adalah kode untuk besarnya huruf, bila ingin diganti silakan ubah nilainya saja.
Ok. Selamat Mencoba

0 komentar:

Posting Komentar

Arsip Populer

 
Diberdayakan oleh Blogger.

Translate

mau pinter

membuat blog atau website? klik saja di sini

© Copyright 2011. All Right Reserved by Pondok Pengetahuan | Designed by Free Blogger Templates | Premium Wordpress Themes | Coupons Code | Free Icons