Skip navigation

WordPress.com Blog Bling: Blockquotes and Quotes

Have you had enough blog bling? No?

This part of the blog bling series covers how to add emphasis to your blockquotes and quotes in your WordPress.com blogs.

So far, the WordPress.com Blog Bling series has covered adding graphic images, lines and smilies, social bookmarking links, and font bling. The techniques covered in this section on blockquotes will feature techniques from those previous articles, so take time to review them for specifics on adding images, lines, fonts, and other bling effects.

Quoting in Blog Blockquotes

Personally, I think that if you are quoting from another blog, the quote should be fairly obvious. Your reader needs to know that these are not your words.

Besides, you thought these words were important enough to quote, so give them the credit they are due.

Most WordPress Themes come with the <blockquote> style set. For some, the design complements the Theme. Some feature blockquotes with colored backgrounds, quote graphics, and other decorative elements. For others, it simply indents the quote and maybe changes the font size.

It is natural to give credit for a quote in the article and then feature the blockquote highlighted in the <blockquote> HTML tag. However, there are times when you might want to highlight and credit the author and their site from within the blockquote.

I am not a blogging expert (although I play one on the Internet), but I do try to learn as much about blogging as I can…I’ve had some blog success, but I am not a successful blogger.

What should I have done differently? This is a list of the mistakes I’ve made along the way.
Engtech – How NOT To Be a Successful Blogger

I added the credit link in a smaller font size for emphasis. You can add italics, bold, or different colors to highlight the credit line.

<blockquote>Quote text here.
<em><a href="http://example.com/article-title/" 
title="Article title and author">Author Credit - 
Article Title</a></em></blockquote>

Blockquote exampleYou can also add graphics to your blockquotes if you want to add emphasis or highlight your blockquote, as I did with a once boring blockquote design by adding a play pause button.

Adding images to your WordPress Theme’s built-in blockquote look is as simple as adding an graphic to a post. Type in the blockquote tag (or appropriate icon button) and add the graphic wherever you want it to appear, adding an align attribute to wrap the text around the image. Then type your quote and close the blockquote tag:

<blockquote><img src="http://lorelle.files.wordpress.com/2006/11/redball.jpg" 
alt="Red bouncing ball" align="right" />Though we travel
the world over to find the beautiful, we 
must carry it with us or we find it not.

<em>Ralph Waldo Emerson</em></blockquote>

Design Your Own Blockquotes

Maybe you don’t like the blockquote design that came with your WordPress Theme, or you want to highlight some information differently. You have some options.

There are a lot of things you cannot do with a WordPress.com blog. You cannot use inline CSS styles in a WordPress.com blog. They are removed when you save your post. You can use classes in DIV and SPAN if you are using the CSS Extra option. Even then, you are extremely limited in what you can and can’t do on a WordPress.com blog. This means we may go back to some old thinking that doesn’t line up with modern techniques or web standards, but if you are into creating interesting blog bling on your blog, why not take advantage of what you can do.

You can use some font bling with or without horizontal lines to add some dramatic blockquotes to your blog.


I’ve got all the money I’ll ever need, if I die by four o’clock.$
Henny Youngman


Which is coded as:

<hr />
<font size="+3" color="blue">I've got all the money 
I'll ever need, if I die by four 
o'clock.</font>
<font size="+6" color="green">$</font>
<strong>Henny Youngman</strong>
<hr />

You can use a graphic, similar to those described in WordPress.com Blog Bling: Lines and Smilies.

Maybe you have a quote that you really want to emphasize with a graphic image. You can use the image with some font bling to call attention to it.

Sunset of tree branches in silhouette copyright protected, not for use, Copyright Brent VanFossenMost of the shadows of this life are caused by standing in one’s own sunshine.
Ralph Waldo Emerson

 

You can use other graphic elements along with font styles to add some graphic design to your manually created blockquotes, or you can use HTML tables.

Designing Blockquotes with Tables

