Wednesday, July 02 2008 16:48
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.
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.
Now, Joe, this is all well and good and all, but how in God's green kingdom do I add this new feature to my blog? Well, let me show you how in the three blog versions I am familiar with.
Adding Pullquotes to your Blogger Blog:
- Go the "Dashboard" of your blog
- Click "Layout"
- Click "Edit HTML"
- In the section "/* Outer-Wrapper" of your template's code insert one or all of the "pullquote" CSS Codes from above
- Save the Changes
- Go to "Posting" tab and write a blog post as normal
- Within your new blog post find a good quote to extract and use as a pull quote and copy the text
- Click "Edit HTML" at the top of the editing box and add the following code where you want the pullquote to appear
<div class="pull-right"><span>Your quote</span></div>
- You won't be able to see the changes in the post if you click "preview"
- Before you work on your template be sure to back it up just in case your screw it up
- the "pull-right" can be exchanged with any of the pullquote styles I have showed you (i.e. "pull-left" or "pull-border-r" etc.)
- You will only be able to see that the pullquote code worked when you publish your post
Adding Pullquotes to your Word Press Blog
- Add the pullquote code to your Word Press Theme Stylesheet (you can add all of the ones I have showed you)
- Save changes
- In your posts edit the code to include the following code where you want a pullquote to appear:
<span class="pull-right">This where to put your quote</span> - the "pull-right" can be exchanged with any of the pullquote styles I have showed you (i.e. "pull-left" or "pull-border-r" etc.)
- Before you work on your template be sure to back it up just in case your screw it up
Adding Pullquotes to your Joomla! website
- In the administrator backend select "template manager" then "site templates"
- Pick the template you use for your site and choose "Edit CSS"
- Add one or all of the "pullquote" codes to your Stylesheet
- Save changes
- In your posts edit the HTML and add the code to create pullquotes in the appropriate section of your post
<span class="pull-right">I love Joeprah</span> - the "pull-right" can be exchanged with any of the pullquote styles I have showed you (i.e. "pull-left" or "pull-border-r" etc.)
- Before you work on your template be sure to back it up just in case your screw it up
Customization:
If you want something different than the Joeprah-pullqoute-styles, you can make adjustments as you see fit.
- Change the "color" in the code to whatever color works best for your blog
- Change the "font type" to whatever Font you like
- Change the size or family of the font to whatever works best for you and your articles
- Change the background color to nothing at all or to something that is more appropriate to your blog
- Have fun with it
| Why Blog? Part III Reach, Rank & Authority< Prev | Next >Adding Drop Caps to Your Blog |
|---|
Subscribe to this comment's feed
written by amy turn sharp, July 04, 2008
-
- +0
-
-
written by dadofdivas, July 04, 2008
-
- +0
-
-
written by ciara, July 04, 2008
-
- +0
-
-
written by MileHighDad, July 04, 2008
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/
-
- +0
-
-
written by Groovy Mom, July 05, 2008
-
- +0
-
-
written by E-Gangsta, July 05, 2008
-
- +0
-
-
written by jt12blk, July 06, 2008
-
- +0
-
-
written by Chica, July 07, 2008
-
- +0
-
-
