Css blockquote sederhana ringan dan menawan

Blockquote digunakan untuk menampilkan kutipan dari sumber lain, dalam hal berbeda blockquote juga dapat digunakan untuk menentukan atau memperjelas tulisan dalam artikel, menunjukkan bahwa tulisan tersebut mengandung arti / peringatan yg penting dibaca.


Kali ini saya akan berbagi informasi membuat Text blockquote tanpa gambar yang pasti tidak akan mempengaruhi loading blog.
Untuk itu saya akan menggunakan symbol sebagai pengganti gambar, berikut hasil kerja dari CSS ini :

CSS CODE

<style>
/* blocquote */
blockquote {
position: relative;
word-wrap: break-word;
font-family:Abel;
background: transparent;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px 0.1em 30px!important;
}

blockquote::before {
position: relative;
top: 15px;
left: -29px;
color: #990000;
content:"❝";
display: block;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.5em;
vertical-align: -0.4em;
opacity: 0.2;
}
</style>

Setelah CSS diatas terpasang pada template yang anda gunakan, selanjutnya untuk menampilkan blockquote di postingan gunakan :

HTML CODE

<blockquote> tulisan disini </blockquote>

Background transparent digunakan untuk menyesuaikan warna background yang digunakan pada template, ubah transparent ke warna lain misal: #000 dengan background hitam.


content:"❝" dapat diganti dengan symbol lain yang anda inginkan atau dengan Text.

Pertanyaan lain dapat disampaikan pada kolom komentar dibawah.

Terima Kasih