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><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.
I’ve got all the money I’ll ever need, if I die by four o’clock.$
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 (
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 (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>
<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 border width (
- cell background color (
- table and cell margins and spaces (
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.
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.
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">
<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>
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.
|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:
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!
- 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