Customize Block Quotes in Blogger

Hi Friends! Today I am going to show you how to customize block quotes in Blogger. First let’s talk about a couple things…

What is a block quote? Technically a block quote is used for quoting something or someone. You indent the paragraph when you are quoting a passage or citing.

Do block quotes have another purpose? If you ask me, yes! And of course I am referring to blogging. I think using the block quote tool while writing your blog posts can help you emphasize and draw attention to particular parts of your post. Maybe you want to highlight project directions or giveaway rules. Maybe you want to highlight a summary of the post. Whatever your purpose, using the Block Quote tool is a perfect way to draw someone in.

Let me show you what I mean …

Here is an example of a basic post. See how all 3 paragraphs are lined up on the left side?

Now let’s say that I want people to really pay attention to the second paragraph. So I am going to use the Block Quote tool in Blogger. Simply highlight all your text and click the little tool that looks like quotation marks.

And when you preview your post it will look like this >>>

Indenting the text makes it stand out a little but we can make it even more fun by adding a border, background, changing the font, or font size. I am going to walk you through some steps I made as I was playing with my block quotes.

First I wanted to add a border. To do that you will need to open your template Blogger HTML. Search (Command F or Ctrl F) and find the code

]]></b:skin>

Then right ABOVE that you will type …

.post blockquote {

Now any styling we want to make to our block quote goes directly under that. So to add a border it would look like this >>>

.post blockquote {
border: 1px dashed #000000;
}

You can change the 1px to be as big as you would like. The “dashed” can also be changed to “dotted” or “solid” depending on how you want your line. And the #000000 refers to the color of the border. Here is what the block quote looks like now.

Now let’s try adding a light background color. So you will continue adding to your same piece of code, and it will look like this >>>

.post blockquote {
border: 1px dashed #000000;
background: #f5f5f5;
}

Pretty fun right? But, it seems like the border is too close to the text. Don’t you agree? So let’s add a little padding so the border isn’t so close to the text. Go to your HTML and add a new line of code to your block quotes:

.post blockquote {
border: 1px dashed #000000;
background: #f5f5f5;
padding: 10px;
}

This is a small change, but one I think really makes a difference. You can play around with the “10px” until it is spaced how you would like. Here is what mine looks like now >>>

Next, I think it would be fun to change the font of the block quote  text. To do that you will need to pick a web safe font, and add this line of code to the same section we have been working with above. So it looks like this >>>

.post blockquote {
border: 1px dashed #000000;
background: #f5f5f5;
padding: 5px;
font-family: 'Oswald':
}

Fun! The text defiantly stands out now! We could also make the text bigger if we wanted. To do that you would add another line at the bottom of your code:

.post blockquote {
border: 1px dashed #000000;
background: #f5f5f5;
padding: 5px;
font-family: 'Oswald';
font-size: 20px;
}

The last thing I want to to do is change the color of my text. The black is a little stark to me. To change the color you would add this line of code:

.post blockquote {
border: 1px dashed #000000;
background: #f5f5f5;
padding: 5px;
font-family: 'Oswald';
font-size: 20px;
color: #f69378
}

And there you have it! You can play around and edit your block quotes however you would like! Just change the above code, preview and see it you like what you see and save! I would love to see what you do with this tutorial! So leave a link in the comments if you customize your block quotes!

Have a great week and Happy Valentines Day!