Blogger Beta - Post Signature
I felt like something fun today. I wanted to pretty up my posts. Shane asked me if putting a signature in your post is possible. Well, it is, and here is one way of doing it!
You must first have a signature that you want to have at the bottom of your post. This signature will be in the form of an image. To get that image, you can look online for sites that help create signagtures, or you can make your own using GIMP as I did. If you need help making a signature, read some of my posts on design and graphics. After you have your signature, upload it to your web host...I use Ripway.
Open your Dashboard/ Settings/ Formatting/ Post Template. Put this code in the Post Template box:
<p><image class="centered"alt="post signature" src="SIGNATURE URL" /></p>You can see my beautiful results below!
Labels:
Blogger Beta,
Design,
Graphics,
Hacks,
Posts
60 Comments:
I made my sig for http://shellysbooks.blogspot.com by actually signing my nickname, Shelly, scanning it, and making a gif (or maybe a jpg, I don't recall) in Photoshop. Then I uploaded to my website and put a simple link to it in the post template.
I have graphics in a number of my post templates and use the simple img src="url" code for all of them.
@shelly, I love your sig! It is so cute!!!
I have never been to your blog before but it's driving me nuts!! I love your signature and have spent the last three hours trying to figure it out!
I know all the basics, but I don't have GIMP, and the one signature site I found, saved it in a goofy extension (.vtl) that Photobucket or Ridway doesn't recognize!! I have tried Paint and Notepad and I am now about to pull out my hair!
I do have Photoshop, but I don't have a clue as to how to use it!
I sure would appreciate any help you could provide!
Sissy
@sissy, GIMP is free and fairly easy to use. I will try and do a tutorial post on making a signature with GIMP when I get time. So, hang in there!
thank you, Annie! I did get the GIMP and did create a sig. with Photoshop, but cannot find a site that will host it!!
I will keep checking back! Do you mind if I put a link back to your facinating blog on mine?
@sissy, try Ripway. That is what I use for both of my blogs. I can't wait to see your sig!
@sissy, oh, I almost forgot...a link back would be appreciated! Thanks!!!
Annie; When you have agg and sub blog, how can you bring both the comments together in one page.
The pullquotes work fine annie.
@priya, So happy the pullquotes are working for you now!
Where do you see agg and sub blog? I guess I don't understand what you want to do.
My typo error.
If you have a main blog and an another sub blog, how can you get the recent comments for both together in one page.
Hi there,
I'm new here - and new to blogging/blogger/HTML etc. I just started making my blog for when i go away in september. Your site has been VERY useful so far. I tried your signature trick, but when I publish my post it comes in a tiny box that was not there on the preview. how do i get rid of this box? advice would be much appreciated - until then i will muck around
@priya, I don't know if there is a way to merge the two, but I think you can certainly add another script to each template (right under the script already in the templte):
<br/><script language="javascript">
var numcomments = 10;
var numchars = 100;
</script>
<script src="http://yourblog.blogspot.com/feeds/comments/default?
alt=json-in-script&callback=commentDisplay"></script>
And put the other URL in it. I haven't tested it, but I think you'll end up with two separate recent comments. If that is what happens, you may want to reduce the number of comments on each blog to 5.
Let me know if it works.
@nick, well, the good news is that in Firefox, it looks great. The bad news is I see the blue box in IE. So, I think if you add this to your CSS style sheet it will remove the border from the images:
img
{ border-style: none;
}
The CSS style sheet is in your template between the <head>and</head> tags. Place that code in the style sheet.
Annie,
I used both my feed together and it works fine. Looks recent comments are not updated in most of the blogs. Looks like its blogger problem. I am not sure.
@priya, I was hoping that would work for you. And I noticed the comments are messed up too. I'm guessing it is a blogger thing and it will be fixed eventually.
i want to know if some one can make different meta tag for each post like in WP? pls help
@gosolid, sorry but I don't know. Beyond my coding powers!
YaY!!! I finally got my signature on my posts!
I was brazen enough to rip-off yours, but nobody really reads my blog except some little old ladies in Canada, so I hope you won't be mad!
I check in often, trying to improve my blog. I understand I need to change my template to get rid of those really small posting areas, maybe later!!
You are awesome, Annie!!
@sissy, I love it that you ripped mine off and then wrote and told me!! You go girl! It looks great.
Hi Annie!
thanks for this beautiful feature. i just created mine. also added a link back.
see it at
sanyukta28.blogspot.com
also, is there any way to make the sig appear in my previous posts as well?
and oh, BloggerUniversity rocks!
:)
@sanyukta, Your sig is lovely! Good work. Thanks for the link!
@sanyukta, oh, I almost forgot to answer your question. The only way that I know of putting the sig in past posts is to open each post and edit it :-(
Not saying there is a way, but I just haven't discovered it yet.
Hey Annie, I just saw somebody asking how to add post sig to previous posts. There might be a way....
We could add some padding to the bottom of the post and set the image as background, to fit nicely in that padding....
OR we could add it to the post-footer div element. I am just thinking up stuff....it might be harder, since most of the post and post footer elements will have some sort of background.
However, you could try it :-)
So what about if there are multiple team members... can you create your own signature for each team member and how does that work??
@sarah, Yes, 2 ways to do it.
1. Put a post signature code for each member in the Post Template box and then each member deletes all but their signature code when posting.
2. Each member adds their own signature code to the post when posting.
makes perfect sense, thank you!
I know this was already addressed, but first of all, I am using the newer blogger. I also am using IE. My first problem is that I scanned my signature in and then put the code in my post settings. However, the picture shows up huge so I have to resize it every time. Is there a way to not have to that?
Secondly, I have a stupid box around my signature. I put the code in between the head sections where you enter the HTML stuff, like you suggested doing to another poster. However, the box still shows up. Take a look at my blog and see what I mean. It's obnoxious!
Any help would be greatly appreciated...and I do already have a link back to ya!
@michelle, your image is 380 x 256 px. I would use irfanview to resize it...saving the ratio aspect.
For the border you need to find this code in your template:
.post img { padding: 6px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; }
And change it to:
.post img { padding: 6px; border:0px;
Thank you! I finally got it to work! I did however have to change the border on all sides. My code had specifics for each side- Left, bottom, top, and right so I had to change them all to 0. Anyway, it looks awesome now! Also, I used to have Irfanview on my computer and my hubby deleted it. Anyway, I downloaded it and it worked great. Thank you for all your help. You rock!
I doubt my question will be answered any time soon, but I have done everything for my sig to show up, but instead of showing it, 'Read more' pops up at the bottom of every post. What's the deal?
Sin
I'm glad you figured it out. I'm knee deep in packing boxes!
hi annie,
i tried the instructions on how to post the signature on the post template area. but it doesn't show in any browser. i'm using the classic blogger template by the way. any idea or suggestions? thanks
and one more (sorry not too familiar with gimp :) ), is there any way to make the background of the signature transparent? so it would blend with the page template background? thank you
Hi Annie
Your blog has been a great inspiration and I've learned a lot from it. Thank u so much.
I just created an official seal for my blog and was trying change the settings so that the seal would appear on the footer of each post.
For this, I used the html code that u had posted for adding a Post Signature. Instead of the signature URL, I pasted the seal URL. It does not work.
Any pointers as to where I could be going wrong ?
Thanks for this tip! Your explanation was the BEST of all the searches I did. I'll be back to learn more from you.
Elisa
awesome!!! I will try it as soon as I decided what to put on my signature. :)
Hi Annie,
Found your blog today on a search for how to add my signature. Thank you so much for your instructions on how to do this. I now have a signature - not fancy, but it is my own, scanned in signature! As it's an image, my blogger template put lines around it as with all the others. I read in your comments about someone else having a line, and your reply. I tried what you suggested, but couldn't find where exactly to paste in the code you suggested - also, I have Firefox, and the frame was showing. Anyway . . . because of your advice, I had more of an idea of what I was looking for in the CSS code, and changed some values to 0 for what appeared to be frames. So my signature is no longer in a frame, and nor are any of the other images, including my header - which is what I've wanted all along - Yay!! So thank you for that too - a big help to this HTML ignoramus!
Off to subscribe now, and will be back to study more when I have time later.
WAY easier than GIMP (I was an utter failure in GIMP, it was so sad), is mylivesignature.com to create a "signature". Its not your own, but you have so many "handwritings" to choose from, you don't have to download any software, and it works like a charm in blogger (hosted in googlepages).
It did end up with a light gray box around it, but Annie's entry on 4/4/07 in this comments section tells you how to deal with it.
Thanks, Annie for all of the tips for making our blogs fancy!
Annie! Thanks for the great tip. Now, if I could only figure out how to take that ugly little black outline off! Thanks again! Paty
@Paty, read this How to remove dotted border from links in Firefox.
Thanks annie! you are awesome!
Annie, I like this, and i wrote about this in my blog, and also my similar way to do this. So I make 2 point/ 2 ways to do this. One of them is yours. I did use your credits for the first way (yours). The reason is.. I translated it into my language, so its easier for my reader to understand. I gave them link to this blog too.
I hope you dont mind., But if you does mind, can you e-mail me. I'll make a correction for that. Hope you read this eventually.
Thank You.
I wrote it here
@firdaus, I don't mind at all! Thanks.
I followed this post,seen on post, and got pretty good results, but for some reason, when I view the post on my blog, it shows up as a clickable picture....how do I get rid of that?
@The Dubya's, You must of figured it out because I took a look at your blog and the sig image is not clickable now.
a img {
border-width:0;
}
This is what I have in my template. I can't get rid of that signature border. I tried replacing it with your suggestion but it gives me errors.
@Pamela Kramer, read through these posts and the comments...maybe something will work on your blog:
http://bloggeruniversity.blogspot.com/2007/01/how-to-remove-or-change-image-borders.html
http://bloggeruniversity.blogspot.com/2007/01/how-to-remove-dotted-border-from-links.html
I have a question.
The method u showed here to remove the border does really work.
But if so all my pictures posted are borderless.
Is there anyway that i can use to just remove the signature's border but keep the border for all other pictures??
My blog's background is black colour.
So the pictures look kinda weird without border.
And my signature also seems not like a signature with border.
Hope you can help.
Btw, great blog. =)
hi! i have been reading your blog for the past hour and i have picked up very useful tips for improving my blogger blog! i'm not going to list them one by one because there are so many of them :p
by the way, i use mylivesignature for my posts signature but since i want my page to load faster (okay, it's not exactly loading VERY fast right now because i don't want to lose all my links but i have uploaded all images to picasaweb as per blogger's suggestion to make my blog page load faster.), i got the URL link of my siggy from mylivesignature and hosted it in picasa and used your code to insert my signature in my posts.
you are the blogger bomb, annie. i like you already :)
great tip.thanks
Oh thankyou so much!
I have looked all through the comments and can not figure where I put the url for my image in the code that you showed. . . help please.
I love your site it is bookmarked and well used here. Thanks again!
laura
@laura, you put it where it says "SIGNATURE URL".
I just noticed my sig is down...I need to change my web host, lol.
Its really cut
it really very good.
I love it !
I like it !
thanks :)- .
Bathmate
check out the banner I made at my new blog workoutmusicdaily.blogspot.com Just leave a comment on the site if you would like me to show you how I did it.
Thanks you for information !
Nice thing. I also know it. It is useful for bologgers.
There are several comments saying they are having problems. You might go to YouTube and enter gimp signature so you can watch someone do it.
Thanks for the template code... got me searching for ways how to personalised my signatures....