DIY pull quotes
Disclaimer the first: I'm a web-idiot. I'm no designer. I'm no programer. Sometimes I see things I like and in the process of trying to build my own, I break other things. Caveat emptor, yo.
I've noticed a few folks doing pull quotes in their blog posts and I think it's pretty cool. Feels kinda newspapery or something. (that's right, newspapery) I first noticed it at Genuine Curiosity, then at Church of the Customer (also Never Work Alone, but that's Dwayne again). Had to dig into their code to grok it, but it works great. If you want to win style points with pull quotes, here's what you do:
- First, you'll need to be able to edit html in your blog posts. I could explain that more, but if you don't know what I'm talking about, keep moving--nothing to see here.
- Next you'll need to copy this little code snippet:
<span class="pullquote" style="margin: 20px; padding: 5px 8px; font-weight: normal; font-size: 16pt; float: right; width: 172px; line-height: normal; font-style: normal; height: 82px; text-align: right; font-variant: normal;">Your quote goes here</span> - Next, you'll want to place the snippet in your post. Find the beginning of the paragraph where you want the pull quote to appear and paste in your code right above that.
- The last step is to customize the snippet. Using the margin, float, width, padding and other variables, you can adjust the size and placement of your pull quote. As posted here, the pull quote will show up on the right margin and the letters will be 82 pixels tall. This code will default to whatever color your blog post text appears. If you want to change the color of the pulled quote, just put in the following code (modifying what you see here, of course) after the "font-style: normal;" section:
font-color: #000000;
Pull quotes are cool, but read the disclaimers.
Disclaimer the second: this stuff may make your blog look weird in some browsers, or maybe not. You may only find out when someone yells at you. Also, if you're real smart, you can probably just define all this stuff in your stylesheet and henceforth just use something like a custom <pullquote> tag. Or maybe not (see Disclaimer the first).
Besides the technical jive, you want to make sure you stay in good form. Don't go all overkill with the pull quotes. Choose quotes that help the reader get a quick sense of the post. When you've got pull quotes in a post, readers' eyes will naturally be drawn to the quotes, and the quotes will help them decide whether this is something they want to keep reading. As always, be thoughtful when selecting content and quantity of the quotes.
That's it. Go forth and look all literary.
