Customizing Blockquote Style in Blogger/Blogspot Without Background Image

As a blogger, sometimes we want to insert quotes where the text of the quote is placed between double inverted quotation marks. It is good to have quotations stand out from the regular text on the web page. Blogger allows addition of "Blockquote" but the default style is dull. Luckily, we can revamp the Blockquote style using our own CSS code. In this post, we will see some simple customization of Blogger Blockquote without using any external image backgrounds.

What is a Blockquote?
Blockquote is an HTML tag used to define long quotations. According to the W3C HTML5,

Blockquote element represents a section that is quoted from another source.

How to add a quote in Blogger?
To add a quote in Blogger, use the Blockquote tool from the toolbar. Select a text and click the Blockquote or in a new line, click on the Blockquote tool and start typing.

Where to place the CSS code to customize Blogger Blockquote style?

• Go to Blogger Dashboard > Click Your Blog Site > Template > Edit HTML 
• Find <\head> and paste the CSS code anywhere before the
  <\head>tag
• Save the template.

Simple customization of the Blogger Blockquote style using CSS:

• Simple Blogger Blockquote with green dashed border

<style>
.post blockquote {
    border: 2px dashed #03ba93;
    margin: 10px;
    padding: 10px;
    font-size: 16px;
    font-style: italic;
    font-family: Arial;
}
</style>

• Simple Blogger blockquote with green left border:

Code:

<style>
 .post blockquote {
    background-color: lightgrey;
    border-left: 4px solid #03ba93;
    margin: 10px;
    padding: 10px;
    font-size: 16px;
    font-style: italic;
    font-family: Arial;
}
</style>

• Blogger blockquote with big quotation marks

<style>
.post blockquote {
    padding: 10px 15px;
    margin: 5px 40px;
    /* border: 1px solid #E1E1E1; */
    /* background-color: #F6F6F6; */
    border-left: 4px solid #18B888;
    font-size: 15px;
    font-family: Times;
}
.post blockquote:before {
content: "\201C";
color: #353535;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post blockquote:after {
content: "\201D";
color: #353535;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding:15px 0px 0px 5px;
}</style>

If you would like to customize the above codes you can do so by changing color codes, and other properties. But it is best to do it visually using browser's "Inspect Element" tool.

Tools to customize Blockquote CSS code visually:
If you would like to customize, the above CSS code, you can use the browser's developer tool or in Firefox, you can use the "Inspect Element" Tool.

Firefox inspect element

• Add any of the above code to the Blogger template > Edit HTML > before <\html> and save the template.
• View a blog post that has Blockquote in it.
• Select the Blockquote text and right-click, then click "Inspect Element" (Firefox) or "Inspect"(Chrome).
• The Web Developer Tool console opens as shown in the screenshot below.
• In the "Rules" area, you can see the CSS code for the selected HTML element, in this case is a "Blockquote".
• You can edit values of CSS properties, and dynamically view changes in the page itself.
• Once satisfied with  the look, copy the rule and paste it in a notepad.
• Then go to Blogger > Template >Edit HTML and replace the previous code.