Kristie Hill

Grow your blog business.

How to make your blog content pop!

PinShares4

Hi there! Today’s post is part of The Design Your Own (lovely) Blog, Blog Tour hosted by the fabulous Marianne. This is the last week of the 3 week blog tour full of helpful blog design tips and tutorials, including Anna’s tutorial yesterday on how to spice up your footer.

Today I am teaching you how to make your text stand out by using block quotes and content boxes.

A block quotation is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation – Wikipedia. This is a block quote.

What is a content box? A content box is a box used to visually offset text or content within a section of text. This is a content box.

How to use Blockquotes for and content boxes

I like to think that blogs are more like magazines than they are books or journals. Think back to the last magazine you read in the grocery store checkout. What did the pages look like? Magazines are littered with contrasting texts.

We all know that it is very important to have a great blog design, but we also know that “content is king”. So add style to your content and make your text stand out with block quotes and content boxes.

It does take a bit of coding to achieve block quotes and content boxes, but I’m going to walk you through the steps.

Create custom block quotes for your blog

Block quotes are used when you quote someone else, another article, or even yourself. Use block quotes when you share exact quotes. They are usually indented from the body text and are italicized.

WordPress and Blogger both have built-in block quotes, but the following are examples of customized block quotes.

This is a classic block quote with a default quotation mark on left side.

Happiness can be found even in the darkest of times if one remembers to turn on the light -Albus Dumbledore

This is a block quote with left border

If you fall behind, run faster. Never give up, never surrender, and rise up against the odds.- Jesse Jackson

This is a block quote with borders on top and bottom.

Success usually comes to those who are too busy to be looking for it.
Henry David Thoreau

This is a block quote I created for a client. It uses images as the top and bottom border.

You build on failure. You use it as a stepping stone. Close the door on the past. You don’t try to forget the mistakes, but you don’t dwell on it. You don’t let it have any of your energy, or any of your time, or any of your space.”
– Johnny Cash

CSS code for block quotes

Here is the code used to create the block quote examples above. Feel free to use and modify these to create your own block quotes. Simply choose a code and copy/paste it into your blog’s stylesheet (I’ll show you where to paste it in the instructions below).

