Tips & Tricks Tuesdays: Adding a signature to your blog posts

9:00:00 PM

Hi all, and welcome to Tips and Tricks Tuesdays!

MacGyverButton
Today I'll be showing you a blogging tip. Now this tutorial is for Blogger platforms (I'm sorry, I'm not familiar with WordPress sites!)

In this tutorial, I'm going to show you how to add a signature to your blog posts so that it automatically shows up and the bottom of every post (i.e. you won't have to add one every time).

1. First, you need to generate or create an image of your signature.

(you can see an example of mine at the bottom of this post).
Siggie-1a

I use Microsoft Publisher or Photoshop Elements; but any program where you can edit photos/images and use/insert text will work fine.

There are great resources online for downloadable 'scrapbook' kit images, free-domain clip art, and free fonts - just use your preferred search engine (mine is Google) and search away. You can come up with some really neat stuff, something unique to you and your site.

2. Once you've created your image, save it (if you can) as a .png file. This way, your image background will remain transparent, unlike if you were to save it as a .jpeg, etc.

3. Now you need a website to host your image. Again, use your search engine to search for free hosting sites; I like to use either photobucket or flikr. You may need to resize your image; a comfy-sized signature should be no more than about 300px tall, and if you choose to double your signature as a post divider like I have (i.e. - it's the width of a post) then the width of your image should be smaller than the total width of your blog, so that it fits. But a lot of people just have a signature of their first name, so something like that may measure (depending on the length of your name) about 100-300px tall x 100- 400-500px wide.

I always recommend making a back up of your template before altering it.

4. Head over to your blog. In the new blogger interface, click:
-Template
- - Customize
This brings you in to the Blogger Template Designer.

5. Click on:
- Advanced
- - Add CSS
6. In the white box ("Add CSS here to override")
you enter this code:

.post-footer {
background:url(YOUR IMAGE URL) no-repeat center;
height: 175px;
margin: 0px 0px -50px;
padding: 5px 5px, 0px, 0px;
}

7. Now remember when I asked you to host your image online? You're going to need to grab the 'direct link code' and insert it in the brackets above that say YOUR IMAGE URL

8. The rest of the colored text in the html code above can be adjusted according to your needs:
- Height: the height of your image (as discussed above) 
- Margin & Padding: (Top Right Bottom Left) moves your image and changes the spacing around your image with respect to surrounding elements accordingly
- You can change "center" to "left" or "right" to justify your siggie accordingly
**you can see the live preview of your blog in the area below the CSS box** - make sure you like what you see before you:

9. Click:
- Apply To Blog

You should now see your divider at the bottom of your posts!

Now for the linky-party!
Tips & Tricks Tuesdays at Sew at Home Mummy


  1. Post a tip, trick or tutorial on your website or blog
  2. Grab a "Tips & Tricks" button above
  3. Post said button in your tricks post
  4. At the bottom of this post, click the "link up" button and follow the directions...let the party begin!
  5. If you have a chance, pop by the other fellow blogger linker-uppers at the bottom of this post and share some love!
If you are interested in hosting a Tips & Tricks party, please fill out the sign-up form HERE and I'll contact you with an available date! (booking into April, May now).

You Might Also Like

3 comments

  1. Thank you for the tip. I plan to make some changes to my blog face and this is great.

    ReplyDelete
  2. Thank you for being my personal blog consultant and helping me improve it each week. I plan on doing this tonight!!

    ReplyDelete
  3. Alright I have just become your stalker, hope you don't mind and I will try to not be a pest, but my blog is a disaster.......and so I will be living here for awhile, reading all your blog tips. I have been using Office products for years............used Excel & Publisher to design quilts before EQ came around, lol.........but one thing I never knew was that I could remove a background on fonty things by saving it as a .png. Just discovered that set transparent icon the other day.....it's probably been there for years.

    ReplyDelete

I ♥ to hear from you!

Thank you for taking the time to leave a comment or for asking me a question. Rather email me? Reach out at sewathomemummy@gmail.com.

I like to email everyone back when they've commented - so if you're a no-reply blogger, make sure to leave your email address in your comment so I can share the love back atcha!