Beautify your Blog: week 7 - Footers & Signatures

7:30:00 AM

Hi all, welcome back to Week 7 of the 12-week series, "Beautify your Blog".

This week we'll be covering Footers & Signatures.

Please note that I highly suggest you start at the beginning of the series, and work your way through each tutorial. Each tutorial builds on the week previous.

It is very important that you make a back-up of your blog; read how to do this AND the disclosure statement in Week 1 before beginning.

Here are the tutorials to date for you to go through:
1. Start Here


And here's a button for your blog if you'd like to share the Gorgeous-How-to-Give-Blog-Eye-Candy love with your readers!
Sew at Home Mummy

Let's get started!

1. Post Footers
Your post footer sits right under your post; your social sharing buttons are here (for readers to email, pin, Google+, etc., your post), your comments area, the author's name, time and date of the post, etc.

Let's get to personalizing this.


in your Blogger.com homepage, click the drop down menu beside your test blog's name, and select

Layout

the following window appears:
In the Blog Posts box, click

Edit

the following pop-up appears:
Here's where you can edit the way your blog's post footers look. This will all be personal choice:

Main Page Options
- 7 posts per page: I'm going to leave this. If you set your posts per page to be too high, it will take a long time to load your pages, and we don't want that, in case readers are impatient.

- Post page link text: this would be if you were using page breaks/jumps. I have this unselected for my purposes - I'm not a huge fan of page breaks, I find them hard to navigate with editing and they have made my life a little harder in the past - but if you choose to use them, have fun with it. :)

Post Page Options
- Date format (choose whichever you are comfortable with - this is the way the date will be displayed at the top of your post:)

- 'Posted by' can be edited to whatever you like. I've changed mine to "Written by"
- Time format (choose whichever you're comfortable with)
- I chose to have my "Labels" displayed
...etc....

make sure to scroll down the pop-up because there is more at the bottom - and you can drag and drop all of the grey elements to re-order them and relocated them. (shown in the red box, below:)

Once you've personalized it, click SAVE.

A note on Labels:
You can add "Labels" to each post, located in the right hand margin of your Post screen, pictured below:
You can create any kind of label you like - if I'm writing about my Singer 66-16 machine, I apply that label to that post. That way, I can go back and search every post I ever wrote about my 66-16 with that label attached to it, and they will all be displayed on the same screen. I'll add a label to my post here and you'll see, under my post here today, the label "blogging tips".

If you click there, every post I've ever added the label to pop up. You can then use the URL (web address) in the address bar as a link for buttons (like I've done with my "Sewing Machine Obsession" button in the bottom of my right sidebar), navigation buttons at the top of your blog under your blog header, etc. 

A note on Share Buttons:
You'll see one of the options in the list is to show "Share Buttons". I highly suggest you do this, especially if you're looking to increase your readership. A lot of new readers may find you through a Pin of one of your images on Pinterest, or from something someone Tweeted from your blog, etc. It's a great way to 'promote' your blog, for free.


Once you're happy with your editing, you can click "View Blog" top left, and check your changes on your live version of your test blog:


2. Signatures
Okay. Do you want to have a permanent signature come up at the bottom of every post, without the image shadow box Blogger automatically puts around every image, like this?

The short version?

I personally used this tutorial at Code it Pretty: {Automatic Post Signatures for Blogger}. Her site has some fantastic tutorials, and once you know your way around  Blogger a bit they're super easy to follow.

I honestly can't do a better job of her tutorial, but maybe I can insert a few more pics/tips of the steps.

2.1 Creating the signature image.
You'll want your signature image to be about 45-80px tall. If you want an image that runs like a post divider which also doubles as a signature, you'll need to take a peek at your blog widths you set in the previous weeks tutorials on Backgrounds & Layouts (link at top of post). But your divider, should you go with this option, should be slightly smaller than your Blog Width (minus) Sidebar(s) width(s).

If you've created a signature image and need to resize it, you can always use a program like Pixlr.com (covered extensively in previous week's tutorials).

Once you've created and edited your image to the correct size, you can follow Code it Pretty's instructions for uploading the image to the Picassa Album hosting site.

2.2 "Coding" the image into your site.
Now we have to 'code' that image into your site.

From your Blogger homepage, click the dropdown menu beside your test blog's name.

Select: "Template"

Select: "Customize" (orange button)

Select: "Advanced"

from the Code it Pretty website, copy the text she had listed in the tutorial and paste it into the "Add custom CSS" box, like this:

Where it says YOUR-IMAGE-URL-HERE, insert the image address from your Picassa web album, as she describes.

make SURE not to disturb anything outside of the { } brackets, and make SURE not to remove the { } brackets. No spaces, either. 

Here's what mine looks like (instead of Picassa web albums I used photobucket.com to host my image, but it doesn't matter)
In RED you'll see the code we inserted in the step above, but now with my image's URL in the right spot. Put your cursor to the RIGHT of the } bracket, and press 'Enter'.

If you hover your mouse over the bottom of your screen where the 'live view' of your blog is, scroll down to see where your signature would sit on any given post.

In ORANGE you'll see my signature - WOAH! It's WAY too far to the right for me!

See in the code box I've circled something in ORANGE? That's the bit of the code that's telling my image that it needs to be shoved over to the right by 250px. I don't want this - I want my signature to move to the left - so I'm going to decrease my left margin.

I changed my margin-left to 0px, and this ended up being perfect for me!

Once I'm happy with all of the edits, I click "Apply to Blog" and BAM! New signature added to every post that's ever been on my site.

Like my signature?
About the Image:
I bought the image, along with a bunch of other sewing-related images, from a graphic designer on Etsy. The package had 20+ graphics in it (spools, dressforms, sewing machines, threads and needles, etc.) for about $3.00. Totally worth it, and I can use the images to dress up my blog! I added the custom font myself in a color matching the color scheme of my blog.

About the Size:
I re-sized this image to 75px tall and 600px wide so that it would act as both a signature AND a post divider of sorts.


And BEFORE and AFTERS for this week!
BEFORE:

AFTER:


Thanks for following along with the series. Next week we'll start with sidebar content, starting with a nice, custom, "About Me" widget. Stay tuned!

And, as always, I love to see what you're up to. Make sure to leave a comment with your blog address so that I can enjoy your blog edits, too!

If you haven't yet entered my "Name my Machine!" contest, click the button to go to that post now :)

You Might Also Like

4 comments

  1. I'm really enjoying this series, Erin, and learning a lot. I'm slowly making changes to my blog as I find the time. Come see at devotedquilter.blogspot.com. Not that you'll know what it used to look like, of course! I noticed this evening that your sidebar is within the white portion of your blog, while mine is on the background. Any idea why? Will that be something you cover in a later lesson? I'll be looking forward to next week's lesson. Thanks for helping those of us who don't really have a clue when it comes to the technical stuff.

    ReplyDelete
  2. I did it! I'm so excited that I was able to add a custom signature to all of my posts, complete with some cute little apples. http://reddeliciouslife.blogspot.com/

    ReplyDelete
  3. You may get this twice! If so I apologise! I followed the instructions for putting a signature on my blog but have ended up with a box to the right of my name. www.stvictorquilts.blogspot.fr if you would like to have a look. I could not find the' link to this photo' on Picasa so just did a copy and paste of the image url. If you have any suggestions I should be very grateful.

    ReplyDelete
  4. Woot woot!!!!! Cruising right along!!

    ReplyDelete

I ♥ to hear from you!

Thank you for taking the time to leave a comment or for asking me a question.

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!

SUBSCRIBE: Posts in your Inbox!