Skip to content

How do I customize my blockquotes in Blogger?

READ THIS: Before you start changing anything in your template code, please for the love of all that is sacred to your blog, back up the template. Blogger makes this really easy. On the Edit HTML page, just click the Download Full Template link and choose where to save the file. Make a note of it so you can find it if you need it.

OK, now that we have that out of the way, let’s figure out this customized blockquote business.

  1. Log in to Blogger.com
  2. Go to Design > Edit HTML
  3. Find this code in your HTML: blockquote {

The entire code string will look similar to (though probably not exactly like) this:

blockquote {
margin:.75em 0;
border:1px dotted #619644;
border-width:1px 0;
padding:5px 15px;
color: #000
}

In a blog post, the code above would tell your browser to display the blockquote between two green dotted lines:

Below are three different ideas for customizing your blockquotes. I show you how the blockquote will look, then I show you the code to use. To change your current blockquotes to one of the customized versions below, just copy the code from here and use it to replace the current blockquote code in your template.

Vertical Line Blockquote


Use this code for a vertical line beside your blockquote:
blockquote {
font: 14px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #619644;
}

Colored Background for Blockquote


Use this code for a colored background for your blockquote:
blockquote {
margin: 1em 3em;
padding: .5em 1em;
background-color: #b1d2a3;
}

To change the color to match your blog’s design, simply change the hex color.

Box Around Blockquote


Use this code to put a box around your blockquote:
blockquote {
margin:1em 20px;
border: 1px solid #619644;
padding: 10px;
}

Where it says “solid” you can change that to “dashed” or “dotted” (without the quotes) to see if you like that look better.

12 thoughts on “How do I customize my blockquotes in Blogger?”

  5. Brooke

    I have customized my blog’s blockquote to the code you have here for a vertical line. It was working alright with Firefox, but since recently updating my browser to Google Chrome, I am having some troubles. If I try to put a space between two lines (typing “enter”), it breaks my vertical line and I can’t figure out how to keep the line all together while still having spaces between paragraphs. Can you offer any help with this problem, please!?!? Thank you!

    1. Sharon

      You’ve probably googled the answer but have you tried going into the html when you’re writing a post/bloquote and instead of typing enter, do a or two breaks instead. That should keep it from seeing it as two separate block quotes.

  8. Maja

    I wanted to change this so bad, but couldn’t find the blockqoute part in my coding, but then just put in the code you provided to the posts section and it worked! Thank you!

  11. Jana

    I tried the box block code. I did everything right, added the code, changed the border color and added the

    around my text. When I published the part I wanted quoted was centered and everything, except there was no box around it. I actually tried two different box type codes, yours and one from a different site and both times there was no border around it. Any suggestions?

Comments are closed.