How to Use Blockquotes

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:


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!


Hafsah Faizal is a YA author, designer, and blogger. Her designs have graced the sites of New York Times bestselling authors, bloggers, and more. She resides in Texas, with her family.



  1. Reply

    Avid Book Reader

    November 29, 2011

    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. Reply

    Nicole@The More the Merrier

    November 29, 2011

    I thought it had to be a specif type of blog. Thanks so much. I'm pretty much illiterate when it comes to the advanced computer stuff.

  3. Reply

    Nicole@The More the Merrier

    November 29, 2011

    That would be specific(on my above comment). I tried it out and I totally go the box on there. I haven't used it in a post yet but I'll leave the link once I do. Thanks again!!

  4. Reply

    Juju at Tales of

    November 29, 2011

    Cool of you! I <3 my block quotes :)

  5. Reply

    Asheley (@BookwormAsheley)

    November 29, 2011

    i also thought you had to have a specific type of blog. i'm definitely going to try it though. this is so great. thanks a bunch!

  6. Reply

    Mary @ BookSwarm

    November 29, 2011

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

  7. Reply


    November 29, 2011

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

  8. Reply


    November 29, 2011

    I use this in almost all my posts :) A friend helped me customize it awhile ago and it's so easy and looks awesome!!

    Anna @ Literary Exploration

  9. Reply

    Arianne Cruz

    November 29, 2011

    i figured out how to do mine really cute :D matched my template :D

  10. Reply

    Lauren M

    November 29, 2011

    I love blockquotes! I use them when I add in a book summary from the publisher. :)

  11. Reply

    Randa Krbagh

    November 29, 2011

    I love CSS!! I was wondering how to do that and when I did you posted this article!!! XD
    Thank you so much for the help :)

  12. Reply

    YA Book Queen

    November 29, 2011

    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 :)

  13. Reply

    Molly Gibson-Mee

    November 30, 2011

    Great post! I was just wondering how you make them patterned? Like your blockquotes match you background. Thanks so much!

    Reading is my cup of tea

  14. Reply


    February 22, 2012

    I cant't figure this out, I have it all done except when I click preview the box with info is below my pic and it's not linked to my pic?

  15. Reply

    sarabara081 @ Forever 17 Books

    June 9, 2012

    I've had this post bookmarked for quite some time and I just tried it out and it worked like a charm! Thank you! I am really clueless about this stuff but you explained it perfectly. :)

  16. Reply

    Sat Mendoza

    June 15, 2013

    This comment has been removed by the author.

  17. Reply

    Sat Mendoza

    June 15, 2013

    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!