Modifikasi Tampilan Blockquote [Seri 2]

|

Setelah menyelesaikan artikel Cara Modifikasi Blockquote Blogger yang lumayan panjang, sekarang muncul deh seri 2 nya. O ya, di seri sebelumnya hanya dibahas, apa sih blockquote itu, dimana bisa menemukan code CSS blockquote, dan modifikasi tampilan (hanya tulisan). Tapi di seri 2 ini akan dibahas lebih jauh tentang cara modifikasinya.

Diulangi lagi, blockquote dapat di modifikasi tampilannya mulai dari font, border, dan background.

Bentuk CSS blockquote yang biasa ada pada template:

.blockquote {
margin:1em 20px;
}

Modifikasi Border

Misalnya sobat pingin dengan blockquote yang ada bordernya garis lurus (solid border) dengan ketebalan 3 pixel warna merah, kodenya sobat buat jadi kaya gini:

.blockquote {
margin:1em 20px;

border:solid 3px;

border-color:#FF0000;

padding:5px;

}

Atau bisa juga untuk menghemat memori, antara code border dan border-color digabung, jadi nya seperti ini:

.blockquote {
margin:1em 20px;

border:solid 3px #FF0000;

padding:5px;
}

Ini adalah contoh blockquote dengan border solid 3px dan warna merah. Kegunaan "padding" adalah untuk memberikan jarak antara border dan tulisan didalamnya dengan jarak sebesar 5px.

Ok, contoh lain dengan warna yang lain juga:

.blockquote {
margin:1em 20px;

border:dashed 5px #821E5F;

padding:20px;

}

Kali ini kita buat "padding menjadi sebesar 20px, nah sekarang kelihatan kan apa guna padding?

Sobat!! Sobat!! ini adalah seri 2 dari cara modifikasi Blockquote, untuk mengubah tampilan font sobat baca aja yang seri 1: Cara Modifikasi Tampilan Blockquote

Share