• Business + Productivity
  • Creative Projects
  • Recipes
  • Travel
    • Disneyland
    • Facebook
    • Instagram
    • Pinterest
    • Twitter

Tauni Everett

Bibbidi Bobbidi Chew

Tauni Everett » Business + Productivity » Blogging » Blogger » Customize Block Quotes in Blogger

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':
}
blockquotes

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

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!

about me
post summary
Popular Posts


Snap

Snap

Editor at Tauni Everett
Snap has contributed 472 articles on https://taunieverett.com since October 2, 2012.



Power Bio Box by Zyra Console



You are here:
Home
Business + Productivity
Blogging
Customize Block Quotes in Blogger
Title:
Customize Block Quotes in Blogger

Authors:
  • Snap
Categories:
  • Blogger
  • Blogging
Mentions:
Blogger, Blogging Tips

Keywords:
Customize Block Quotes in Blogger

Last Updated:
November 14, 2018

  • One Word Goal: The Celebration Shoppe
  • One Word Goal: 30 Minute Crafts
  • Make a Light Reflector- A Quick, Free Trick To Brighter Photos!
  • How to Offer A Free Printable On Your Blog
  • How to Add Horizontal Featured Posts in Blogger
  • Make Your Blog a .COM
  • Add Your Instagram Photos to Your Blogger Sidebar
  • A Beginners Guide to Blogger’s Template Designer

«
»

Blogger, Blogging

Comments

  1. Mandy @ Sugar Bee Crafts says

    February 14, 2013 at 6:20 am

    I never knew this!! Great tutorial!

  2. Deb@asimplelifequilts says

    February 14, 2013 at 7:25 am

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

  3. Lora @ Craftivity Designs says

    February 20, 2013 at 1:16 pm

    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. JennJustReading says

    October 15, 2013 at 4:55 pm

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

  5. Yumi Kovic says

    January 14, 2014 at 9:06 pm

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

  6. Lana@crazybeautyland.blospot.com says

    July 6, 2014 at 6:27 am

    Thank You So Much!! I tried it out and it works nicely 🙂

    • Tauni says

      July 7, 2014 at 8:32 pm

      Fantastic Lana! We’re glad we could help! xoxo Tauni

  7. tracy n says

    August 23, 2015 at 7:11 am

    Thank you for this helpful tutorial.

    • Tauni says

      August 24, 2015 at 10:15 am

      You’re welcome Tracy. Glad we could help out! xo Tauni

Featured Posts

Disneyland Lunar New Year Mandarin Mousse Cake

The Best Disney Lunar New Year Food

Disneyland Lunar New Year Festival Entrance

Disney Lunar New Year

12 CLASSIC DISNEYLAND TREATS 1

12 Classic Disneyland Treats You Can Get All Year Round

Disneyland Snacks that Will Not Wreck Your Diet Bengal Outback Skewer

10 Disneyland Snacks That Will Not Wreck Your Diet

WordPress Hosting by House of Ideas

Copyright © 2025 SNAP! Creativity · Design by: Key Lime Digital Designs· Darling Theme