Cara Membuat Blockquote Keren CSS

Hallow, sob jumpa lagi kita di Blog kesayangan kalian semua ini (narsis MODE : ON)

Nah, Pada postingan kali ini Kaka-jR akan mencoba untuk share sedikit tentang Tutorial Cara Membuat Blockquote Keren dengan CSS yang akan ane berikan secara gratis untuk kalian semua. Tapi 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 menampung kode-kode HTML yang selanjutnya akan 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 :

#sample1 {
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=”sample1″>Kalimat sobat</div>

CONTOH 2

kode CSS :

#sample2{ 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=”sample2″>Kalimat sobat</div>

CONTOH 3

kode CSS :

#sample3{ 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=”sample3″>Kalimat sobat</div>

CONTOH 4

kode CSS :

#sample4{ 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=”sample4″>Kalimat Sobat</div>

CONTOH 5

kode CSS :

#sample5{ 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=”sample5″>Kalimat Sobat</div>

CONTOH 6

kode CSS :

#sample6 { 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=”sample6″>Kalimat Sobat</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/picasa)
Setelah kamu upload, ambil URL image-nya dan masukan di bagian CSS blockquotenya.