Mempercantik/Memodifikasi Blockquote

J

ika Sobat pernah menjadi member sebuah forum, pasti sudah tidak asing lagi dengan istilah blockquote. Ketika Sobat meng-quote komentar dari member forum lainnya maka akan muncul tampilan komentar dalam sebuah kotak. Nah kotak inilah yang disebut blockquote. Fungsi blockquote adalah membuat tampilan yang berbeda dari sekitarnya. Selain untuk meng-quote atau mengutip komentar orang lain, blockquote biasanya juga digunakan untuk menampilkan testimonial, source code, dll. Bagi Sobat yang pernah membuat website reseller bisa menggunakan blockquote untuk menampilkan testimonial dari para pembeli produk Sobat. Cara membuat blockquote cukup mudah dengan menggunakan bahasa CSS. Berikut ini ada beberapa contoh tampilan blockquote beserta code CSSnya yang bisa Sobat pakai diblog atau website Sobat.

blockquote { font-family: Trebuchet MS; font-size: 13pt; background: transparent; padding: 10px ; color: #ff; margin: 5px; border: 3px solid #fff; border-radius: 20px; -moz-border-radius: 20px 0px 20px 0px;  -webkit-border-radius: 20px 0px 20px 0px; }

blockquote p:before { content: '\201C'; display: block; float:left; font-size: 70pt; height: 10px; line-height: 30px; margin:10px; color: #fff; font-family:Trebuchet MS; font-style: italic; }

blockquote p:after { content: '\201d'; display: block; float: right; font-size: 70pt; height: 10px; line-height: 50px; margin:10px; color: #fff; font-family:Trebuchet MS; font-style: italic; }

<div style=”border: 1px solid rgb(240, 240, 240); padding: 10px; background-color: rgb(192, 192, 192);Font:color:black;”>
TULISAN Sobat DISINI
</div>

<div style=”border: 2px dashed rgb(167, 204, 235); padding: 10px; background-color: #f4faff;Font:color:black”>
TULISAN Sobat DISINI
</div>

<div style=”border: 1px dashed #cc0000; padding: 10px; background-color: #ffffff;Font:color:black;”>
TULISAN Sobat DISINI
</div>

<div style=”border: 1px solid #CCCCCC; padding: 10px; background-color: #E6F4F9;”>
TULISAN Sobat DISINI
</div>

<div style=”border: 0px; padding: 10px; background-color: #ffff99;Font:color:black;”>
TULISAN Sobat DISINI
</div>

Ket :

• blockquote p:before { content: '\201C' berfungsi untuk menambahkan "Tanda Kutip" di awal Blockquote, sedangkan blockquote p:after { content: '\201d'; sebagai akhiran'a.

Sobat dapat merubah warna backgorund menjadi seperti yang Sobat inginkan.Apabila Sobat ingin memasukkan gambar Sobat Sendiri, Sobat hanya perlu merubah Code background menjadi
background: url(alamat Gambar Sobat);