Menghias Blockquote dengan kode CSS Border dan Background

Apa itu Blockquote.? Blockquote,adalah unsur dalam posting yang digunakan untuk menunjukkan kutipan dari sebagian besar teks dari sumber lain atau teks yang menunjukkan suatu penjelasan secara garis besar. Diharapkan pembaca akan memberi perhatian khusus pada kalimat tertentu yang diberi tanda blockquote.

Blockquote blogger default masih biasa saja dan kurang menarik, bahkan pembaca dibuat tidak tahu mana kalimat yang ber-blockquote dan mana yang tidak, karena blockquote blogger hanya berupa paragraf yang menjorok ke dalam.

Tentu bagi yang mengetahui seni visual hal ini menjadi kurang pas dan sangat butuh untuk dilakukan pembenahan dari segi penampilan.

Menghias blockquote bisa dilakukan dengan cara memberi efek garis (border), efek background, maupun keduanya (border dan background)bahkan bisa juga ditambahkan background image. Namun penggunaan background image dapat berpengaruh pada kecepatan loading menjadi berkurang.

Cara menambahkan kode CSS untuk memberikan efek border adalah sebagai berikut:
1. Masuk pada template, edit html
2. cari kode ]]></b:skin>
3. letakkan kode CSS berikut ini di atasnya

.post blockquote {
border:1px solid #FC8B3B;
background:#ddd;
text-align:justify;
padding:15px;
font-style:italic;
}

4. jangan lupa disave atau simpan.

maka hasilnya menjadi seperti ini:

Ini blockquote dengan efek bingkai garis berwarna oranye, backgroundnya abu-abu, perataan paragraf rata kanan kiri, jarak bingkai dengan tulisan 15pixel, model text tulisan miring.

Kode yang tertulis di atas masih sangat sederhana. Anda bisa bereksperimen sendiri agar lebih bagus lagi, caranya dengan merubah value-nya (kode di sebelah kanan titik dua)

Demikian tips sederhana menghias blockquote, semoga bermanfaat.