Pullquotes to Break the Boredom

I have been wanting a new pullquote in the worse way, but I have been putting out fires all across the blogosphere, with no time for pullquote shopping!

...A pullquote is a nifty little item...

Well, it seems that tonight all fires have been extinguished. And surprise, surprise, I can actually make a change on my blog!

I have loved the blockquotes on Buttermilk Clouds ever since I started working with it. The lines are simple, elegant, and it sets off the text within the blockquote without distracting from the overall feel of the post. Tonight I started playing with the code to see if I could modify it enough to become a pullquote. The results are outstanding! (I get excited easily by the strangest things...when the code actually works the way I want, pullquotes, CSS...the list goes on.) So, here 'tis. As you can see, I made the font different, a bit larger, and centered.

To get your own new snazzy pullquote, open your Dashboard/ Template/ Edit HTML The following code goes in the CSS style sheet:

.pullquote {
float: right;
width: 150px;
margin: 5px 5px 5px 10px;
padding: 3px 0;
font: Verdana, sans-serif;
color: #555;
text-align: center;
font-size: 1.4em;
border-top: 3px double #ccc;
border-bottom: 3px double #ccc;
}
.pullquote p {
padding: 0;
margin: 0;
}

If you wanted a different color font, change this value. Change this value for a different size font. You can make the border solid, dotted or dashed and change the border color here. Save your template. Now, when you create a new post, put this code in the post editor window - or - a little tip: if you plan to use pullquotes often, or just don't want to go digging for code, you can automate this process. Open Dashboard/ Settings/ Formatting/ Post Template and paste this code there:

<blockquote class="pullquote"><p>...THIS IS YOUR PULLQUOTE TEXT...</p></blockquote>

<p>TYPE POST HERE...

A pullquote is a nifty little item. Why? Because, everyone reads them! And that is that. Have fun!

Painless Blog Posting

Did you know that Blogger (beta and orginal flavors) both have a built in setting that takes some of the hassle out of posting? The feature that I have in mind is found on the dashboard under Settings/ Formatting/ Post Templates. For example, on this blog, I often use a pullquote. So, I take this code:

<p class="pullquote">
<span >Title</span>
<span >"</span>
Text
<span style="font-size:large;">"</span>
</p>

and paste it in the Post Templates box. After I save the settings, the code is in place. When I write a post, I type in the Title and Text of the pullquote. Automatically, I will have a pullquote in my post. (Assuming I have the correct code in place in my CSS style sheet. See Visual Interest - Pullquotes for simple instructions.) You can then cut and paste the code to the area of the post you want it to show up.

On my other blog, Buttermilk Clouds, I always start the post with a photograph. So, in that blog's Post Template box I add this code:

<image class="centered"alt="title" src="URL" />

Post templates help users save time by pre-formatting the post editor.

All I have to do is put in the image URL and write the title of the picture.

This speeds up the posting process and makes posting a breeze. I can never remember the simpliest of codes, and I was forever looking up the code. Now, all my most used codes are in place and waiting.

On the chance I don't want a pullquote or a photo, all I do is delete the code from the post box when I create a post. A simplier process than looking for code to put in!

Visual interest - Pullquotes...a pure CSS approach

It looks like others are noticing pullquotes,offset quoting box or call out boxes. I'm an advocate of a blog being a bit different from every other blog out there. A good design makes a statement. It will draw your visitors interest, and they will spend more time on your blog...reading your great content. A pullquote is just another way to add design to your blog.

Pullquotes Highlight important quotes or draw attention to a point. Either way, it is sure to catch your reader's interest.

There was a post over at Freshblog with another interesting hack for pullquotes. In reading that post, I followed a link to Aditya's Thought That Counts and found an amazingly simple CSS approach. The look is a little different in different browsers. In Firefox the corners are rounded. In IE the corners are square. I don't know how it appears in any other browsers.

To use this method, there are two steps involved.

1. Add this code to your template between the <style> tags:

.offset {
float:left;
margin:7px;
background-color:#7C81A1;
color:white;
padding:10px;
width:100px;
-moz-border-radius:10px;}
.offset em{color:yellow;font-style:normal;display:block;font-weight:bold}
.offset span:before, .offset span:after{content: '"'}
.left {float:left;margin-left:0px !important}
.right {float:right;margin-right:0px !important}

2. Add this code in the post itself:

<div class="offset right"><em>Pullquote Title</em><span> Your most clever and witty quote.</span></div>

The best part is you can tinker with this code until it fits in the design of your blog. You can change the background color,text color, title color, font weight and position of pullquote. Thanks to Aditya for this CSS pullquote!

If you are interested in seeing another method, check out this post...Visual Interest - Pullquotes.

Visual interest - Pullquotes

Sometimes text needs a little help to make it more interesting. Graphics works miracles in this department. But often you don't have a graphic that you can use. Jazzing up your text is an excellent option. I discovered a way to liven

Mandarin Design
"The exact placement of the pullquote is up to you but you will want to make sure that you have typed in a long enough post that actually needs some pullquotes to make it more interesting."

things up a bit with something called "Pullquotes" from Mandarin Design. The colored box on the right side of this post with content is an example of a pullquote. It very much resembles a magazine layout. This method works especially well on longer posts. Here is another example that I put in a post, The Category Adventure.

Add this to your style sheet or add it to the HEAD section of your template:

.pullquote {
width: 145px;
background:#A3C586;
color:black;
float: right;
border:1px dotted #5B7444;
font-weight:bold;
line-height:140%;
padding:5px;
margin-top:10px;
margin-left:10px;
}

Then add this to your post itself:

<p class="pullquote">
<span >Mandarin Design: Easy CSS Pullquotes</span>
<span >"</span>
The exact placement of the pullquote is up to you but you will want to make sure that you have typed in a long enough post that actually needs some pullquotes to make it more interesting.
<span style="font-size:large;">"</span>
</p>

Play around with this until you find colors and fonts that you like. The color in the box can easily be changed by modifying the code in the style sheet "background:#A3C586;" to whatever color you want. I changed the background color to a green and the 'heading' font inside the pullquote to white. The possiblities are endless. There are more pullquotes at Mandarin Design if you would like to try another style.