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.
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
This is a block quote with borders on top and bottom.
Henry David Thoreau
This is a block quote I created for a client. It uses images as the top and bottom border.
– 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).
border-left: 4px solid #18B888;
margin: 30px 0 30px 15px;
border-top: 1px solid #3A78AB;
border-bottom: 1px solid #3A78AB;
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;
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.
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 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.
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.
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.
border-left: 8px solid #C6AC4F;
border: 1px solid #351930;
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:
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!
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.