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/AVvXsEi6lI3EHCANtc_nSBGE487GU3vJlR-0EI7I8Oz0pxcIhA0TQKp2Z77q4e2hrHJ3iHikX7z9JPZK4r_uXETNqG2002VrtR4V62QunW3hJoU2N7uEkd-FargMzXYdrxGk-T24LQCXuF8u4Zc/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/AVvXsEj3DSYZASBurh7i5-a5_VBYuCOYynb0zHL_mu6gYA3CVtsXJZVd7dW2dI98DJnBc1PpbldV9uiZzr1FoDedfBd9IzJqqIS2vyIvR0SLGj243e_tnSASoQ8BHMl8tZquxOwgsDtL_-o-ER0/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/AVvXsEhjy89lE_CgLIxl5KVmwF_1OVMdPRMuPKzJPXiBTXY0krJ07e1CMr7f9-iJSMlMn0bnQYgaWxLEcYgGVenjdikA1Xk3p9fb-fX3S4z8rH_KrYh42CTy_rEGcqTDQv1rO2mRBFNsoPQ7i-c/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/AVvXsEgYpk02zF3stZqhDKM4bdKh0sI4E55N399xtaSkMykl5LMGu7k9yxsEng_WRjLkRGSo6PXyZFJkXe-3SYYvohVUUhDEQsnzgMsHSRbUwbPjmAa3YmKbw6M1HRX9KFDNiQ2PrzWDyWbx1Us/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