Tables for Data Not Design – Sorta

As a rule, tables are for data not design, so keep your use of these very limited. However, when you are up against the limitations of services such as WordPress.com, you use what you can.

A table is a visual grid of information, similar to a spreadsheet. Content is put into table cells held in columns and rows.

To create a blockquote highlight with a table, you only need one column and row, turning the table into a box, as featured here. From there, it’s up to you to add a few design elements to make the table more graphically pleasing.

The format I use here on my WordPress.com blog is:

<table align="right" width="250" border="1" bgcolor="navy" 
cellpadding="10" cellspacing="5">
<tr><td bgcolor="#ADDEFF">
<font size="-1"><strong>Title Here</strong>

Text here.
</font></td></tr></table>

This is added via the HTML Code editor option or non-Rich Text Editor.

You can change the positioning from left to right, allowing the text to float around the table. You can change the table width, border width, background color (bgcolor), margins (cellpadding and cellspacing), and other elements on the border and background of the table. I’ve made the font size a little smaller than the regular font on the blog to make it stand out from the font crowd and fit better into the box.

Gaston, Oregon
Gaston , Oregon (population 620), is located in northwest Oregon, about an hour west of Portland. Gaston is a farming and agricultural community in Washington County which also houses many wineries and tree farms. Many who live in the area also work for the nearby new Silicon Valley where Intel and other software and engineering firms have factories and offices.

Gaston features two taverns, one grocery store, an elementary school through high school system, a brand new post office, one feed and farm store, a small library, and no gas station. The nearest gas station is 13 miles away.

I like using a table like this to create a “sidebar”, a term left over from the publishing world. It is a box of information that is related to the post content, but stands on its own. I use it to call attention to things you need to know or should know about the subject matter.

You can use this informational sidebar “boxes” to feature information on a movie you are reviewing, or book you’re reading and writing about.

Writing about a location or place of business? Then use this to provide information such as the address, contact information, hours, and other details one might want to know about it.

If you have information you need your readers to know, these are great ways of highlighting it.

Table Blockquote Examples

Besides just highlighting information on your post, you can use tables to create a variety of interesting blockquotes.

A table consists of rows and columns. The very basic layout for a table is:

<table>
<tr><td>cell/column</td></tr>
</table>

The <tr> represents the table row. The <td> represents the table cell which lines up as a column, if you think of a table as a spreadsheet grid.

To add two rows and two columns, which adds up to four cells, in a table, it would look like this:

<table>
<tr><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td></tr>
</table>

To style a table in WordPress.com, you can add the following:

  • table width (<table width="300px">)
  • table border width (<table border="2">)
  • cell background color (<td bgcolor="red">)
  • table and cell margins and spaces (<table cellpadding="5"> and <table cellspacing="10">)

Using different widths and colors, along with some blog bling, you can create a wide range of interesting blockquote effects with tables.

I recommend that you pick a basic format and save a copy in a text editor file so you can copy and change the placeholder text every time you want to use it. This saves typing the code over each time.

His writing is not about something. It is the thing itself.

Samuel Beckett

 

In the above example, I used the following table styles:


<table width="350" border="5" bgcolor="red" cellpadding="10" cellspacing="5"><tr><td bgcolor="pink"><font size="+2">His writing is not about something. It is the thing itself.
<b>Samuel Beckett</b></font></td></tr></table>


You can add graphics and images to your blockquote tables.

If the world were merely seductive, that would be easy. If it were merely challenging, that would be no problem. But I arise in the morning torn between a desire to improve the world, and a desire to enjoy the world. This makes it hard to plan the day.globe spinning
E. B. White

The table code for this blockquote design is:


<table width="350" border="5" bgcolor="#66CCFF" cellpadding="10" cellspacing="15">
<tr><td>
<font size="+1">If the world were merely seductive, that would be easy. If it were merely challenging, that would be no problem. But I arise in the morning torn between a desire to improve the world, and a desire to enjoy the world. This makes it hard to plan the day.<img src="/files/earth.gif" align="right" alt="globe spinning" />
<em>E. B. White</em></font></td></tr>
</table>


