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

14 comments:

Gudang Ilmu 17 Mei 2010 09:35: wah cantiknya
tapi bisa gak mas kalau yang garis nya itu agak di timbulkan dikit
soalnya saya suka yang agak timbul githu dech

memang saya sudah menemukan tutorial yang membuat blockquote yang garisnya tuh agak timbul tapi warnanya tidak menarik.

apakah ada solusinya mohon bantuannya ?....
RAMDHAN 17 Mei 2010 13:17: sebenarnya saya masih awam tentang CCS (maklum newbie) hehe.. tp skarang dah ada pencerahan.. makasih infonya
patiukan 18 Mei 2010 14:51: udah keburu pake plugin bro :-)
Zippy 18 Mei 2010 18:34: Wuih...keren2 yah.
Kapan2 bakalan saya coba.
Info yang menarik banget nih :)
Dunia Hape 18 Mei 2010 18:36: Saya baru tau nih kalo bisa diubah2 kayak gini, heheh...
Kirain yang ada cuma bloquote bawaan template blogspotnya doank :D
Eldo Arfendika P 19 Mei 2010 00:30: wow mas Yuda! Bagus bagus lho desainnya. Manteb tuh contoh-contohnya. I love that so much!
Ketawa Bersama Oby 19 Mei 2010 23:39: CANTIK CANTIK YAH DESAINNYA
GREAT.. :D

maaf capslocknya keteken.... :P
Admin 20 Mei 2010 22:07: Kreasinya bgs2, rasanya mmg lengkap klu bljr desain web bs jg photoshop. Pingin jg tp...?

Bingung... jd dilema antara mau dan kemauan... blm mahir keduanya, skrg malah dilanda malas ngeblog.
Agus 21 Mei 2010 17:19: Gara-gara Block Quote arahan Kang Yuda Jadinya saya ingin mempercantik blog biar postingan tambah eye catching dan kalau berhasil tak kabari kang biar ditengokin.
Jokostt 21 Mei 2010 18:08: Tips Untuk yang suka kutip mengkutip (saya juga termasuk yang ada didalamnya). He....He....

Kapan-kapan coba saya praktekkan, Mas Yuda. Soalnya default quote blog diptara terlalu simpel, hanya dikotakin merah saja.
MisterXWebz 23 Mei 2010 01:30: Menyambung komen di diptara.com:

Aaah anda terlalu merendah sobat, yang newbie tuh aku yo ... xixixixixi...

Btw on the way oq templatenya sama ik ...??? tapi udah sama2 di obrak-abrik hahahahahahahaha,,,
mampir balek sob ...
Sukses ya bwt blognya ...
ducky 23 Mei 2010 14:52: kalo begitu saya bookmark ya halaman ini.. hehe..

keren2 blockquotenya.. meski jarang make, tp suatu saat pasti kupake dweuh.. thanks sharenya ya soub..
Opini 14 Februari 2011 12:35: Waduh Mas Yuda ... ilmunya masih kejauhan untuk mengikutinya. Btw safe dulua aja ya. pastinya nanti bermanfaat
DeeJayHan-Blg 10 Februari 2012 21:18: Trik yang bagus . comment back yah ^^.

Poskan Komentar

Mohon maaf jika saya terlambat atau tidak dapat me-reply komentar Anda. Terima kasih.