Membuat Blockquote Dengan CSS

A

nda mungkin sering mengutip sebuah artikel atau sebuah paragraph dari sumber lain sebagai tambahan informasi pada sebuah posting.

Beberapa blogger menandai kutipan atau blockquote tersebut dengan tanda kutif, huruf italic, warna font, atau tanda lain sebagai pembeda dengan pargraph lain.

Di bawah ini adalah cara membuat Blockquote dengan CSS bagi pemula kayak saya yang ditulis dalam bentuk kode CSS dan HTML sederhana agar lebih mudah dipahami. Tujuannya agar tampilan sebuah kutipan di dalam sebuah posting dapat lebih menarik.



Pada contoh-contoh blockquote di bawah ini, Anda bisa merubah warna font, ukuran font, margin, padding, border, dan gambar background sesuai keperluan. Untuk mengetahui kode warna, dapat dilihat pada postingan sebelumnya mengenai Kode Warna.

Untuk harga paten atau permanen di postingan sobat, Kode-kode tersebut dipasang pada html editor blogger (di bagian edit HTML) di atas kode " ]]></b:skin> ".

Kode tersebut juga dapat dipasang di dalam postingan tetapi dalam mode "HTML" bukan mode "Compose" tetapi harus diawali tag <style> dan ditutup dengan tag </style>

Selamat mencoba, semoga bermanfaat. 

Salah satu contoh CSS Jadinya  akan seperti ini

Beberapa blogger menandai kutipan atau blockquote tersebut dengan tanda kutif, huruf italic, warna font, atau tanda lain sebagai pembeda dengan pargraph lain.

Di bawah ini adalah cara membuat Blockquote dengan CSS bagi pemula yang ditulis dalam bentuk kode CSS dan HTML sederhana agar lebih mudah dipahami. Tujuannya agar tampilan sebuah kutipan di dalam sebuah posting dapat lebih menarik.

Pada contoh-contoh blockquote di bawah ini, Anda bisa merubah warna font, ukuran font, margin, padding, border, dan gambar background sesuai keperluan. Untuk mengetahui kode warna, dapat dilihat pada postingan sebelumnya mengenai Kode Warna.

Kode 1 CSS 

#kutip1 {
   width:85%;
   margin-left:30px;
   padding:5px 5px 5px 10px;
   background:#eaf6ed url(http://i44.tinypic.com/2076aet.jpg) no-repeat right bottom;
   border:#04fc38 solid 1px;
   border-left:#04fc38 solid 10px;
 }

Kode HTML 

<div id="kutip1">Kalimat Anda</div>



Kode 2 CSS 

#kutip2 {
   width:85%;
   margin-left:30px;
   padding:5px 5px 5px 10px;
   background:#f9edf7 url(http://i41.tinypic.com/o6d5hs.jpg) no-repeat right bottom;
   border:#d301b7 solid 1px;
   border-left:#d301b7 solid 10px;
 }

Kode HTML 

<div id="kutip2">Kalimat Anda</div>


Kode 3 CSS 
#kutip3 {
   width:85%;
   margin-left:30px;
   padding:5px 5px 5px 10px;
   color:#04570a;
   background:#f2fbf4 url(http://i41.tinypic.com/35a8ayb.jpg) no-repeat right bottom;
   border:#017b19 solid 1px;
   border-left:#f906fc solid 10px;
 }

Kode HTML 

<div id="kutip3">Kalimat Anda</div>


Kode 4 CSS 
#kutip4 {
   width:87%;
   margin-left:30px;
   padding:5px 5px 5px 10px;
   background:#e1f2fa url(http://i42.tinypic.com/21johfa.jpg) no-repeat left top;
   border:#04affe solid 1px;
}

Kode HTML 

<div id="kutip4">Kalimat Anda</div>


Kode 5 CSS 
#kutip5 {
   width:85%;
   margin-left:30px;
   padding:10px 5px 5px 20px;
   color:#0066cc;
   background:#fff url(http://i40.tinypic.com/erlch4.jpg) no-repeat left top;
   border:#364999 solid 1px;
}

Kode HTML 

<div id="kutip5">Kalimat Anda</div>


Kode 6 CSS 

#kutip6 {
   width:87%;
   margin-left:30px;
   padding:5px 5px 5px 10px;
   color:#04570a;
   background:#e3f2e2 url(http://i44.tinypic.com/jgo0hg.jpg) no-repeat left top;
   border:#098303 solid 1px;
}

Kode HTML 

<div id="kutip6">Kalimat Anda</div>