You can change the colors of different rows, columns, and cells to create different effects.

My interest is in the future
because I am going to spend
the rest of my life there.
Charles F. Kettering

 

The table code and styles for the above blockquote, which puts a separate line of the quote in each row, is:


<table width="450" border="3" bgcolor="#730099" cellpadding="15" cellspacing="5">
<tr><td bgcolor="#990073"><font size="+2" color="white">My interest is in the future</font></td></tr>
<tr><td bgcolor="#A100D6"><font size="+2" color="white">because I am going to spend</font></td></tr>
<tr><td bgcolor="#C414FF"><font size="+2" color="white">the rest of my life there.</font></td></tr>
<tr><td bgcolor="#E666FF"><font size="+1" color="white">Charles F. Kettering</font></td></tr></table>


Here are some more examples of how you can use tables to highlight different blockquotes. To see how I coded them, in your browser menu, choose View > Source or View > Page Source:

That’s not writing, that’s typing.

Truman Capote, of Jack Kerouac

 

There is a weird power in a spoken word…And a word carries far – very far – deals destruction through time as the bullets go flying though space.

Joseph Conrad, “Lord Jim”

 

Argue for your limitations, and sure enough, they’re yours.

Richard Bach, from Illusions

 

It’s better to lead with your dreams, than to be pushed by your problems
John T. Dornbach

 

Sometimes it takes great effort to discover that life was meant to be effortless.

Rusty Berkus, Appearances

 

A man is the sum of his actions, of what he has done, of what he can do, nothing else.

Andre Malraux

 

A new idea is delicate. It can be killed by a sneer or a yawn; it can be stabbed to death by a joke or worried to death by a frown on the right person’s brow.

Charles Brower

The code for the last quote box table is:

<table width="350" border="1" bgcolor="#0000FF" cellpadding="5" cellspacing="5">
<tr><td bgcolor="#7A7AFF" colspan="4"></td></tr>
<tr>
<td bgcolor="#9494FF"></td>
<td bgcolor="#3399FF"></td>
<td bgcolor="#99CCFF"></td>
<td bgcolor="#8080FF">
<font color="#004D99" size="+2">A new idea is 
delicate. It can be killed by a sneer or a yawn; 
it can be stabbed to death by a joke or worried 
to death by a frown on the right person's brow.</font>
<font size="+1" color="blue">Charles 
Brower</font></td></tr>
<tr><td bgcolor="#80BFFF" colspan="4"></td></tr>
</table>

Use your imagination, and a little HTML editing skill, to create your own unique blockquotes or text highlighters.

And if you come up with a cool looking blockquote table design, let us know!

ball203a.gifA Whitespace Trick for WordPress.com Blogs

When using a lot of font bling for blockquotes, pull-quotes, or other highlights with graphic images, it can crowd things. You may want to add some whitespace around your blog’s bling to increase the spacing and line things up better.

To create a paragraph break and increase the spacing between paragraphs or design elements, add a paragraph HTML tag with a non-breaking space code:


<p>&nbsp;</p>


This puts a space between the elements. Simple and easy.

There’s More WordPress.com Blog Bling to Come!

So far this series on WordPress.com Blog Bling has covered:

Stay tuned for more blog bling!

Related Articles


Site Search Tags: , , , , , , , , , , , , , , , , , , , , , , , , ,
Copyright Lorelle VanFossen, member of the 9Rules Network

Member of the 9Rules Blogging Network

