This tip is for those of you who have just entered the blogosphere and for all of you experienced bloggers. This will completely change the way readers experience your blog. This simple yet effective element will increase readability as well as the overall appearance of your blog.
Pullquotes have been used in magazines for decades for a variety of reasons. They make it easier to scan for relevant content, allow the writer to emphasize important information, and they add a nice design element. So why not online and in blogs?
The simple way to accomplish this is by using divs.
Simply add the following to your stylesheet:
.pullquote_left
{ width: 200px; margin: 5px 15px 5px 0; font-size: 1.8em; text-align: center; float: left; }
.pullquote_right
{ width: 200px; margin: 5px 0 5px 15px; font-size: 1.8em; text-align: center; float: right; }
Now, wherever you want to include your pullquote, you would do the following within your blog post editor:
<div class="pullquote_right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam egestas, mauris id dignissim dignissim, leo augue
rutrum lacus, id condimentum nisl elit ut nisl. Pellentesque
habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Nulla facilisi.
Once you publish your post, you’ll end up with this:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam egestas, mauris id dignissim dignissim, leo augue rutrum lacus, id condimentum nisl elit ut nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi.
Browse Timeline
Comments (1 Comment)
communicatrix added these pithy words on Dec 31 07 at 5:21 pmHey! That is awesome! I’m bookmarking this for later. Thanks for the tip.
