Top 5 Stylish BlockQuote Code for Blogger blog

Blockquote Style 1:-

blockquote {background: #f5f5f5;font: 14px/20px;color: #444;border-left: 5px solid #fa5b0f;padding: 20px;font-family: Geneva, Tahoma, Verdana, sans-serif;}

Blockquote Style 2:-

blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmbsho0cYMWnSvkl3Py1VbCt-X67l98eNJoXtVgedDIcwzBIixp27EN8IEIPoIuiQGLdlw1Q8M2Xxz9xoX7NkInkAAN9MBzs80eOrfDRCdPNZ4YeH8S0_9ZtTeQVwqc7A0J0ZTb7_vGQQ/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; }

Blockquote Style 3:-

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhDrRDvfyaH4gUmM8dGg9zxcg7JGTmUUQzyNsULfF13Li68SutROAdqg4lDzvM7hmdpVJ5CmCzps-9JV7r_cc5fnrkbizdUJnc-IEOQQ2SRy9rrqSaFnHIkNExKCOf4wju8rEKGAG0o6g/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; }

Blockquote Style 4:-

blockquote { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQUHBezFsuexcqgM9-bdUQbpeJLhmfYKuz_J89fm7VwnG7ZdNrW6RXYoDdoYooqYwEUlC35lM63ZoImteRfOr4CDhHfPELd-QY1rrdlLSN17vzUm-aIEOhodmfGb0GYDfqxXN13EfD7_Q/s1600/paper1.png) repeat-y scroll 0 0 transparent; border-radius: 5px; margin: 0px 50px 0px 30px; padding: 30px 30px 30px 50px; line-height: 1.4em; font-family:’Fondamento’, cursive, sans-serif; font-size:14px; }

Blockquote Style 5:-

blockquote{ background:#fff; margin: 0px 30px 0px 20px; padding: 20px 20px 20px 20px; border-left:3px dashed #ddd; font-size: 14px; }

Blockquote Style 6:-

blockquote { font-size: 14px; margin-bottom: 20px; line-height: 1.65em; font-weight: 300; padding: 20px 20px 20px 50px; color: #fff; border-top: 5px solid #77818d; background: #77818d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9RyEqhtbFd-Bkf75-JUwc9OHgRnWMECwvY7DrwhP0eSnvX4hGEesydN2S8aRHiKBD1wwzNouuKv-wshIiEwnVAFxbTzwdQ36iIxeyxbWXc0yzPG7MzEfQmu5pAIpMdq8oDre5LgEM47U/s16/icon_blockquote.png) no-repeat 20px 25px;} blockquote p { margin: 0;}

Blockquote Style 7:-

blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzNqyhyphenhyphenqEaFxNxZMI4MJDhuSCjMdjF6gctiOBwvrU8GGAutGD_PrIEHQ1q3yMZ1VOiTf_0AD3ZcUg5NKQsJ-_MpQtbSO4x_-_O1geUE4rQtn8VGzgKr_Jjr4PgcjjM9shO_FT-7SFlW_o/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0px 50px 0px 30px; padding: 30px 30px 30px 50px; color: #C7CACF; font: normal 1.105em Helvetica, verdana, serif, Georgia, “Times New Roman”; .post blockquote p { margin: 0; padding-top: 10px; }

Back to - How to Add Blockquote to Blogger blog Post