23 Comments

  1. Posted February 2, 2007 at 3:16 am | Permalink

    tables?
    c’mon. i get that tables are free, where doing the same thing in CSS is $15 bucks, but it’s still the worst semantic suggestion i’ve heard in a long time.

    and where’s the mention of cite?

  2. Posted February 2, 2007 at 4:06 am | Permalink

    Wow! <font> tag. I haven’t seen that for ages :P

    Does inline styles supported here in WP.com (non-upgrade)?

  3. Posted February 2, 2007 at 4:21 am | Permalink

    I was going to say that this is the worst bit of advice I seen in years, but then realised that wp.com charges people to use css.

    You can use inline styles though right?

  4. Posted February 2, 2007 at 4:25 am | Permalink

    <font> is not valid xhtml that most themes comes in. And as adam says <cite> is the correct code for giving credit, not <em>. <em> is the same as the good old underlined text.

    And as we don’t use <table> for any layout feature, wouldn’t it be better to do a <div> to get the same result.

  5. Posted February 2, 2007 at 4:42 am | Permalink

    you can’t use style="background: #8080FF;", but you can use classes. some of the themes have a fair number of predefined styles.

  6. Posted February 2, 2007 at 6:26 am | Permalink

    Inline styles are not allowed in WordPress.com blogs. Only old fashioned HTML. I cried for ages when this was taken away. I’m a long proponent of NO TABLES.

    Then I learned to do what I could with what was available. Work the best you can within your limitations and you can still come up with something creative.

    CITE is styled per the WordPress Theme. If it isn’t styled, then it is the default look for the cite tag. If you don’t like it, you use what you can.

    When the CSS Extra Option came out, many took advantage of what they saw was a cheap option. Unfortunately, a lot more people complained because in many countries, USD$15 is a lot of money. The whole theme of this series is what to do when you can’t afford the CSS Extra Option.

    You use old techniques that still work and a lot of creativity.

  7. Posted February 2, 2007 at 8:15 am | Permalink

    instead of using deprecated tags and properties, you can use built in classes.
    fauna, for example:

    <div class="column-right">
    <hr/>
    <blockquote cite="some old fairy tale"><p>once upon a time, in a land far far away</p></blockquote>
    <p><cite>hans christian andersen</cite><br/>
    </p><hr/>
    </div>

    cutline has blockquote classes defined, and chris wrote an explanation on the theme blog.

    many of these special in-post classes are being looked at by the wordpress devs, so i think this is the wrong time to be suggesting such anti-semantic markup.

  8. Posted February 2, 2007 at 8:17 am | Permalink

    forgot to mention:

    the blockquote tag is mean to have a p inside of it. it’s part of the validator, but not a documented part of the spec (designbyfire was complaining about that a few months ago). wordpress automatically nests the <p> tag.

  9. Posted February 2, 2007 at 9:33 am | Permalink

    Yeah, if you’re going to explain blockquotes for a semantic field, you should really make sure it’s semantically correct all the way through.

    The blockquote tag can only contain block level elements, not inline elements. So <blockquote>Stuff</blockquote> is invalid. You have to put a <p> around the text. Or some other block level element. <em> is also invalid inside the blockquote, as it’s an inline element as well. The <em> would have to be inside something else, like a <p>.

    The “cite” attribute of blockquote should be a URI specifying the location of the quote. Unlike adam says above, it cannot be “some old fairy tale”, it must be a valid URI reference.

    If you’re going to markup an author, the <cite> tag is obviously the way to go. Instead of adding emphasis with <em>, add it by giving cite a style you want in your CSS.

    And resorting to tables, well, that’s just bad karma. You can style the heck out of blockquotes. As much, if not more, than you can tables. Maybe not on WordPress.com, but still, why resort to ancient methods when newer ones are cleaner and nicer?

  10. Posted February 2, 2007 at 11:34 am | Permalink

    Inline styles are not allowed in WordPress.com blogs. Only old fashioned HTML. I cried for ages when this was taken away. I’m a long proponent of NO TABLES.

    Then I learned to do what I could with what was available. Work the best you can within your limitations and you can still come up with something creative.

    CITE is styled per the WordPress Theme. If it isn’t styled, then it is the default look for the cite tag. If you don’t like it, you use what you can.

    When the CSS Extra Option came out, many took advantage of what they saw was a cheap option. Unfortunately, a lot more people complained because in many countries, USD$15 is a lot of money. The whole theme of this series is what to do when you can’t afford the CSS Extra Option.

    You use old techniques that still work and a lot of creativity.

    It’s quite a shame that WordPress.com doesn’t allow this. If you think about it, one of the aims of WP was to be XHTML-compliant, and this drawback (specifically refering to the use of $lt;font%gt; insteadd of inline styles) poses two problems:

    A blog’s HTML will not validate as XHTML compliant.
    Some browsers do strange things with tables, which will ruin the appearance for quite a few people.

    Please keep this in mind in the future.

  11. Posted February 2, 2007 at 12:04 pm | Permalink

    If you can find a way to make interesting and fun blockquotes in WordPress.com WITHOUT CSS, go for it. Call it what you will, but WordPress.com strips all inline CSS styles. If it were possible, I would fill my WordPress.com blog with 100% CSS styled everything. It’s not.

    When you are stuck on a desert island, it’s amazing how creative you can be working only with the tools you have at hand.

  12. Posted February 2, 2007 at 1:28 pm | Permalink

    don’t pretend that font tags and images somehow only work in tables and not in blockquotes. or that using <em>’s is somehow automattic’s fault for making the upgrade too expensive. that sounds far too passive-aggressive.

    ugly formatting like this is not a feature of wp.com. this stuff fits in on myspace, in their table-based layouts. if it really burns you, suggest that people head over to livejournal, and get CSS control by running ads on their blogs.

    many of the themes here have formats for using floats, and using colors that match the theme. instead of being defensive, you should dig into how to use those elements to your advantage.

  13. Posted February 2, 2007 at 2:01 pm | Permalink

    I’m not being defensive, accusing nor pretending. I’m challenging people to come up with their own solution without using CSS. My offerings are only one solution.

  14. Posted February 4, 2007 at 7:51 pm | Permalink

    one of your best posts Lorelle – you’re a star!

  15. Posted June 17, 2007 at 1:23 pm | Permalink

    one of your best posts about styles in wordpress!
    you’re the best :)

  16. Posted August 8, 2007 at 7:06 am | Permalink

    Can I just say, I’ve only recently come across this site as I’m a new blogger and just wanted to see how to be creative without needing to know too much technical knowledge. Lorelle has given me such an insight into using what you can to make things easy. The templates given don’t allow the most of us to make our blogs look personal, so we have use what we can to add our own creativity. I don’t particularly care whether one tag is not used as much now as another, I just want to know how to get my blog looking good. Anyone know how to get rid of annoying automatic borders that come around insert images? Another problem with my default template.

  17. Posted August 8, 2007 at 7:27 am | Permalink

    The techniques involved in this series of articles should only be used by WordPress.com bloggers, unless full WordPress users have access to their stylesheets, then they can set the styles within the stylesheet to create these effects. And for the most part, these are creative effects for the post content area, not the whole blog. There are tons of articles on the WordPress Lessons on the WordPress Codex that will help you, step-by-step, to create the custom look you want for your blog.

    With the more than 1600 WordPress Themes available, you can choose one that matches your style without looking like everyone else.

    As for the image border thing, see Adding or Removing Link Borders Around Images.

  18. Posted November 25, 2007 at 9:38 am | Permalink

    Will these codes word in blogger?

    Thanks for sharing. I’m hoping they work over there.

  19. Posted November 25, 2007 at 10:57 am | Permalink

    @SolShine7:

    These will work ANYWHERE as they are blog software and program independent. They work with HTML, which is every web page’s underlying code structure.

  20. Posted March 15, 2009 at 4:19 pm | Permalink

    I know this topic is a year old, but, wow, alot of harsh, dogmatic comments here. She made the point that this will work universally on any html platform, and was specific that it was designed for WordPress.com users. Not sure if the CSS restrictions are still in place in 2009 or not, but layout tags have been evolving for nearly 15 years, and alot of people learn certain layout techniques that were the standard at a given time. So grilling someone over lack of inline CSS (especially when she states she PREFERS to use inline CSS, but is restricted) is going really overboard.

    Old school tables may be depreciated for layout, but they are so much more backward compatible, even if they are a pain to work with and not intended for layout. But people still do use them and they have their place.

    I should whip up my Netscape Navigator 2.0 and render some of these newer pages LOL.

    Thanks for the helpful article Lorelle.

  21. Alison
    Posted August 22, 2009 at 8:39 pm | Permalink

    How do you add space between lines in the table with the Truman Capote quote (heavy black outline, grey/silver inside)? When I try to add more than a few lines of text, it looks very squished together horizontally. Sorry but I’m just learning html. Thanks in advance for your help! :)

  22. Alison
    Posted August 26, 2009 at 4:43 pm | Permalink

    I looked at the source page for this article to get the code but i’m really new to html. i figured out how to space the words out by using /div etc. can you tell me where i would put code to center a table in my wordpress article? i’ve tried a million things and nothing has worked out. what would the code be and where do i put it? thanks so much for your help!

    • Posted August 28, 2009 at 8:04 pm | Permalink

      If you are using WordPress.com, you have to put in the old fashioned code for align=”center”. If you are using the full version of WordPress, please use the stylesheet. There are tons of references within these articles in this series to help you learn HTML and CSS in more detail.


