Build a Wedding Website for Free: Adding Pages and A Favicon

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 yesterday's post tackled customizing the menu, adding rounded corners to your header, and adding your first post. Today, we'll be adding a favicon, creating rounded corners for your menu, and adding pages.

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

Creating Rounded Corners to your Menu

This next little bit of awesome is courtesy of Marie over at Code It Pretty. She's showing you how to add rounded corners to your menu (You can predetermine your corner radius by punching in the radius you want at border-radius.com.).

To get the rounding to show in the menu, copy and paste this code into Blogger Dashboard>Template>Customize(the Blogger Template Designer)>Advanced>Add CSS section*: 

.tabs-inner .section:first-child ul {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

Blogger-Step-38 

Click the "Apply to Blog" button in the upper right hand corner and then "View Blog"!

Blogger-Step-39

*To get it to work in Internet Explorer (9 and up only), you'll need to make a small change to your template's HTML. Back up the template first, then go to Template > Edit HTML > Proceed. Right below the opening <head> tag and change this:

<meta content IE=EmulateIE>

to this:

<meta content='IE=EmulateIE=edge' http-equiv='X-UA-Compatible'/> 

Adding a Favicon

First, let's answer your question, "What IS a favicon?" A favicons is a small 16×16 pixel picture ythat appears beside some URLs in a browser’s address bar. If you have a photo creation/editing program then you can create your own favicon using the first part of this tutorial. If you have an image already that you'd like to use, then use this favicon creator to change it to the proper format. Or pick from an already existing favicon. Just keep in mind that your favicon will need to be recognizable in a really, really small size – generally, a line drawing or cartoon is usually better than a photograph.

To add your favicon, go to the Blogger Dashboard>Layout and look for the favicon "Edit" button:

Blogger-Step-40

Right now, your favicon is the Blogger logo. In the pop-up window, click "Choose File" and select your favicon form where you saved it. Click "Save."

Blogger-Step-41

Now you're favicon is showing in your Layout area. Click "Save Arrangement" and the "View Blog" to see your favicon (sometimes it takes awhile for a new favicon to show up – have patience).

Adding Pages

This is going to the heart and soul of your wedding website! You'll be able to create one page for each wedding related topic and it will automatically link in your menu. I'm going to show you how to create your registry page (use the same basics from the registry page creation to do all your other wedding website pages). First, from your Blogger Dashboard go to "Pages" (from the left hand menu):

Blogger-Step-42

Click "New Page" and select "Blank Page" from the dropdown menu:

Blogger-Step-43

Add a Title (this is what will appear in your menu) and your text:

Blogger-Step-44

At a loss on what wording to use on your registry page? There's lots of great ones at this site. After you add in your title and text, let's make it really easy for your guests to access your registries by adding in images from each registry and linking them directly to your online registry. Here's how:

Click the image icon in the Post Editor toolbar:

Blogger-Step-45

A window appears prompting you to browse for an image file on your computer or enter the URL of an image on the Web.

Blogger-Step-46

Once you've selected your image, you can then choose a layout to determine how your image will appear in your post:

  • The 'Left', 'Center', and 'Right' options allow you to customize the way your blog text will flow around your image.
  • The 'Image size' options will determine how large the image will appear within your post.

Click "Upload Images" to add your image, and then click "Done" when the notification window appears telling you that "Your image has been added." You're image should show right away.

Blogger-Step-47

Now comes the linking part. Highlight your image and (while it is highlighted) click on "Link" in the upper right hand corner. This will bring up a new window:

Blogger-Step-48

In this window, you'll need to add a title (I just went with "Our Crate & Barrel Registry") and the URL for your registry (you can find this by going directly to your registry or the share area of your registry and copying the URL). Paste that URl into the area marked "Web Address." Clcik next to the line that says "Open the link in a new window." (this will allow people to explore your registry on a new page while keeping your wedding website open in another). Last, Click "OK".

Blogger-Step-49

Repeat for each registry (you can easily find the store logos for your registries by Googling "X logo" and looking in the images category). Click "Publish" and then "View Blog" to see your new page added to your menu! Click on the link from the menu to see your page – remember, you can always make changes to your pages from your Blogger Dashboard>Pages then find your page and click the "Edit" link underneath.

Blogger-Step-50

Whee! Now do one page for each topic you'd like to showcase on your wedding website. Here's my suggestions:

  • Ceremony information (location, directions, times)
  • Reception information (location, directions, times)
  • Travel and accomodations information (locations, discounts, directions, suggestions, stuff to do)
  • Our story and/or bios (Who are you, how did you meet, how'd you get engaged)
  • Our honeymoon (share your plans and after, the photos)
  • Photo and/or video sharing information (a free account for people to upload to or something your photographer/videographer has set up)
  • What to wear/how to dress for the weather
  • Weekend events and information
  • Babysitting information
  • Guest book (I'll show you on Friday how to do this so people can "sign" it by leaving comments)

You're getting closer to your FREE wedding website! I can taste it!

Adding Fun Stuff to the Sidebars and Customizing the Footer

Be sure to swing by tomorrow and learn how to add lots of fun little bits to your sidebar and customizing the footer! 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!