Build a Wedding Website for Free: Setting up the Account and Header

So, you want a wedding website but hate all the ones offered
for free by the big wedding industry companies or find the pay-for-them ones
too expensive. What to do? How can you have a nice looking website that is also
easy to update but costs you nothing? Easy. Create your wedding website in
Blogger for FREE.

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

But I Don’t Know How To Code

You don’t need to. In this weeklong special series, I’ll be
walking you through how to set up your own wedding website for free plus
showing you lots of cool little bits of coding (Never fear! It’s all copy and
paste stuff.) to make your Blogger blog look like a fancy-schmancy wedding
website. So, deep breath and let’s GO!*

*Some of you may be asking what the difference between a
blog and website is. The truth is, there’s really no big difference to anyone
but coding/techy geeks. For the purpose of this tutorial, we’ll be using the
terms “blog” and “website” interchangeably. If you’d like more information on
the difference between the two, read this great breakdown from Squidoo.

Build a Wedding Website for Free – Setting Up Your Blog

First, you’ll need a Gmail account, don't worry, it’s free. After you have a confirmed Gmail account, visit the
Blogger start-up page to sign up for a FREE Blogger blog. To get your Blogger blog you'll see a screen like this.

Blogger-Step-1

 

Click on the button that says “New Blog.” It will bring up a
pop-up window that will lead us right into…

Build a Wedding Website for Free – ChoosingYour Blog Name

Blogger-Step-2

This is where you’ll need to make a choice. What do you want
to call your blog? Will it be something like, “CrisandTheBoy” or “CandTB” or
maybe “KillerWedding2012”. Whatever you choose, keep it short and simple. I
always suggest using your first names. Experiment with different options but remember,
some names might be taken so you’ll need to have a short list handy to try out.

Enter the blog name and corresponding domain name (to
precede '.blogspot.com') in the spaces provided. I’m also going to take a
second and talk about domain names. You’ll notice that if you are setting up
your Blogger blog it will automatically make you have the name of your site be
thenameyouchoose.blogspot.com. If you hate that, then I encourage you to purchase
a $10/year domain name from Blogger
and follow their directions to set it up (its
super easy).

Last, choose a standard template to build your site in. Go ahead and select the "Simple" template for now – I like this one because we'll be able to customize it easily later. Click the "Create Blog!" button… and onward!

Build a Wedding Website for Free – Choosing Your Blog Template

That will take us back to a main screen where we will be
given the option to “Start Posting”, choose from the dropdown menu, or “View
Blog.”

Blogger-Step-3

Go ahead and view your blog.

Blogger-Step-4

Pretty boring, right? Let fix that a bit today (will be
making it TRULY AWESOME in the next few days). Go up to the top right hand corner
of your blog and click on the “Design” button. It will bring you to a page that
looks like this:

Blogger-Step-5

You might find a template in here that you really, really love. If so, skip down to the section on "Adding a Header". For everyone else, click the "Customize" button.

Now you are in the "Blogger Template Designer" and, from here, you can easily customize bunches of your website. 

Blogger-Step-6

For this tutorial, I clicked on the "Simple" Template and chose the very last option from the menu. Then click the orange "Apply to Blog" button in the upper right hand corner.

Blogger-Step-7

Now, click on the "View Blog" button in the upper right hand corner.

Blogger-Step-8

Pretty boring, right? So, let's add a simple solid-colored background to your site. *At this time, take a second and back up your blog. It's a good idea to do this right before (and every time) we make a change to your blog. Follow these directions from Social Moms.

Customizing Your Background With a Solid Color

In "Blogger Template Designer", click on the "Advanced" button:

Blogger-Step-9

Now click on the "Backgrounds" option in the menu. It will bring up lots of background options for you!

Blogger-Step-10

This is the fun part! You can either choose a color from the Blogger pre-sets or you can 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). I went with my own color and picked #9BC0B3. All you have to do is add your color code to the "Outer Background" area (or select one of the existing options) so it looks like this:

Blogger-Step-11

Click "Apply to Blog" and voila! You've got a pretty solid colored background. Go ahead and click "View Blog" button to see your new background.

Remove Blogger Banner

Next, we're going to remove that pesky Blogger banner at the top. 

Blogger-Step-12

In your "Blogger Template Designer", scroll down your choices until you get to "add CSS." Click it.

Blogger-Step-13

CSS stands for Cascading StyleSheets which is a fancy-schmancy way of saying "website design". Coders and designers LOVE CSS and we'll be using it a lot this week so get comfy, y'all.

Okay, in that big empty white box on the side, I want you to insert the following code:

#navbar-iframe {
 display: none !important;
}

Now, Click the "Apply to Blog" button and then "View Blog". And it's gone! Woot!

Blogger-Step-14

Your blog is looking more and more like a website.

Adding a Header

Now, we want to add a simple header to the top of your blog. The header is that big space at the top of a website or blog where your logo or picture goes. It's a quick visual cue that let's people know they've arrived at "X" website. First, you're gonna need a header. For simplicity's sake, I encourage you to stick with a simple horizonal photo of the two of you and add some text with your names + wedding date.

For a REALLY COOL tutorial on how to do this for FREE, check out Amanda's Header Design Techinque post. Create a 880 pixal width header for this template. Any height will do, but a smaller width will leave a weird white space and a too wide header will be cut off at the side. Her'e's my header (I did 880×314 pixals):

Blogger-Header
Image Courtesy of: Miranda Laine Photography

So, to add it to my website I'll need to go in my "Blogger Template Designer", click on the "Layouts" option, and then click on the "Edit" button under the Header section.

Blogger-Step-15

 

The "edit" button will bring up a pop-up window:

Blogger-Step-16

In this window, I want you to "Choose From Your Computer:" and choose your header from your computer files. Then under "Placement", I want you to choose "Instead of title and description." Click "Save."

Blogger-Step-17

And you've got yourself a header! That's a great job for today!

Custom Menu and Adding a Post

Be sure to swing by tomorrow and learn how to customize a menu + add your first 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