19 Trackbacks/Pingbacks

  1. [...] WordPress.com Blog Bling: Blockquotes and Quotes « Lorelle on WordPress (tags: wordpress tips blogging) [...]

  2. [...] adding photographs and graphics, lines and smilies, social bookmarking links, fun with fonts, blockquotes and quotes, blogroll and sidebar bling, creating signatures and writing code in posts, adding video and [...]

  3. [...] has put together one of the best posts I’ve ever seen on blockquotes that goes beyond the basics and helps you customize this useful formatting [...]

  4. [...] has put together one of the best posts I’ve ever seen on blockquotes that goes beyond the basics and helps you customize this useful formatting [...]

  5. [...] WordPress.com Blog Bling: Blockquotes and Quotes [...]

  6. [...] the external CSS solution above should work.There are other options that don’t use CSS, as outlined by Lorelle VanFossen, but be warned: these techniques are considered out of date by most people, [...]

  7. [...] WordPress.com Blog Bling: Blockquotes and Quotes [...]

  8. [...] WordPress.com Blog Bling: Blockquotes and Quotes [...]

  9. [...] WordPress.com Blog Bling: Blockquotes and Quotes [...]

  10. [...] Use of BlockQuotes [...]

  11. [...] blockquote tag is specifically for quoting, not for design elements. There are other design elements for creating headings, indentions, lists, or pull-quotes. Use the appropriate HTML tags for the [...]

  12. […] WordPress.com Blog Bling: Blockquotes and Quotes […]

  13. […] WordPress.com Blog Bling: Blockquotes and Quotes […]

  14. […] WordPress.com Blog Bling: Blockquotes and Quotes […]

  15. […] WordPress.com Blog Bling: Blockquotes and Quotes […]

  16. […] we? I’ve shown you how to add graphics and photographs and video, lines and smilies, fonts, blockquotes, social bookmark links, blogroll bling and sidebar widgets, and…have I forgotten […]

  17. […] bling to your WordPress.com blog in the form of graphics and photographs, lines and smilies, fonts, blockquotes, social bookmark links. Now it’s time to add some blog bling to your WordPress.com blogroll […]

  18. […] WordPress.com Blog Bling: Blockquotes and Quotes […]

  19. […] bling your WordPress.com blog in the form of graphics and photographs, lines and smilies, fonts, blockquotes, social bookmark links, blogroll bling and sidebar widgets, podcasts, audio, and video, signatures, […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,975 other followers

%d bloggers like this: