If you look at the Riffback I posted this morning in return for Jack Humphrey's Riff on my blog yesterday, you'll notice a translucent "Riffback" icon to the left of the quote I took from his blog. I also have a "Blog Riff" icon that I use when I initiate the Riffing.

(Note: the icons either don't show up or aren't translucent in Internet Explorer, depending on which version you use, due to lack support for the CSS I'm using.)

My reason for doing this is to draw attention to the fact that I'm Blog Riffing or giving a Riffback in order to increase the probability of people Riffing on my blog. If I gave somebody else a Riffback, I might give you one too, right!

Here's the CSS that's needed to display the icons (you could add this to your blog's stylesheet, or if people want it, I could whip up a simple WordPress plugin that would save you having to monkey with your stylesheet -- Update: the plugin is done -- you can download it here):

blockquote {
	position:relative;
	border-left:10px solid #bbb;
	background-color:#e3e3e3;
	background-image: -moz-linear-gradient(left, #ccc, #eee 20%, #eee 60%, #ccc);
	background-image: -webkit-gradient(linear, left center, right center, from(#ccc),
		color-stop(20%, #eee), color-stop(60%, #eee), to(#ccc));
	margin: 15px 30px;
	padding: 5px 12px;
	font-style:italic;
}
blockquote.blogriff:before {
	content:url(http://geckotribe.s3.amazonaws.com/banners/blog-riffers-blog-riff.png);
}
blockquote.riffback:before {
	content:url(http://geckotribe.s3.amazonaws.com/banners/blog-riffers-riffback.png);
}
blockquote.blogriff:before, blockquote.riffback:before {
	position:absolute;
	top:3px;
	left:-34px;
	opacity:0.3;
}

A few notes:

  • The only CSS that's needed for "blockquote" is "position:relative;". Without it, "position:absolute;" would place the icons relative to something other than the blockquote.
  • The rest of the CSS in the "blockquote" section creates the background gradient and left border, and italicizes the text.
  • If you don't use the same border and padding settings, you'll want to adjust "left:-34px;" to position the icons appropriately.
  • Feel free to make your own copies of the icons and host them one your site (and adjust the URLs of the images), or use mine...at least for now (if hosting the images gets too expensive for me someday, I'll let you know).
  • For you CSS experts, yes, I tried "filter:alpha(opacity=30);" to get translucency with IE, but it didn't work :-(.

Once you've got the CSS code set up, you can mark blockquotes as riffs or riffbacks by adding a "class" attribute to them, like this:

Reader Comment:
Antone Roundy said:
The plugin has been updated so that you can control positioning and opacity in a control panel rather than by editing the stylesheet. Also, it includes a widget to easily display one of the badges in your sidebar. Use the download link from the pr...
(join the conversation below)
<blockquote class="blogriff">This quote is a Blog Riff</blockquote>

<blockquote class="riffback">This quote is a Riffback</blockquote>

This doesn't work with older versions of Internet Explorer, because they don't support the ":before" pseudo-class. But it won't cause any harm.