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>
You 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="https://lorelle.wordpress.com/wp-content/uploads/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.
Most 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. 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!
A 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> </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:
- WordPress.com Blog Bling: Decorating Your WordPress.com Blog
- WordPress.com Blog Bling: Lines and Smilies
- Social Bookmarking Submit Links on WordPress Blogs
- WordPress.com Blog Bling: Fun Font Bling
Stay tuned for more blog bling!
Related Articles
- Adding Images to Your WordPress.com Blog
- CSS Unleashed – Experiments with CSS Designs
- CSS Experiments Playing With CSS Blocks
- CSS Experiments with CSS Logo Designs
- CSS Experiments with Background Images and Backgrounds
- CSS Experiments with Lists, Menus, Tables of Content, and More
- CSS Experiments – Web Fonts and Embedded Fonts
- CSS Unleashed – Experiments with Quotations, Pull-quotes and Blockquotes
- CSS Unleashed – Experiments Showcasing Your Photography
- CSS Experiments – Variations on a Theme
- CSS Experiments – How They Were Done and More
- More Website Design Mistakes
- WordPress Design Details
- Free Text Only Editors for Templates, PHP, HTML, CSS, and More
- Designing Themes for WordPressMU – Fill In All The Details
- Buttons, Bows, and Badges for Your Blog
- Designing a Rainbow – Sexy Hot Colors
- The Battle Between Image Width and Column Width
- Creating Effective, Attention-Getting Headlines and Titles
- One Year Anniversary Review: Web Design
- One Year Anniversary Review: Designing WordPress Themes
- Free Photos for Your Blog
Site Search Tags: blog bling, wordpressdotcom, wordpress.com, wordpress.com tips, wordpresscom, decorate your blog, blog design, blog design elements, wordpress blogs, wordpress themes, wordpress theme design, post design, post design elements, writing posts, blog writing, writing tips, post graphics, free photos, graphics, images, blog graphics, blog images, blog design, design elements, writing blogs, pretty blogs
Copyright Lorelle VanFossen, member of the 9Rules Network
Lorelle on WordPress 
23 Comments
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?Wow! <font> tag. I haven’t seen that for ages 😛
Does inline styles supported here in WP.com (non-upgrade)?
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?
<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.
you can’t use
style="background: #8080FF;", but you can use classes. some of the themes have a fair number of predefined styles.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.
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.
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.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?
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.
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.
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.
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.
one of your best posts Lorelle – you’re a star!
one of your best posts about styles in wordpress!
you’re the best 🙂
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.
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.
Will these codes word in blogger?
Thanks for sharing. I’m hoping they work over there.
@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.
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.
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! 🙂
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!
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.
21 Trackbacks/Pingbacks
[…] WordPress.com Blog Bling: Blockquotes and Quotes « Lorelle on WordPress (tags: wordpress tips blogging) […]
[…] 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 […]
[…] 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 […]
[…] 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 […]
[…] WordPress.com Blog Bling: Blockquotes and Quotes […]
[…] 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, […]
[…] WordPress.com Blog Bling: Blockquotes and Quotes […]
[…] WordPress.com Blog Bling: Blockquotes and Quotes […]
[…] WordPress.com Blog Bling: Blockquotes and Quotes […]
[…] Use of BlockQuotes […]
[…] 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 […]
[…] WordPress.com Blog Bling: Blockquotes and Quotes […]
[…] WordPress.com Blog Bling: Blockquotes and Quotes […]
[…] WordPress.com Blog Bling: Blockquotes and Quotes […]
[…] WordPress.com Blog Bling: Blockquotes and Quotes […]
[…] 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 […]
[…] 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 […]
[…] WordPress.com Blog Bling: Blockquotes and Quotes […]
[…] 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, […]
[…] One of the most popular was creating pull-quotes or blockquotes with HTML tables called “WordPress.com Blog Bling: Blockquotes and Quotes.” With a little lifting of the restrictions on some HTML tags and styles, I can reproduce […]
[…] Trying Lorelle’s Table idea […]