FYI: Posts will be sparse around here until I replace my laptop.... Coming back to work after Christmas break apparently was too hard and it quit on me!

14 June 2011

Tuesday's Tips -Signature the harder way

I've had many questions on how to make a signature appear for each post. So here ya go! I've found two different ways of inserting a signature in each post. The first way is without messing with any of your blog's HTML code--the easy way. This way only inserts the image in future posts and the image is in the actual post itself.(can accidentally be deleted!) If you do it this way the image for your signature will appear just as any other image in your post. (not such a great idea if your images have borders or drop-shadows)
The second way is to use HTML to automatically put a signature image at the bottom of every post, past and future--the harder way.

[Here] is the tutorial for the easy way.

The following is the 'harder way.'

1}
create your signature


Create your signature in whatever image editing software that you use.  (I personally use GIMP because it is free and works well for what I need)
I would include your name and make the design represent your blog's feel and design. Make it represent you!

2}
upload your signature


Upload your image using whatever image hosting site that you use. (I would suggest Imgur because it is free, doesn't downsize images, privacy settings, is easy to navigate, and loads quickly)

3}
create the code

.post-footer-line-1{
background-image:url(IMAGE LINK);background-repeat:no-repeat; background-position:left left;
height:150px;
line-height:150px;

color:$textcolor;
text-transform:none;
letter-spacing:0px;
font-size:14px;
padding:0px;
border-bottom:0px solid #000000;
}
Replace IMAGE LINK with the direct link for your signature. Then change the height and line-height to the same number that is slightly bigger than the height of your image. The reason you have to make it bigger is so that the footer text doesn't overlap part of your image.
You can also customize other things like the border, text-transformation and such as you'd like.

4}
add the code

Go to your dashboard > design > edit HTML.
Search for this code:
h2.date-header{
Then right below that paste your code.

You now have a signature that will appear on every post--past, present, and future--on your blog until you remove/change the code.
Let me know if you have any questions, and I'll get back to you ASAP.

In Christ,

3 comments:

Bekah

Hi Emily, I followed all of your instructions and when I got to the part on looking for the h2.date-header{ to paste my code underneath it, I didn't have it in my Html.
Please let me know if there is something that I'm doing wrong!
Thanks,
Bekah

Emily Grace

Bekah -

Hmm. Did you try using the search tool? Sometimes just scrolling through you can miss sections.

It doesn't have to be directly under the 'h2.date-header{' section. It simply has to be under the '/* Posts
-----------------------------------------------
*/'
section. So see if you can find any code that starts with '.post' and put your code underneath that whole section. Make sense? If no,t send me a link to your blog and I'll look at your code. =)
Hope this helps!

- Emily

Bekah

Thanks! What you said helped a bunch!

In Christ, Bekah

Post a Comment

Leave your thought...