You can do this.

Back in Add a footer you added a footer to your blog, but maybe you removed it again as it probably looked pretty terrible. In this tutorial we're going to add a footer and use CSS to make it look good. Buckle up!

Add a styleable Custom Footer

  1. Go to the Design section for your blog.
  2. In the Custom theme: section click on the Edit Footer button. A new page opens up with a box for entering coding for a Footer.
  3. Enter what you want in the Footer, but add paragraph tags and a class. See the example below that you can copy and paste then edit to put in your own name.
  4. Save your changes with the Update Footer button.
  5. Visit your blog and Refresh to see the changes.

Here's an example footer. This time, instead of adding the class to a span tag we add it to the paragraph tag. 

<p class="customfooter">This blog is owned by Miraz Jordan. </p>

When you visit your blog and scroll to the bottom of the page you should see the text, probably in black and hanging around at the left edge of the page.

Tip: here's a quick way to zip around the web page. Hold down the fn key on your keyboard and tap the right arrow to zip to the end of the page or the left arrow to zip to the top. Try it in other apps as well.

Unstyled custom footer.

Unstyled custom footer.

Style the Custom Footer

  1. Go to the Design section for your blog.
  2. In the Custom theme: section click on the Edit CSS button. A new page opens up with a box for entering coding for a Footer.
  3. Enter the CSS you want for the Footer. See the example below that you can copy and paste. In the next tutorial we'll look at a bunch of things you can do with CSS.
  4. Save your changes with the Update CSS button.
  5. Visit your blog and Refresh to see the changes.

Here's a couple of things you can do to style the footer. I'll explain them below. For now, copy and paste them into your Custom CSS area. 

.customfooter { 
text-align: center; 
color: white; 
background-color: navy; 
}

Note: center is spelled with an er not an re and colour is spelled with or not our.

Perhaps you can see what this CSS is doing. It aligns the text so it's centred across the page. Then it makes the text white and puts a navy background behind it. It may not be the world's most glamorous footer, but it's an improvement.

Styled custom footer version 1.

Styled custom footer version 1.

Try changing the colours. Try using the Web Inspector and change the colours there before you commit a colour to the Custom CSS area.