How To Design An Effective Blog Footer

I wrote about six ways to dress up your sidebar a few months ago, and I received a lot of comments from bloggers who were either thinking about or in the process of redesigning their sidebars. It sounded like everyone was excited to tackle that project, and I loved hearing how inspired they were! So to continue on the blog inspiration trend, I want to talk about another neglected space of most blogs—the footer.

How To Design An Effective Blog Footer

Unlike the sidebar, the footer is hidden for most of the time a reader spends on your blog. The only way they’ll usually see it is if they’re curious about your blog and want to scroll through your home page, or if they decide to comment on a post they enjoy. It can seem redundant to spend time designing a part of your blog that doesn’t get nearly as many eyes as your content, but the eyes that do see it are most likely ones that are interested in your blog and want to learn more!

Similar to the sidebar, your footer takes up a good chunk of space on your blog, and has the ability to take up more than you might think. My footer is a little over 200 pixels in height, and I’ve seen even bigger ones! A lot of bloggers just put an attribution there, which is perfect if you’re looking for something simple and don’t want it to draw attention, but if you want to make your footer even more effective, there are tons of things you can add and style to your liking! Here are some examples:

  • Email subscription opt-in
  • Category buttons
  • A logo element
  • Your contact info
  • Social media icons
  • Navigation links
  • Instagram/Pinterest widget
  • Mini bio
  • Popular posts list

I decided to keep my footer fairly simple by placing some of my popular posts on one side, and social media buttons along with my attribution on the other. I achieved this look by using the built-in footer widgets on my blog’s template, which are separated into three sections. If your blog doesn’t have this function, you can try playing around with the “float” property.

What’s best for my blog?

Depending on your blog’s content and your content marketing plan, some footer elements may benefit you more than others. For example, if you offer a mailing subscription for your readers, I would definitely recommend placing an opt-in in your footer! Likewise, if you create beautiful artwork, products, or anything visual and post about it on a social network, placing a widget for that social network in your footer would be beneficial. It’s all based on your needs! That said, try to avoid putting too much in your footer. It can easily take on a cluttered look, which isn’t what you want your readers to see after they’ve finished reading your amazing content!

Styling Your Footer

For simple styling, you can generally just edit the CSS of the “footer” tag. Here’s an example on one of my demo blogs:

footer {
  display: block;
  background-color: black;
  color: white;
  border-top: 3px solid #c4a0a4;
}

This is the effect that code would produce (the link color was set elsewhere in the stylesheet):

Footer Screen Shot

Footer Inspiration

I’m sort of a blog design enthusiast, so I love finding inspiration from other blogs and seeing what creative ideas are out there. If you’re planning on redesigning your footer, try searching around your favorite blogs and see what they included, or how they went about designing their footer to match their blog. I’m not saying you should steal their ideas, but looking around can really help when you’re stuck on what to do! Here are some of my favorite footer designs:

Sun And Daughter Footer

Source: Sun + Daughter

Love Grows Design Footer

Source: Love Grows Design

Meredith Noelle Footer

Source: Meredith Noelle

Whitney Blake Footer

Source: Whitney Blake

Allyssa Barnes Footer

Source: Allyssa Barnes

Are you considering giving your footer a makeover? What are some things you’d consider “must-haves” for a footer?

I want you to join me

Do you want to become a part of The Blogging Brew community? Join me and other amazing bloggers on my group Pinterest board! It's full of fantastic tips for blogging + business, and updated every day by members like you!

  • Betsy Smith

    I don’t even know what I have in my footer right now! Social media buttons? Haha! I will definitely need to take a look! Thanks for the tips!

    • http://thebloggingbrew.com Jessica Slaughter

      I said exactly that to myself! I just had my name and disclosure, which obviously wasn’t doing much!

  • http://www.beinspiredcreative.com Sara Rae Hughes

    I’ve been debating on what I’m going to do with my footer after I build my blog up and have some content I’d like to feature down there. Right now I’m just keeping it simple. Thanks for all these tips! I’ll pin to refer back to :)

    • http://thebloggingbrew.com Jessica Slaughter

      Simple is always in style, so that works! And thank you!

  • http://www.yourunfadingbeauty.com Toyin Alli

    Thanks so much for the ideas! I literally have nothing down there…lol!

    • http://thebloggingbrew.com Jessica Slaughter

      Of course! And don’t worry, you’re definitely not alone!

  • http://allyssabarnes.com/ Allyssa

    Thanks for featuring my footer!

    • http://thebloggingbrew.com Jessica Slaughter

      Of course! It’s gorgeous :)

  • http://www.foreverashley.com/ Ashley LaMar

    I was really conflicted about my footer for the longest time. I am all about symmetry and I hated how my content and sidebar weren’t always 100% the same length which left one reaching all of the way to footer and the other having blank space. I finally just forced myself to get over that and I created a footer I like.

    • http://thebloggingbrew.com Jessica Slaughter

      I totally get what you’re saying! I know there’s some way to make your content and sidebar match up when one of them is too short, but I haven’t figured out how to do that.

  • Jessica

    I’m terrible at everything blog design-related, so I’m really glad I found your posts! Great tips!

  • http://gina-alyse.com/ Gina Alyse

    Your footer looks gorgeous! And this is a great tutorial! I find that not a lot of bloggers play close enough attention to their footer area–it can sometimes go unnoticed! Thanks for your tips, girl! :)

  • Gladiator in Heels

    Hi there, great tutorial! Not sure if your blog is Blogger or WordPress. If it’s Blogger, can you share how you created the Pinterest Group Board invitation? Thanks!

    • http://thebloggingbrew.com Jessica Slaughter

      Unfortunately I’m on WordPress! So I was able to place a text widget in my “under posts widget area”, which Blogger doesn’t have :( There might be a way around that though (like putting an opt-in at the bottom of every post), and I’ll try to find a Blogger friendly way to share! :)

  • Not a blonde

    I see that you have a responsive Disqus on the mobile. Do you have any tutorial for this? Is it hard to achieve?
    Thanks! :)

    • http://thebloggingbrew.com Jessica Slaughter

      I believe it has to do with the way my entire blog’s responsiveness was built, because I didn’t code anything specifically for disqus, just the overall width of my site! Is your blog responsive or are you using a mobile template, and are you on Blogger or WordPress? It can be kind of tricky to make a blog responsive just because platforms like Blogger are originally built for a mobile template :(

      • Not a blonde

        I am in Blogger and I have made my blog responsive :) But i can´t make Disqus appear properly :/

        • http://thebloggingbrew.com Jessica Slaughter

          Huh, that’s weird…could you link me to your blog? I’ll try to take a look at the code and see if there’s anything that might be keeping it from working!

          • Not a blonde

            Thank you so much for your help!
            My blog is http://www.notablonde.co

          • http://thebloggingbrew.com Jessica Slaughter

            So it looks like some of the responsiveness works when I shrink down your page on my desktop, but when I open it on my phone a lot of that responsiveness goes away. I’m thinking there might just be a missed section somewhere in your responsive code where it’s not changing anything for the mobile width other than the content size? I’m still learning about responsiveness though, so I’m not entirely sure! :( Beautiful design btw!

          • Not a blonde

            Thanks for trying to help :) I took some inspiration from your blog :D I will try to figure out whats wrong ;)