Tuesday, August 5, 2008 | 22 responses | Filed Under: Daily & Dude Tutorials & Dude, How I Did That: Design & Photabulous
Hey Judith,
Can you tell me how to add a signature to my blog posts like you have on yours?
Thanks!
[Some Blogging Mama Somewhere]
Sure thing, [Some Blogging Mama].
There are actually a couple of ways to do this… Wait. I take that back. There are probably lots of ways to do this. But as this is my blog and my tutorial, we're gonna do it the way that I do.
Well, because that's the way that I do it.
Confused, yet?
No? Give it a minute, you'll get there. I promise.
Okay, to add a signature that automatically posts to the end of your blog posts like mine below, you'll need two things:
- A Blog
- A Signature Graphic
If you don't have number one, then you most likely live in a cave somewhere and could care less about pretty little signatures or anything else that I have to say in this post. I'll be adding some naked pictures tomorrow that are sure to interest even the most Neanderthal-ish being, however, so feel free to come back then.
Already have a blog? Good for you, moving on:
To create your signature, you can either pay a little visit to My Live Signature or open up your favorite handy dandy graphics program and make one of your own.
I, of course, opt for the making of your own bit… Especially if you happen to be a font whore like myself. On the other hand, if you have no idea what a "font whore" is, My Live Signature has lots of fun options including some great font choices and varying slants. Simply follow along with the easy to use signature generator and download your finished signature at the end.
Either way, be sure to choose a size and style that "fit" well with your template and voice.
(In other words, ix-nay on anything wider than your posting column and leave the fun little fonts with heart dotted 'i's for the more cheerful of the bunch, alrighty?)
Once you've got your signature created, you'll need to upload it to your blog's media manager or whatever it is that you use for image hosting, OR, if you used My Live Signature, simply click on the "Want to use this signature?" link that appears below your finished signature and allow them to generate the html for you.
Now let's add it to your blog:
To add it to a hosted Wordpress installation (not a wordpress.com blog), we're going to have make a little adjustment in your theme's files:
- Click on Design > Theme Editor
- Now look on over in the column on the right and open the file that is called something like "Single Post (single.php)". If you don't have a single.php, then open up your "Main Index Template (index.php)" instead.
- Find the line that looks something like this:
<?php the_content(); ?>OR this
<?php the_content('<br /> <p class="serif">Read the rest of this entry »</p> <p>'); ?>Basically, whatever says "the_content" followed by whatever it is that your blog says for the read more option.
- Add your image code (or the code that My Live Signature provided) just after that so that you now have something that looks like this:
<?php the_content(); ?><img style="border: none;" src="http://theonlythingiknow.com/images/sig.gif" > - Update the file, and you should be good to go!
For Blogger:
*Edited 8/15: If you were having problems getting this to work via copying and pasting the code below to your blogger account, it wasn't because you were doing anything wrong… It's because I'm secretly a blond. Seriously. You should be able to C&P now with no problems!
- From your dashboard, go to Layout > Edit HTML
- Check that little box next to "Expand Widget Templates"
- Find the line that looks like:
<div class='post-footer'> - Now paste your image code right above that. It should look something like this (be sure not to forget the trailing slash (/) after the image address):
<img style="border: none !important;" src="http://theonlythingiknow.com/images/sig.gif" /><br/><div class='post-footer'> - Preview & Save.
And that's it! If I've explained it right (which is probably like a 1 in 3 chance, I figure), then you should now have a signature that automatically posts whenever you do.
If I didn't explain it right, well, then, at least you got to see a nifty little post full of pretty code, right?
What was that? You don't find code pretty? Oh…
Well be sure to come back tomorrow for a naked picture.
It's Wordless Wednesday after all.
Have a similar question that I may be able to help you with? Contact me.
August 5, 2008
This is very cool. Thanks for sharing your tips. Quick question, as I am not a “font whore” and I am in fact an idiot when it comes to these things, I used live signature. Do you know if there is anyway to make it so that there isn't a box around my signiture?
[you can reply directly to this comment]
August 5th, 2008
It's probably the link adding the border. I'm not sure what their policies are, but a quick fix would be to remove the link back to their site from the code. :)
[you can reply directly to this comment]
August 5, 2008
Thanks I will try that.
[you can reply directly to this comment]
August 5, 2008
LOL I like fonts too…mmm fonts…
[you can reply directly to this comment]
August 5, 2008
I'm a total font whore. Great tutorial.
[you can reply directly to this comment]
August 6, 2008
It worked! I did it! I love it!! You rock!
(now to remove the box-y thing)
[you can reply directly to this comment]
August 7th, 2008
Look above at the blogger example… See how the img part of the code has a style attribute? (style="border none !important;) Add that to your image line.
[you can reply directly to this comment]
August 6, 2008
as a fellow font whore, you will enjoy the video on my post today.
seriously.
[you can reply directly to this comment]
August 6, 2008
Hey, thanks. What do ya wanna bet it doesn't work for me? Are you sure you wanna open up the whole contact me with similar questions business? I might be contacting you A LOT!
[you can reply directly to this comment]
August 6, 2008
You're my new best friend.
[you can reply directly to this comment]
August 7, 2008
So I tried this, used the link to the signature site, did everything you said…still didn't work. Something wasn't formed correctly in the code. owell, I'll try again later.
[you can reply directly to this comment]
August 7th, 2008
For Blogger, it is absolutely imperative that your image tag as well as breaks end with a '/>' rather than just a '>'.
[you can reply directly to this comment]
August 7th, 2008
umm…I did that. I think it's just me, nothing ever works right. Oh to be as savvy as you. *sigh*
[you can reply directly to this comment]
August 15th, 2008
Hey honey! Come baaack… thanks to cb, I figured out the problem (if you were copying and pasting that is)!
[you can reply directly to this comment]
August 15th, 2008
I didn't copy and paste, was just going by what your picture looked like. Well, sort of anyway. But since you fixed it, I can make it work?? I'll will try again! Thanks love for all the help.
[you can reply directly to this comment]
August 7, 2008
David? Where did you go? You were here just a minute ago…
The signature thing, maybe even I could do that. But afraid to try…
[you can reply directly to this comment]
August 15, 2008
Thanks for posting this!
Just wanted to let you know that the double quotes should be single quotes in the Blogger example. Just a heads up!
[you can reply directly to this comment]
August 15th, 2008
You're perfectly right, cb! Although Blogger should automatically change them to single quotes for you once you save your changes.
(Thank Goodness, are I'd be spending forever correcting myself. LOL)
[you can reply directly to this comment]
August 15th, 2008
AH! I was getting an error when I hit preview. I guess it only changes to single quotes when you hit save.
Thanks again!!!!
[you can reply directly to this comment]
August 15th, 2008
Hey cb! I thought it odd that you were getting an error at all… But I think what the problem is is that you're copying and pasting the code above— Be sure to just type it in rather than c&p (or just replace the quote marks with real ones), the code doesn't carry over from here well for some reason!
[you can reply directly to this comment]
August 15th, 2008
Nevermind, I fixed it. You may copy and paste until your heart is content. :)
[you can reply directly to this comment]
October 1, 2008
Hi all!
Nice
1
G'night
[you can reply directly to this comment]