In this section
| Adding Pull Quotes to Your Blog | | Print | |
| Written by Joeprah | |
|
Have you ever wanted to make your posts stand out more? A great way to get more attention to your blog and your posts is to visually enhance them. The technique I am talking about today is "pullquotes." Pullquotes, like dropcaps, are a type of enhancement for your blog--blog plastic surgery if you will. This post is designed to make even the novice computer user inclined to not only use CSS, but to feel more comfortable interacting with it in their blog. Level of Tech Difficulty: 2 (You Need to Be Able to Read this Post, Navigate the Internet and Your Computer and Click on Things) Have you ever been reading an article and you were all like skipping ahead and reading the big quotes to see what the article offered? Those 'big quotes' within an article that are actually phrases pulled from the article are 'pullquotes.' Pullquotes basically rule. They catch your attention and I am going to share a few pullquote CSS (cascading style sheet) techniques that you can adopt into your own blog. First, let's start by looking at a paragraph utilizing four different styles of pullquotes. My Awesome Sample Paragraph This is just a bunch of gobbly gook that means virtually nothing, but because I am so awesome you will probably find yourself captivated to the point of no return. Yeah, that's right--keep reading. It's like you are under some kind of spell...a spell of awesomeness.It's like you are under some kind of spell...a spell of awesomeness. Sorry, I had to do it because I am swift and capable and well equipped with CSS acumen. Yeah, that's right, I said, "acumen." I said it because "I can." Are you scared now? It's ok to be scared. Are you scared now? It's ok to be scared. I was scared at first too... I was scared at first too--until I was born, but w/e go ahead and cry because I was all like "acumen" and you had no idea what to do. I would go run and hide because I am about to drop some big words all up in this joint and you know you don't want to be here when that happens--tigerbalm. Yep, it's one word when I use it. It is so afraid of me that it cowers together forming one incredible silly word. Sometimes I get to laughing, not because of 'tigerbalm' but because I just think it is so funny that folks don't know what edamame is. Edamame comes in two forms; in the pea pod or just the little beans themselves. Edamame is legit--I mean it. If you were like all starving and some dude came up with like a bag of edamame you know you would totally eat it, even if you don't know what edamame is. You would probably elbow the guy in the gut and then run off Edamame is legit--I mean it.with the beans and eat them in some sort of private corner where no one could see how hungry you were, but we would all know--and that's 'ok.' The way I see it, there are 3 type of edamame bean eaters; type 1 is the dude that eats edamame and is all like, "Pass the edamame sauce," next is the person/dude that has never tried them but as "Pass the edamame sauce,"soon as they do they are so into eating the edamame that they by accident bite a finger off in excitement (around 30% of the population), and finally there is the group of folks who sees all the finger biting and passing of edamame sauces and for some reason they are grossed out and refuse to try edamame--we will call them "slow." So, in conclusion if you have no acumen for edamame I won't hold it against you, I will just laugh every time I see you. The CSS Code Now here is the code for the four different styles of pullquotes I utilized. Pullquote effect #1 on the right side of the sample paragraph. .pull-right {display: block;float: right;padding: 0 10px 0 10px;margin: 2px 5px 2px 10px;width: 170px;background: url(../images/pullquote.png) top left no-repeat;font-size: 15px;line-height: 18px;text-align: right;color: #070101;border-left: 3px solid #000;}The CSS used here produces the first pullquote you see in the paragraph above. The features to notice here, which you can edit to your liking, are the background and the border. In this example I have included a background image of quotations for the pullquote. You can add whatever background image you would like from your cache of awesome quote images you have in your arsenal. Next is the border, I went with a 'left' border here which is solid black, #000, and I think it separated the pullquote nicely from the rest of the paragraph don't you? You can see you could also potentially change the font size and color for further customization. The next example is for the second and left justified pullquote to show you the difference in the CSS from the first pullquote which was right justified. .pull-left {display: block;float: left;padding: 0 10px 0 10px;margin: 2px 10px 2px 5px;width: 170px;font-size: 15px;line-height: 18px;text-align: left;color: #070101;border-left: 3px solid #000;} .pull-border-r {width: 170px;margin: 5px 15px 5px 0;padding: 5px 0;border: 3px double #000;border-width: 3px 0;font-family: Trebuchet MS;font-size: 16px;text-align: center;color: #070101;float: right;}.pull-border-l {width: 170px;margin: 5px 15px 5px 0;padding: 5px 0;border: 3px double #000;border-width: 3px 0;font-family: Trebuchet MS;font-size: 16px;text-align: center;color: #070101;float: left;} I have named each of my pullquotes differently, and to be honest, you could call them anything you like. Instead of .pull-left you could go with "ralph." Mix it up, do whatever works best for you. The main thing to notice about these two pullquotes is that the text is center aligned and that there is no background. You can change font color, size and family to conform to your blog's settings. Adding Pullquotes to your Blogger Blog:
<div class="pull-right"><span>Your quote</span></div>
Adding Pullquotes to your Word Press Blog
<span class="pull-right">This where to put your quote</span>
Adding Pullquotes to your Joomla! website
<span class="pull-right">I love Joeprah</span>
Customization:If you want something different than the Joeprah-pullqoute-styles, you can make adjustments as you see fit.
If you have any questions regarding adding "Pullquotes" to your blog feel free to ask away. Also, if you found this post useful, leave me a comment and rate this post at BuzzFuse. Thanks! 
Set as favorite
Bookmark
Email This
Hits: 844 Trackback(0)
Comments (10)
 
LOVE LOVE LOVE THIS POST. WILL Give it a try on my test blog. thanks brother.
1
July 09, 2008
Votes: +0
This would be totally cool if I weren't to A.D.D to even read through all the instructions. I need to hear it to apply it all. Any way you could do an utterz here? Or call and talk me through it??? :eek
2
July 09, 2008
Votes: +0
How totally ace! I've just added them to my blog, I will have to use them in a new post too, but they do work, and the tutorial couldn't have been any better written.
 3
July 07, 2008
Votes: +0
Terrific! Thanks for providing the schooling here. If I had anything worth quoting, I'd definitely want to set it off this way. I think that's really cool. Keep 'em coming!
4
July 05, 2008
Votes: +0
Seriously, I did not even read this post, except for the stuff you wrote in the BIG LETTERS! But, I want to tell everyone Edamame is real and JOEPRAH served it up hard-core w/ some fried chicken (which still haunts my taste buds with pleasure!) and a well selected wine (which made me quite inebriated)! Anyway, we made it here to the W-coast...didn't kill or toss any kids out the window during our 60+ hrs in the car. We were tempted to at times though! I am going to spread the love to the Earthy homies in da hood where I be chillin' fer the next few years! WORD!
5
July 05, 2008
Votes: +0
The pull quotes are cool. I had them on my old blog. I'm way unquotable on my current blog, though. lol.
6
July 05, 2008
Votes: +0
Yo Joe, :eek
Good tip but you forgot to add one crucial step. Going into the CSS of your Blog is like giving it a face lift for lack of a better term, not Blog heart, brain surgery or anything, but.. Back everything up first! I cannot stress this point enough! Back up so just incase the Blog surgery you just performed does not go the way you intended, you can restore it, no bump no foul. Just like when you upgrade versions, you should back up. I learned this the hard way not too long ago and it took three whole days (full days, no fun)to get it back to 90% and then the file names changed and my Google Webmaster Tools is reporting a bunch of 404 dead links in their indexing. I lost a ton of traffic because of this. :cry This will save the Blog surgeon hours if not days of Blog reconstruction. :upset -MileHighDad  http://www.milehighdad.com/ 7
July 04, 2008
Votes: +0
ugh! more blogging stuff to learn! LOL but i tell you, i wouldn't know about these things if i didn't read your blog
8
July 04, 2008
Votes: +0
I truly want to try this on my blogger account and have followed the steps...but no putt out boxes appear...go figure! So I have no clue what I am doing wrong!
9
July 04, 2008
Votes: +0 Write comment
|
TrackBack URI for this entry
Subscribe to this comment's feed