email BlogLovin RSS Instagram Pinterest Goodreads Facebook Twitter

How to Use Blockquotes

Posted by on November 29, 2011

Blockquotes are those pretty little squares most of us book bloggers love to use to highlight a book’s summary. But though some of us know how to use it, I’ve had others ask me: “How do you get those pretty boxes???”

Here’s how you ‘use’ the blockquote function in Blogger posts:

Pretty easy, if I do say so myself. Keep in mind, the blockquote won’t show in your post, you’ll have to hit PREVIEW to see what it looks like on your blog.
And if you want, you can customize it with personalized colors! Here’s how:

1. Go to your Template Designer
2. Click on Advance
3. Scroll all the way down to Add CSS
4. Add this code:
blockquote {
  width: 490px;
  background: #ff0000;
  padding: 20px 20px 20px 20px;
}
5. Hit Apply to Blog!

The above code amounts to a RED blockquote (color code shown in green). If you want a different color, I suggest searching for a color code that will match your overall look. Here are a few:

#227600
#d308fe
#00ffe4
#ffba00
#0876fe

And you if you want a border to go around your blockquote box, add this line to the bottom of the code given above:

border: 3px dashed #FFF;

If you want it to be solid, replace dashed with solid, if you want the border to be a different color other than white, replace #FFF with your preferred color code. If you want a thicker/thinner border, increase/decrease the number of pixels.

This is how it should look like:
blockquote {
width: 490px;
background: #ff0000;
padding: 20px 20px 20px 20px;
border: 3px dashed #FFF;
}

What do you think? Have you tried it out? Leave me a link below so I can check it out!


The Icey Newsletter

Sign up for updates from IceyBooks and IceyDesigns, featuring books, blogging tips & tricks, design inspiration, exciting new happenings, and more!

17 comments

  1. I haven't tried it out yet, but did want to say “Thank You!” for posting how to do this. I've noticed the boxes, on a few blogs, with the book's summary, but never knew how it was done.

    Thanks again! =)

  2. Oh, cool! I'm looking to switch my posts up a bit and this will help. Now, if you could just explain the whole FeedBurner thing to me… (I have GFC, but as that may go away at some point, I want to make sure I've got my RSS done properly!)

  3. I've been using the block quotes for a long time now but I have to say that I've been lucky to have a designer as a friend and when I need help she often just does it for me. It's great that you did this post for those that don't have that person. Cause I know that I'm pretty stinkin' clueless myself ;)

  4. This is a really good post, Hafsah! I remember it took a lot of messing things up before I figured out how to adjust my blockquotes – I wish I had seen a post like this back then :)

  5. Thanks for sharing! I was wondering how you put borders on images too. You have a solid border for the blockquote box and a patterned one for the images that go with it. I only have a solid border – Eat. Read. Shop. and I want the images to have the same pink border, how do you do that?

    Thanks so much for your help!

Post a new comment