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 BlockquoteBlockquote 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.
Membuat Blockquote
Membuat Blockquote
Membuat Blockquote
Membuat Blockquote
Membuat Blockquote
Membuat Blockquote
Membuat Blockquote
Membuat Blockquote
Membuat Blockquote
Membuat Blockquote
Membuat Blockquote
Membuat Blockquote
Membuat Blockquote
Membuat Blockquote

Selamat Mencoba,Sob...


Share:

14 comments

  1. Mantab gan artikelnya, salam kenal. T

    ReplyDelete
  2. @jalupangnamakasih sob..:e
    salam kenal juga ya:c

    ReplyDelete
  3. @Ading DoangTerima kasih, salam kenal juga :f

    ReplyDelete
  4. mantab sob..kalau mau merubah secara otomatis gmn y sob..??saya pngen nya otomatis sob..klu yg ini masukn kode CSS nya secra manual,,,jadi saya pngen setiap ada kode blockquate ngk perlu lg pasang kode CSS nya..termksih..

    ReplyDelete
  5. @dang murgantobisa koq,ente tinggal ganti kode css yg ada pada template blog milik ente yg lama fengan kode css bloquote yg baru.:w

    ReplyDelete
  6. oh itu namanya blockquote baru tahusaya, bagus2 makasih yo.

    ReplyDelete
  7. .. keren banget kawan. jd pengen nyoba nich ..

    ReplyDelete
  8. keren nih blackqotenya... izin coba ya

    ReplyDelete