CSS3 Blockquote Bergambar-Kali ini
saya akan memberi tau
CSS3 Blockquote Bergambar,
atau seperti gambar di samping tulisan ini,
Sebelumnya Sumbernya dari
Ah-Shared, yg akan saya Re-Design Postnya dan demonya dengan Title
SFT-DARKNESS, Lalu Post sebelumnya adalah
CSS Kotak Keterangan Dan Kesimpulan, nah sekarang kita langsung aj ya petunjuknya,Lihat dulu demonya,nanti saya akan memberi tahu kodenya,
Demo Tidak langsung bisa dilihat
DI SINI!, nah kalau demo langsung bisa di lihat blockquote saya di bawah ini!
DEMO
kesimpulan Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor. Lorem ipsum dolor sit amet, Lore ane guera
bergeneis
samet samet samet
lorem ipsum blockquote star...
genius..
Nah itu demonya,oke lanjut..
Cara Membuat Blockquote Dengan Gambar
Pertama: Masuk blogger,lalu Klik Template Klik HTML
Kedua:
KODE CSS
.post blockquote{-webkit-box-shadow:rgb(221, 221, 221) 4px 4px 4px;-moz-box-shadow:rgb(221, 221, 221) 4px 4px 4px;box-shadow:rgb(221, 221, 221) 4px 4px 4px;background-image:url(http://i.imgur.com/he0c0BE.png);background-position:0% 0%;background-repeat:no-repeat repeat;border-radius:6px;border-top:1px solid #DDD;border-right:1px solid #DDD;border-left:1px solid #DDD;border-bottom:1px solid #DDD;text-align:left;border-width:1px;color:black;font-family:Consolas, 'Courier New', Monaco, Courier, monospace;line-height:18px;margin:0px 20px;overflow:hidden;padding:10px 20px 10px 45px;}.post blockquote p{margin:0;padding-top:10px;}
Keterangan
Kode http://i.imgur.com/he0c0BE.png ganti dengan code URL Gambar anda
Kesimpulan
Kode .post blockquote{..;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6HDsHzwaHWqgXSIs8nV4LXz5cbvWGLIfn8XhCKWcVmluh5_gdopD1Ebps_HNunKK6aEjlpjklGPhya8Nso4J8ZyzYn_rvP5nKJYR1xE4z705hwO5wbRn5gctsy8sX6iYN0hcHhOva_Eur/s1600/blockimg.png);...} untuk gambar yang bisa di repeat ke arah sumbu Y secara berulang-ulang
..{..;background-position:0% 0%;background-repeat:no-repeat repeat;border-radius:6px;..} untuk mencegah agar gambar yang tadi itu tidak merepeat/mengulang terus-menerus(tidak sesuai dengan kemauan kita)
Title : CSS3 Blockquote Bergambar
Description : CSS3 Blockquote Bergambar -Kali ini saya akan memberi tau CSS3 Blockquote Bergambar , atau seperti gambar di samping tulisan ini, Seb...
