Mempercantik Blockquote WordPress dan Blogger

Hallo, ingin mempercatik blockquote kamu, yuk ikutin caranya ya :
CONTOH 1
kode css :
blockquote {
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;
}
CONTOH 2
kode CSS :
blockquote {
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;
}
CONTOH 3
kode CSS :
blockquote {
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;
}
CONTOH 4
kode CSS :
blockquote {
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;
}
CONTOH 5
kode CSS :
blockquote {
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;
}
CONTOH 6
kode CSS :
blockquote {
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;
}
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 blogger atau wordpress kamu
• Setelah kamu upload, ambil URL image-nya dan masukan di bagian CSS blockquotenya.

Bookmark this post:blogger tutorials Social Bookmarking Blogger Widget