15 Style terbaik untuk Blogger Blockquote

Umumnya blockquote bawaan template default blogger terlihat monoton, malah banyak yg tidak di styling sama sekali. Berikut kumpulan berbagai style blockquote untuk artikel atau template blogger agar terlihat lebih menarik.

Ganti atau tambahkan kode " blockquote " dengan css dibawah ini, bisa jg dengan menambahkan css class .post atau yg sesuai di depan blockquote menjadi seperti ini

.post blockquote {
  kode css
}

Berikut ke 15 Style terbaik untuk Blogger Blockquote

blockquote #1

blockquote{
color: black;
font-family:Courier New;
font-size:9pt;
repeat-y;
max-height:200px;
margin:5px 10px;
padding: 4px 10px 0px 40px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVwBIS9Oq8Wthy0Is9yhBpP_8wdYjr7cO-6fY4HKDY5nQtCKD1Fc0ag16Q-0F7px9wiOr2X1oOd5kL8uSyTKPMcKu21hm_kaAqHNZf6uXbJAMvtc_LXUA3ua6r3Q9ksZn3HNHicgt5jv0/s1600/blockquote_bg.png) repeat-y left top;
white-space: no-wrap;
display: block; 
}

blockquote #2

    blockquote {
    font: italic 1em  "comic sans ms", Tahoma, sans-serif;padding-top: 10px;margin: 5px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbVPkJxyJa_l5j72im_DJ_KnGGawR9zMmZrEgxjjuax86iIuDvIsTz2dgjwfKNFqczk5VB7qtfAB_0XJ_jOjO9ewFv52Im0K7JqQdBxE3lIi3UAlIW-XNK5u9gscrsFAiNMW1Z-cQb9ZM/s400/comma2-left.gif) no-repeat top left;text-indent: 65px;
    }
    blockquote div {
    display: block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2dZX0RNKDFg_0aBZQDQhXPpuZu61SaMhUNSl4xXcDLAcQsATAmKlD5rsLl2cZbK-MCfwY7vEdTXjW1C7fKuE3YiDNbIH2kwFI0V1uRotQJWyia7Bub68luR5gJiVOPjz4JoRQgGdm_sg/s400/comma2-right.gif) no-repeat bottom right;padding-bottom:10px;
    }
    blockquote p {
    margin: 0;padding-top:10px;
    }

blockquote #3

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

blockquote #4

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

blockquote { background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px;boreder-radius:5px; }

blockquote #6

blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; } 

blockquote #7

blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em;background:#ddd; } 

blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }

blockquote #8

blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd2Z0cEp-m5JcaO8TydI-Uq_jAVk3Olk-laA2q3OXEaj9glwmjjMKnIaXrS42xiBEDAGSxNj9WI7SrG12dpbHyF6Pt-KN6-yPEly9o9wtXLenpS3HFX1sH8sKSaPuqSRr2BymgXwC4WKI/s1600/comma-side-orange1.gif) ; background-position:; background-repeat:repeat-y; margin: 0 10px; padding: 10px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } 
blockquote p { margin: 0; padding-top: 20px 10px; }

blockquote #9

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

blockquote #10

blockquote { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikoY9CMdbiteB6rOzQFy9-W1d0Y_ut5081FALGOL3tbR778NtqMYeS7A2rlvhsKKgodkTPzVcTbFhNf_p_SIMrKIfYiv_91RehhR2fzVlTPLuw4T7_Y4KEcd74VGdZS6pUAhBGT7Y_Zw6L/s1600/quote.png) 5% no-repeat #FFF8DD;background-position:-10px -7px; color:#000;font-style:normal;border: 1px dashed #FFC600; margin: 20px 0px; padding: 20px 0px 0px 20px; }

blockquote #11

blockquote{ background-color: transparent; border-top: 3px double #DC143C; border-bottom: 3px double #DC143C; padding: 5px; font-style: oblique; font-size: 1em; margin-left: 5%; margin-right: 5%; }

blockquote #12

blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } 
blockquote p { margin: 0; }

blockquote #13

    blockquote {
    font: 18px normal Tahoma, sans-serif;padding-top: 10px;margin: 5px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhJ2jZKEG2uVme5IRrLKOMlGAl45K6BRaus1Qcs8OvDVHKM-y0YCC7uUpHy0XyLKvOAmO7YM1S3pO4mhEJYfhJlRPOQNZId5Hjp8O43Sx9BzfIGAYFtsrC-6TLAQpknPdNjP_kR920VGw/s400/comma-left.gif) no-repeat top left;text-indent: 65px;
      }
    blockquote div {
    display: block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipeZWIoOYNNpklFJrYL3Qswh0RDDNXgGDZodyIkzx7dQRIBXhOaTXUsNYiQUxhIcygwigFHyJM1mG2i91s61pF5ZIvSl6VyV8cknBPzgm7sytmyyK4ToL6pRegHZ9XyxdFbuTBW_6xI6M/s400/comma-right.gif) no-repeat bottom right;padding-bottom:10px;
    }
    blockquote p {
    margin: 0;padding-top:10px;
    }

blockquote #14

blockquote { 
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesyHg75C4JxhKpi4BaKV5pc5ECMCqA-NU72TWsco71RlV9Vh9zESGNB5kMii8Y16dbbLWqXLI4anK3ZZr-K25oGnrKEOPiXtJScWKC1WVZMPB0HIbYAkN3K-CZvg6dDNtR5krvvkSaGA/s1600/blockquote_bg4.png") no-repeat transparent;
border-left: 5px solid #D0D4D8;
font-size: 18px;
font-style: italic;
line-height:120%;
margin: 20px 10px;
padding-left: 10px;
}

blockquote #15, yg dipakai blog ini

blockquote {
text-align:left;max-height:480px;width:580px;overflow:auto;background-color: #003060; color: #fff; font-size:12px;font-style:italic;font-face:arial; margin:10px;padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;text-shadow:none;word-wrap:break-word;
}

NOTE :

** Sobat blogger bisa mengedit sendiri agar tampilan bisa sesuai dengan template yg sudah ada .
** Sebelum mengedit XML Template pada blogger, jangan lupa untuk membackupnya lebih dahulu .