Desain Blockquote

Ok kalian ini saya ingin berbagi sedikit tips yaitu mendesain sendiri tampilan blockquote agar sedikit lebih menarik.. Langsung saja ke tkp..

• Login blog
• Rancangan --> Edit HTML --> Expand Templated Widgets
• Backup terlebih dahulu template anda
• Cari kode ]]></b:skin>
• Masukkan kode dibawah ini diatas kode ]]></b:skin>

.post-body blockquote {margin: 10px 10px 10px 20px;padding: 10px 15px 10px 15px;line-height: 1.6em; color: #1100FF; background: url(http://2.bp.blogspot.com/_n7xseT2-HDU/TTfSVR6DdyI/AAAAAAAAArQ/ZtQUl-i6dhU/s1600/blockquote%2Bpelajaran%2Bblog.png) no-repeat left top; border-left: 10px solid #666666; }

Contoh 1

 Atau

.post blockquote { font:bold italic .9em "comic sans ms", Tahoma, sans-serif; padding-top: 25px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2b3V77gdodXEr7i7G80yFeAvVB7XHd8hsMHXjKcZFHKdOl7MP_jyIDex2shAX5FgPYWaz8Po9WJrLC811vnV9AXFhuC2RDwIJxFDpxlTzVLbvcCba7ptezI9X7QiDJoAzfMss2Eea3Nc/s400/left.gif) no-repeat top left; text-indent: 65px; color:#6299E4; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8qAhyphenhyphenfBJgDTdpdn__dacr0wKVvHpCbbhaMSGeweNDzMQMK_bkDmBjm6s-WL5wNSMNWAl4WxQnakf29yDRwr7AGYjrXYvnkH8kyIE10vwxU6t6pmpS5IiHwUc_NOOfrkJp6G_8iQAlHM/s400/right.gif) no-repeat bottom right; padding-bottom:30px; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh 2

 Atau

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXiPYThaqFChpOfUJ-WCinqRsC-kxZHQlYc1OC4dclTIcl3JvNbc-TAa_fmJv6jEpyW3Nkxe07RmO48FP88LLhw-kDukvtSklvbYilly4mR4RuzqfFv36wPlK_bGWC11PBGjN_0BUzMH8/s1600/comma-side-orange1.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; }

Contoh 3

Atau

.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh 4

Atau

.post blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFr-UqNce1YGuIDh4QmZiv2FVdMzr1VHuPtSu8xlHherAKoT6DhasrciHNQa1eZEurNt-w4lClX9aEEEw1xeqdyeYHrzjszDsbPK_ZJrOA-iIeyK4Yrs6CYkH8SE_HcSLpFl-0EHmPvBc/s400/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px; }

Contoh 5

• Simpan