Membuat Blockquote Cantik

Published by Kang Fathur Thursday, December 03, 2009

Setelah kang fatur memposting cara membuat "Teks Area Cantik" kali ini kang fatur mao bagi bagi lagi yaitu "Membuat Blockquote Cantik" yang seperti para sobat liaht di Blog Kang Fatur ini.

Blockquote atau yang pernah kang fatur sebut sebagai teks menjorok ke dalam dari batas tepi kiri dan tepi kanan area postingan. Tujuannya adalah untuk mempertegas isi tulisan ataupun teks yang dianggap penting yang berada di area blocquote. Biasanya yang sering dipakai para blogger untuk menuliskan kode-kode script. dan untuk blog kang fatur hasilnya seperti contoh di bawah ini:

Mohon dukungannya dalam kontes Belajar nge-BLOG Para Pemula dengan memasang kode ini di halaman blog Sobat:

<a href="http://ade-tea.blogspot.com"><img src="http://i634.photobucket.com/albums/uu61/adetea/benerkang.gif"/></a>

Naaah, kotak di ataslah yang kang fatur maksud dengan blockquote yang (katanya) cantik. Berikut cara membuat atau yang lebih tepat memodifikasi tampilan blockquote.

1. Login ke blogger.com
2. Tata Letak
3. Edit HTML.
4. Cari kode ]]></b:skin> , kemudian letakkan kode di bawah ini tepat di atasnya atasnya:

blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;

background: #e0ffff;

border: 2px solid #4aa02c;
border-left: 20px solid #4aa02c
}

5. Simpan Template. dan lihat hasilnya!!


Sedikit keterangan untuk pewarnaan:

• color: #000000; » pewarnaan teks di dalam kotak blockquote. Ganti #000000 dengan kode warna yang anda inginkan.
• background: #e0ffff; » pewarnaan latar belakang (background) kotak blockquote. Ganti #e0ffff dengan kode warna yang diinginkan.
• border: 2px solid #4aa02c; » pewarnaan garis tepi (border) kotak blockquote. Ganti #4aa02c dengan kode warna sesuai selera anda.

WARNING!
Hati-hati sebelum memasang script blockquote di atas, apabila di dalam barisan CSS Template anda sudah terpasang kode blockquote, maka script di atas tidak akan berjalan. Jadi, sebelum memasang, coba cari dulu siapa tahu kode blockquote-nya sudah ada (cari saja dengan find text: blockquote , dan pastinya kalau memang sudah ada berarti kodenya di atas ]]></b:skin> dan anda hanya perlu mengeditnya.

Semoga berhasil dan bermanfat,

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI