Membuat Blockquote Dengan CSS

Anda 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 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.

Selamat mencoba, semoga bermanfaat.

Contoh 1
Kode 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>

Contoh 2
Kode 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>

Contoh 3
Kode 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>

Contoh 4
Kode 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>

Contoh 5
Kode 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>

Contoh 6
Kode 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>

Contoh 1 setelah dipublish

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Contoh 2 setelah dipublish

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Contoh 3 setelah dipublish

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur.

Contoh 4 setelah dipublish

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum.

Contoh 5 setelah dipublish

All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures.

Contoh 6 setelah dipublish

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Berikut adalah beberapa gambar untuk Blockquote desain saya sendiri. Silahkan download gratis, setelah itu ganti URL pada kode CSS pada contoh-contoh blockquote di atas dengan URL gambar baru. Sebaiknya atur kembali padding dan margin disesuaikan dengan kebutuhan agar tataletak tulisan dengan gambar lebih serasi. Border juga dapat dihilangkan dengan memberi nilai 0, atau 0px.

Untuk mendapatkan gambar Blockquote di bawah, click kanan pada gambar kemudian pilih Save As !


Agar tidak perlu menambahkan kode <div id ="..."> ....</div> di dalam posting, ganti semua kode CSS #kutip1, #kutip2, #kutip3, #kutif4, #kutip5 dan #kutip6 dengan  .post blockquote sehingga pada saat membuat posting baru atau edit post, Anda dapat langsung membuat blockquote dengan hanya melakukan click pada tanda Quote di atas kotak posting berbentuk tanda kutip (") setelah kalimat yang akan di jadikan blockuote diblok terlebih dahulu.<br /> <br /> Kode HTML nantinya akan otomatis diawali oleh <blockquote> dan diakhiri dengan </blockquote>

Semoga bermanfaat.