*/Classic block quote———————– */
blockquote {
color: #999;
margin: 40px;
font-style: italic;
}
blockquote::before {
content: “\201C”;
display: block;
font-size: 20px;
height: 0;
left: -20px;
position: relative;
top: -10px;
}
*/Block Quote with left border———————- */
blockquote {
border-left: 4px solid #18B888;
color: #18B888;
font-style: italic;
margin: 30px 0 30px 15px;
padding-left: 15px;
}
*/Block Quote with top/bottom border———————– */
blockquote {
border-top: 1px solid #3A78AB;
border-bottom: 1px solid #3A78AB;
color: #3A78AB;
font-style: italic;
margin: 30px;
padding: 30px;
text-align: center;
}
*/Block quote with image border———————– */
blockquote {
background:
url(https://kristiehill.com/wp-content/uploads/2014/11/blockquotebg.png) top center no-repeat,
url(https://kristiehill.com/wp-content/uploads/2014/11/blockquotebg2.png) bottom center no-repeat;
color: #EF5488;
font-style: italic;
margin: 30px;
padding: 30px;
text-align: center;
}

Instructions for adding block quote CSS to WordPress

From your WordPress dashboard, navigate to Appearance – Editor and select your stylesheet (style.css). Find the code for the current block quote code and replace it with your custom CSS.
How to add CSS to WordPress

Instructions for adding block quote CSS to Blogger

From your Blogger dashboard, navigate to the Template screen and click Customize. Once you are inside the blogger template designer, click advanced and scroll down to Add CSS. Add the CSS for your custom block quote and then click apply to blog.
How to add CSS to blogger

How to use block quotes within your posts

Now that you’ve added CSS for block quotes to your stylesheet, it is easy to use them inside your blog posts. Simply highlight the text you want to be a block quote and click the quotation symbol on your toolbar.

how to add blockquote wordpress

how to add a blockquote blogger

Create content boxes for your blog.

Content boxes put your text within a color box. For example, I use yellow content boxes any time I give a blogging definition within a blog post. I also use content boxes to separate the different services I offer. Some bloggers use content boxes to emphasize phrases from the article. Marianne uses content boxes to introduce guest writers on her blog.

This is a content box without a border. Use it to highlight important text within your articles.
This is a content box with a left border only.
This is a content box with a solid border

CSS code for content boxes

Here is the code used to create the content box examples above. Feel free to use and modify these with your blog’s colors to create your own content boxes. Simply choose a code and copy/paste it into your blog’s stylesheet.

*/Green content box———————– */
.content-box-green {
margin-bottom: 30px;
overflow: hidden;
padding: 30px;
background-color: #18B888;
color: #fff;
}
*/Gold box with left border———————– */
.content-box-gold{
margin-bottom: 30px;
overflow: hidden;
padding: 30px;
background-color: #dfd09c;
border-left: 8px solid #C6AC4F;
}
*/Plum box with border———————– */
.content-box-plum {
background-color: #cb93c1;
border: 1px solid #351930;
margin-bottom: 30px;
overflow: hidden;
padding: 20px;
}

Instructions for adding content box CSS to WordPress

From your WordPress dashboard, navigate to Appearance – Editor and select your stylesheet (style.css). Scroll to the bottom of your stylesheet and paste your desired code.

Instructions for adding content box CSS to Blogger

From your Blogger dashboard, navigate to the Template screen and click Customize. Once you are inside the blogger template designer, click advanced and scroll down to Add CSS. Paste the CSS for your desired content box and then click apply to blog.

How to use content boxes within your posts

Once you’ve added the CSS for content boxes, you will have to manually add code in the post where you want the content box to appear. The content box is created with a div class. Switch to your text mode and use the following code:

<div class=”content-box-plum”>This is what you want to inside the box </div>

The information inside the quotations needs to match the CSS class .content-box-plum at the beginning of the code you pasted into your CSS.

Go design your own blog!

Hopefully this tutorial will inspire you to create your own custom content boxes and block quotes. Leave me a link once you do, I’d love to see how you use block quotes and/or content boxes to make your text stand out!

Don’t stop with this tutorial, make sure to check out all 14 tutorials and tips to help you design your blog!
Design Your Own Blog - Blog Tour
Yesterday’s Post: Designing Your Blog from Head to Footer by Anna of Anna Marie Moore Designs
Tomorrow’s Post: Marianne at Design Your Own (lovely) Blog

About Marianne and Design Your Own (lovely) Blog

Marianne has been helping women to create lives they love by giving them confidence when it comes to their own blog designs. Her goal is to provide economical DIY ways for them to get started and help them feel better about who they are and what they have to offer.

I first discovered Marianne’s blog while I was still in the pre-launch phase of this blog. Once I went live, Marianne is one of the few people who noticed my blog when it was Dreamy Ambitions (that only lasted a month). She has motivated me from the start!

I really resonate with Marinane’s purpose for the blog tour and her blog. We share the same goal: to provide DIY ways for you to get started and feel confident with your blog.

Resources:
How to use block quotes
colored content boxes

Save to Pinterest!

Reader Interactions

Comments

  1. Can I please have the code for the yellow content box that you use, I tried editing the code myself to get the exact yellow and margin but omg this coding stuff is not my cup of tea.

    Reply

  4. A helpful post. Your suggestions for creating blockquotes and content boxes are perfect. Thanks for the step by step guided procedure. Appreciate you hard work.

    Reply

  6. I like the tips you’ve provided to help jazz up my blog. I use Wix, and I’ve heard some negative things about it. I bought a year contract and I’m about half way through. Do you have any thoughts on that platform (generally speaking)? I think that I can easily do the quotes with the lines, but I’m going to try to see about the content boxes.

    Reply

    • Hi Theresa, I haven’t used WIX since 2009 so I’m not too sure how far it has come. Do you have access to edit the CSS? If so then you should be able to do all of these.

      Reply

  8. Hi, Kristie! Thanks so much for sharing this. I’m brand new to Blogger, CSS, and all that jazz. I used your block quote with top and bottom border, and my only question is this: how can I adjust either the code or other settings to remove the quotation marks entirely?

    I want to be able to attribute the quote within the blockquote area, but I don’t want the person’s name to automatically go inside of quotation marks. If I can remove the quotation marks entirely or be able to input them manually when I write the quote in my post, that would be ideal. And I have no idea how to do it 🙂

    Reply

  10. Hey Kristie – this is exactly what I have been looking for – bit nervous to make the change since I haven’t done coding yet, but I really want to add a text box.
    Just to be clear, in WordPress…I add the CSS to the VERY end of the page?

    Reply

    • The css for the code needs to go in your css file. Which you can access via Appearance > Editor > and then find your style.css file from the list on the right-hand side. Add the code at the VERY end of that page.

      Then, you’ll be able to use the text box anywhere you want in your posts. Let me know when you have it up. 🙂

      Reply

  14. Hi Kristi- Help.. I just had another company host my site meshnewsdesk.com and I’ve lost the ability to box copy/images with the quote marks. I do not know code and am not really interested in learning it….afraid I’ll screw it up. But I really want to regain that option.

    Is there likely something I should have them add with CSS? Previously I would highlight copy and had it wrap around photos, sometimes the double box turned out very interesting, stacking copy and images. There was not color or background involved, just changing the format a bit by using the quote marks.

    Reply

  15. Hi Marianne, I’ve copy pasted the code you provided into my CSS in Blogger and followed your instructions but for some reason it’s not working. In my blog post I highllighted the text and pressed the blockquote button and in the post html it’s showing the code for blockquote before and after the text. Any thoughts on what I might be doing wrong? The only thing I changed in the CSS was the color (#ADC39F). Thank you!

    Reply

  17. Hi – I love your blog and ideas. But just to let you know that you have a missing { for your Green content box code. I only discovered this once I entered the code into my CSS and updated. Now EVERYTHING that should be white has gone beige (the colour I selected for my content box) – not only on my site, but on my whole PC. I have deleted the code, restarted my computer, and even tried putting in the wrong code again but with white instead of beige to try to reset everything to white….but to no avail. I now have a beige PC!! (My site looks fine on other computers.) Help! Does anyone know what I can do?
    PS I haven’t actually launched my site yet. You are welcome to visit, but be aware….it’s not finished!

    Reply

    • Oh no! Joanna, I am so sorry for the trouble I caused you. The site looks normal and I’m not seeing any code for content boxes in your CSS. The site is probably still showing up with beige on your bworser because you need to clear your browsing history.

      As to your PC being beige though, I have no idea! That’s very odd actually.

      Editing CSS in your stylsheet on WordPress should not have any control over your computer. Are you editing it locally on an editor program like DreamWeaver?

      Reply

      • Hi Kristie

        Thanks for your reply. Yes – the site looks normal viewed from any other device. The issue is just with my laptop!
        Yes, I’m just editing locally within WP. I’ve deleted all the content box code now – will stay away from that for a while!! Clearing the browser did not help.
        Oh well – I can live with it – at least it’s beige and not bright pink! I’ll ask a programming friend for help 🙂

        Reply

  23. How cool is this…… I love it, a few weeks ago I discovered the twitter box that you can put in your post content, but I love these ideas too. Thanks for sharing…. So excited to use, tomorrow probably….. 🙂

    Reply

  24. Thank you for posting this! I get so lost when it comes to changing things and making sure I don’t mess up all the codes, so thank you for providing the information detail for detail!

    Reply

  27. Kristie, this is a lovely post! The blockquote is usually one of my favourite things to play with, you can do so much with just a little bit of code to really mix things up!

    Reply

  28. Hi Kristie

    Thanks a lot for this step by step tutorial! This is very valuable to me as I don’t know coding at all and therefore I’m very limited. I do have one question as my WP Site dose have also a CSS Stylesheet Editor next to the Editor itself. This comes with my WP-Theme and I do have there already some codes from the designer of the Theme. May I just add your codes into this CSS Stylesheet Editor instead of the Editor? Because I think if there will be a Theme update it will overwrite everything. The CSS Stylesheet Editor stays the same way.
    Thanks for your Feedback.

    P.s. I already wrote one post but couldn’t see it here. So if this is because you have to open it up, then you will see two replies from me. Please just ignore one. Thanks.

    Reply

  29. Hi Kristie

    Thank you so much for this step by step tutorial. As I don’t have any knowledge in coding and nobody I know who can help me I’m very limited in changing my design. Now you gave me some tools which I really very appreciate. I do have one question regarding adding the code. I do have WP but under Apperance I do have also a point called CSS Stylesheet Editor. (In addition to the Editor. I do have in this CSS Stylesheet already the following codes which I received from the designer of my WP-Theme:

    .entry-author, .list-authors {
    display: none !important;
    }

    .flexslider .entry-date,
    .flexslider .entry-author {
    display: none !important;
    }

    @media screen and (min-width: 1000px) {
    #site-title {
    width: 100% !important;
    }
    }

    Now, may I just add your codes in this CSS Stylesheet or do I have to go into Editor itself and change it? I think if there will be an update then it will overwrite again this codes.

    Thanks for your help.

    Reply

    • Hi Skye! I have not personally used a stylesheet editor, but it sounds like it is a perfect spot to put the CSS for your quotes and content boxes. If you want to send me an email with your URL, I can take a look at it for you!

      Reply

  30. Hi Kristie, very detailed instructions here. I have always been looking for adding some colours and style to my ‘quotes’. Shall try out those codes you gave above. Just a question, can I put these codes in the post ‘TEXT’ instead of the CSS stylesheet?

    Thanks again for this very valuable post. Thanks Marianne for sharing too 🙂

    To your Abundance, Sandy 🙂

    Reply

    • Hi, the CSS for the quotes needs to go in the stylesheet. This will make it easy for your to us in the text section of your posts. Good luck, let me know if you have any other questions.

      Reply

  36. Aww i am so honored that i was a motivator for you Kristie! And so glad we share the same goals too 🙂

    Great post, i love using both content boxes and blockquotes, though I could stand to use the latter more often. I love how you provide a couple of different code examples too to make it easy, brilliant!

    Thanks for being a part of the tour!!

    Reply

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.