Build a Wedding Website for Free: Customizing the Footer and the Sidebar

This is part of a weeklong series on how to build a wedding website for FREE. Moday's post showed you how to get started, add a colored background, and customized your header image and Tuesday's post tackled customizing the menu, adding rounded corners to your header, and adding your first post. Yesterday's, handled adding a favicon, creating rounded corners for your menu, and adding pages. Today, we're customizing the footer and adding some fun stuff to the sidebar (plus making some customizations there, too).

How-to-Build-a-Wedding-Website-for-Free

Customizing the Footer

The footer is that thing at the very bottom of any website. Generally, it has some copyright information and maybe some links for other website pages. Her'es the default one from Blogger:

Blogger-Step-63

It's… less than special. So let's add a copyright (After all, you DID design your own wedding website!) to that Blogger attribution. Go to Blogger Dashboard>Template>Layout and click "Edit" in the "attribution" section.

Blogger-Step-64

In the pop-up window, fill out the "Copyright" with:

© yournamehere

(that displays the standard copyright symbol ©) and "Save". Now your footer looks like this:

Blogger-Step-65

Adjusting the Sidebar and Content Width

Let's change the widths of our main content and sidebar. Go to Blogger Dashboard>Template>Customize(the Blogger Template Designer)>Adjust Widths: 

Blogger-Step-51

Use the toggle tool to change the width of your entire site or just the sidebar. I altered the size of the just the sidebar (and took it down to 270 pixals wide). Keep in mind, if you change the width of the entire blog – you'll also need to change the width of your header image. To save, click "Apply to Blog" and then "View Blog".

Blogger-Step-52

Changing the Sidebar Accent

To change the color of the sidebar accent, go to Blogger Dashboard>Template>Customize>Advanced>Accents: 

Blogger-Step-53

Either choose a color from the pre-set colors or manually specify the color value (search online for color codes or try out this cool little (FREE) tool to help select an entire color scheme) in the "Separator Line Color" section to change the color of the accent separator. I went with a pre-set and picked a coral to match my menu. Click "Apply to Blog", then "View Blog", and it will look like this:

Blogger-Step-54

Changing the Sidebar Title Text Font and Color

Next, we're going to change the font and font color of the sidebar title text. So, go to Blogger Dashboard>Template>Customize>Advanced>Gadgets: 

Blogger-Step-55

Under the "Title Font" area, go ahead a pick a font for your sidebar titles (I chose Inconsolaia), then decide what font size you'd like (I kept the default 11 pixal size), and whether or not you'd like it bold or italicized (I chose bold). Click "Apply to Blog".

In the "Title Color" Section, you again get the opportunity to select either a color from the pre-set colors or manually specify the color value to change the color of the title text. I went with a manual color (#4a4a4a) for my titles. Click "Apply to Blog" to save your changes.

Last, in the "Alternate Text" area, you'll be selecting the color for the little arrows that appear in certain sidebar gadgets (See the ones next to the "Blog Archive" entries? That's what I'm refering to). Just like with the other color changes, you can choose a pre-set or manually specify the color value. I again picked the pre-set coral that matches my menu. Click "Apply to Blog", then "View Blog", and it will look like this:

Blogger-Step-56

Adding Gadgets to the Sidebar

I'm really excited to share this next bit of awesomeness with y'all! This is where the fun REALLY begins. Let's add stuff to your sidebar! Go to Blogger Dashboard>Layout>Add a Gadget: 

Blogger-Step-57

This will bring up a pop-up window with lots of options to choose from. Let's start with a simple one – "Search Box". Scroll down until you see the "Search Box" option and click the blue "+" to add it.

Blogger-Step-58

A new window will appear and in it, you'll be able to add a title to your "Search Box" gadget (I chose "Search") and you get to decide how big the search goes – your website, your website plus your favorite blogs, or your website plus your favorite blogs plus the entire Internet. I selected only the "This Blog" option since guests are looking for specific information on your wedding website.

Blogger-Step-59

You'll be a little preview of what the "Search Box" will look like and then you can click "Save". The gadget will appear in your gadget area + now your guests will be able to search your site for information using keywords or phrases. Click "Save Arrangement" to save the entire layout.

Let's add a couple more basic ones. Go to Blogger Dashboard>Layout>Add a Gadget and choose the "Blog List" options. It will open a new pop-up window:

Blogger-Step-60

In this window, you'll be able to enter a new title for the gadget (I chose "Our Favorite Blogs"), Select from the drop down menu how they will appear (I chose alphabetically), and how they will appear (I chose to only show the title so I unclicked everything). Then you'll be prompted to begin making your list. I started by adding http://www.kissmytulle.com. When you are done adding blogs – click "Save" and this gadget will appear in your gadget area. Click "Save Arrangement" to save the entire layout.

Another quickie one we'll be adding is the "Twitter Updates" gadget. Go to Blogger Dashboard>Layout>Add a Gadget>Featured and choose the "Twitter Updates" option. It will open a new pop-up window:

Blogger-Step-61

Again, choose a title for your gadget (I kept the default title) and then fill out the form. How tall do you want it to be (I stuck with the default 200 pixals), enter your Twitter handle (without the "@" symbol), fill in your desired number of updates shown (again, I used the default option of 5), and decide whether or not you'd like a link to your Twitter profile page displayed under the updates (I chose to keep that). Click the "Preview" button to see what it would look like and then click "Save". This gadget will appear in your gadget area. Click "Save Arrangement" to save the entire layout and "View Blog" to see your changes.

Blogger-Step-62

You're getting closer to your FREE wedding website! Cool but pretty boring, right? Then just WAIT until tomorrow…

Adding More Fun Stuff to the Sidebars and More Blog Customization

Be sure to swing by tomorrow and learn how to add lots more little fun things to your sidebar (an Instagram feed, a Pinterest feed, social media images, adding a Pin It button to your images, and more!) and we'll also be doing lots more customizations all over the blog (plus adding a slideshow to your homepage post)! Phew! That was SO much information, y'all – congrats if you're still with me! Do you have any questions? Requests? Wanna link to the wedding website you're working on and brag? Fire away!

Shares 0