Membuat Blockquote keren dengan CSS

Hey semua, sudah lama tidak posting ya. Itupun sudah seminggu yang lalu. Udah gatel nih untuk posting lagi. 

Nah, Pada postingan kali ini saya mencoba untuk melengkapinya dan memperbaikinya yang akan saya berikan secara cuma-cuma untuk kalian semua. Sebelumnya, Apa itu Blockquote? Blockquote merupakan sebuah bentuk untuk mengkutip/memblock suatu kalimat yang ingin dikutip dan mungkin juga bisa untuk digunakan untuk mengkutip coding-coding HTML.

Seperti halnya blog ini, yang menggunakan blockquote untuk mewadahi kode-kode HTML yang selanjutnya digunakan di dalam postingan untuk mewadahi/mengkutip coding-coding/kode-kode HTML itu tadi. Blockquote variasinya banyak sekali, salah satunya menggunakan CSS seperti yang akan saya terangkan pada artkel tutorial kali ini. Disetiap template yang kita pakai di blog, dipastikan sudah terdapat Blockquote.

Tapi, ada beberapa, mungkin tidak sesuai dengan selera, keinginan, model kita.. Entah tampilannya kurang menarik ataupun warna yang gak ataupun mecing. Nah, disini saya ingin berbagi sebuah CSS yang berfungsi untuk memodifikasi Blockquote diblog sobat. semua. Sebenarnya untuk memunculkan sebuah blockquote cukup mudah, cukup membubuhkan kode : <blockquote> Kalimat di dalam Blockquote</blockquote>.

Cara membuat blockquote dengan CSS ini kita memberikan nuansa gambar dan bisa mengganti-ganti gambar yang ingin digunakan sesuai keinginan kita. Dalam menggunakan blockquote dengan CSS, penggunaanyapun bubuhannya pun berbeda. Perhatikan berikut.

Nah untuk menerapkanya di blog yang menggunakan blogengine Blogger, caranya sebagai berikut :

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>

Ingin melihat hasilnya, berikut screenshotnya :

Jika kamu mau gambar/background blockquotenya yang lain, ada beberapa alternatif background dibawah. Silahkan pilih.
Caranya:

• Setelah kamu memilih dan menyimpan salah satu gambar dibawah di komputer kamu, lalu upload gambar tsb. di (misal, tinypic.com)
• Setelah kamu upload, ambil URL image-nya dan masukan di bagian CSS blockquotenya.

Semoga bermanfaat ya!