Customize Block Quotes in Blogger

snaptitles

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?

blockquotes in blogge

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.

blockquotes

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

blockquotes

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.

blockquotes

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;
}

blockquotes
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 >>>

blockquotes

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':
}
<a href="http://snapcreativity.com/wp-content/uploads/2013/02/snap7.png" rel="attachment wp-att-8973"><img class="size-full wp-image-8973 aligncenter" style="border: 1px solid #ccc;padding: 5px" alt="blockquotes" src="http://snapcreativity.com/wp-content/uploads/2013/02/snap7.png" width="600" height="241" /></a>

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;
}
<a href="http://snapcreativity.com/wp-content/uploads/2013/02/snap8.png" rel="attachment wp-att-8977"><img class="size-full wp-image-8977 aligncenter" style="border: 1px solid #ccc;padding: 5px" alt="snap8" src="http://snapcreativity.com/wp-content/uploads/2013/02/snap8.png" width="600" height="232" /></a>

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
}

snap9
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! 

Kendra @ Key Lime Digital Designs

Kendra @ Key Lime Digital Designs

Kendra is a wife and mom, based in Hawaii. She specializes in digital website design. Pick up additional web design tips and check out her design skills at Key Lime Digital Designs.
Kendra @ Key Lime Digital Designs
Kendra @ Key Lime Digital Designs
Kendra @ Key Lime Digital Designs

Latest posts by Kendra @ Key Lime Digital Designs (see all)

Comments

  1. I never knew this!! Great tutorial!

  2. I can’t wait to try this – thanks so much!

  3. I already followed your tutorial and it worked great :) We are doing a series right now, and it allowed me to highlight that at the top of our post. Thanks so much!
    - Lora

  4. Instead of a border, I’d like to do a block of color behind the text. Is that possible?

  5. Loved this tutorial! Really appreciate the step-by-step tutorial.

  6. Thank You So Much!! I tried it out and it works nicely :)

Leave a Reply

Read previous post:
10 Sweet Treats
Show & Tell Linky No. 36: 10 Sweet Treats

Show & Tell Highlights Looking to share a little last-minute Valentine love? How about one of these delicious sweet treats......

Close