Cara mudah membuat Bloquete Dengan menambahkan tag CSS

Merubah Blockquote di Blog

Blockquote merupakan koding HTML yang biasanya digunakan untuk mengutip artikel atau postingan dari sumber-sumber lain. Biasanya dalam HTML blockquote biasa dipanggil dengan menggunakan tag <blockquote></blockquote>.Secara default hampir semua template baik itu berbayar ataupun gratis menyediakan atau telah memasang blockquote ini. Namun yang jadi masalah adalah apakah blockquote yang tersedia ini telah sesuai dengan selera kita.

[blockquote 1]

Tapi jangan khawatir karena blockquote ini dapat kita rubah semau kita dengan sedikit mengutak-atik bagian css dari blog kita. Modifikasi blockquote yang bisa kita lakukan adalah seperti penambahan background, membuat border, merubah ukuran font, merubah jenis font, merubah warna, dan masih banyak lagi.

[blockquote 2]

Ada yang perlu di ingat dalam merubah blockquote ini. Usahakan anda memilih blockquote yang sesuai dengan kebutuhan blog anda. Jika blog anda ber niche pendidikan misalnya, usahakan menggunakan blockquote yang sederhana dan memiliki gambar quote atau tanda petik. Berbeda jika blog anda ber niche tutorial blogging. Biasanya blogger yang membuat tutorial blogging menggunakan fungsi quote ini untuk menampilkan kode HTML atau CSS yang diberikan.

[blockquote 3]

Bagaimana tertarik untuk merubah blockquote seperti yang ada di postingan ini? Silahkan salin kode CSS di bawah ini dan gantikan pada bagian CSS blockquote anda. Biasanya blockquote dibagian CSS ditulis pada bagian awal, blockquote.

[blockquote 4]

KODE HTML 
Hanya cukup dengan membuat <blockquote>bla.. blaa... blaaa</blockquote>. KODE CSS blockquote 1

blockquote style {font: 14px/20px italic Times, serif; padding-left: 70px; padding-top: 18px; padding-bottom: 18px; padding-right: 10px; background-color: #dadada; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 5px; background-image: url('http://css-tricks.com/examples/Blockquotes/images/openquote4.gif'); background-position: middle left; background-repeat: no-repeat; text-indent: 23px;}

blockquote 2

blockquote style {font: 18px/30px normal Tahoma, sans-serif; padding-top: 22px; margin: 5px; background-image: url('http://css-tricks.com/examples/Blockquotes/images/closequote3.gif'); background-position: top left; background-repeat: no-repeat; text-indent: 65px;}

blockquote 3

blockquote style {background-image: url('http://css-tricks.com/examples/Blockquotes/images/closequote1.gif'); background-position: middle left; background-repeat: no-repeat; text-indent: 23px; font: 16px/25px centaur, serif; padding: 10px; border: 2px dotted #333;}

blockquote 4

blockquote style {font: 14px/22px normal helvetica, sans-serif; margin-top: 10px; margin-bottom: 10px; margin-left: 50px; padding-left: 15px; border-left: 3px solid #ccc;}

  Cara penggunaan

• Buka edit HTML dan masuk ke bagian CSS (jika wordpress di file style.css).
• Cari bagian tag .blockquote atau sejenisnya. Biasanya kode akan seperti di bawah ini, bagian yang di blok adalah bagian yang bisa kita ganti sesuka kita.

• Selanjutnya ganti kode css yang berada di dalam kurung kurawal dengan kode CSS di atas.
• Save dan lihat hasilnya.

Blockquote berbeda di postingan Untuk membuat blockquote berbeda ini caranya mudah, hanya tinggal membuat tag CSS baru misal blockquote2 {} dan memanggilnya dengan tag HTML <blockquote2></blockquote2>. Namun jika anda kesulitan melakukan ini bisa juga menanamkan langsung CSS ke dalam tag div. Tag div yang dimasukkan CSS menjadi,

<div style="background-image: url('http://css-tricks.com/examples/Blockquotes/images/closequote1.gif'); background-position: middle left; background-repeat: no-repeat; text-indent: 23px; font: 16px/25px centaur, serif; padding: 10px; border: 2px dotted #333;">artikel anda</div>