Build a Wedding Website for Free: Customizing the Menu and Adding a Post

This is part of a weeklong series on how to build a wedding website for FREE. Yesterday's post showed you how to get started, add a colored background, and customized your header image. Today, we'll tackle customizing the menu, adding rounded corners to your header, and adding your first post.

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

Customizing the Menu

This template doesn't have a traditional menu that runs horizonally underneath the header. But that's okay because we can easily add one! Got to you Blogger Deashboard and click on "Layouts" (from the menu on the left hand side). From there, click on the "Add a Gadget" that is under the header:

 
Blogger-Step-18

From there, a pop-up window will appear and you'll be able to scrolldoan and choose to add "Pages" as an option:

Blogger-Step-19

Click on the "+" symbol – it will open a new pop-up window. In this window, delete the entire title area and click "Save".

Blogger-Step-20

Your new menu gadget will appear underneath the header in the "Layout" section of your Blogger Dashboard.

Blogger-Step-21

Click "Save Arrangement" in the upper right hand corner and then "View Blog." Right now, the only thing that will show up in your new menu is your homepage link ("Home"). That's okay! We haven't written any pages yet but once we do (tomorrow) they will automatically appear in your menu. Cool, huh?

Now let's fancy-schmancy up your menu a bit. Go to your Blogger Template Designer (Templates>Customize) and click on the "Advanced" option in the right hand menu. Now scroll through the "Advanced" options and click on "Tabs Background":

Blogger-Step-22

See how the menu automatically is outlined by a red, dashed line? This shows you that Blogger calls the menu "Tabs" and you are working with that section right now. For funsies, let's play with adding some color to the background of our menu. See the section labeled "Background Color"?

Blogger-Step-23

That's right! That's the area where you'll pick your color for your menu background. 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). I went with my own color and picked #FF4040. Add your color code to the "Background Color" area and it will look like this:

Blogger-Step-24

But your "Home" link is still white. That's because your are currently on the homepage so that link is showing up as a current/visited link. If you like the contrast, great! If not, either select the same color pre-set or manual insertion for the "Selected Color" area or pick a different one completely.

Blogger-Step-25

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

Blogger-Step-26

Pretty cute, right? Now let's play with the color of the font (text). From your Blogger Template Designer go to Advanced>Tabs Text:

Blogger-Step-27

The first section, "Font", let's you select any font you'd like for your menu! Go ahead, play (I chose "Impact"). At the bottom of that section, you can also choose your font size. I stuck with the default of 12 pixals but feel free to do whatever you want – remember, you can always revisit this and change it later! In this area, you can also make your font bold ("B") or italicized ("i").

Next, let's skip over to the end section, "Selected Color", and pick a pre-set option or go with a manually selected color to alter the color of your current/visited menu links. I chose a plain ehite (#FFFFFF) for right now.

In the middle section, "Text Color", you get to pick your font's color! Again, pick a pre-set option or go with a manually selected color (I choose white again). Please note, your change in text color won't look like anything happened because this area is for the text that is not a current/visited link.

Blogger-Step-28

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

Creating Rounded Corners on Your Header

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 the top of your header (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 header, copy and paste this code into Blogger Template Designer>Advanced>Add CSS section*: 

#header-inner img {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}

 

Blogger-Step-29

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

*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'/>
 

Removing the Gap Above the Header

To remove that giant gap at the top of our newly rounded header, go to Blogger Template Designer>Advanced>Add CSS and add:

.content-inner 
{
margin-top: -30px !important;
}

Blogger-Step-30

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

Blogger-Step-31

Adding a Post

Before we add our post, let me explain the difference between a blog POST and a blog PAGE. Blog posts are displayed by date and show on the home page of the blog while blog pages do not show on the home page of the blog; instead, they are linked directly through a blog post, a link in the sidebar, or via the menu. Cool? Cool.

For your wedding website, we'll be making mostly blog pages; however, it's nice to have a post up on the homepage that acts as a welcome to your guests. To create that you go to your Blogger Dashboard and click on the orange pencil button:

Blogger-Step-32

Next, you'll see the Post Editor page. Start by giving your post a title (this is optional – I didn't do it), then enter the post itself. Just type your text and play with the options to change your font, font color, font size, etc.:

Blogger-Step-33

Add an Image to Your Post

You can add an image from your computer or the Web to your blog. Click the image icon in the Post Editor toolbar. A window appears prompting you to browse for an image file on your computer, or enter the URL of an image on the Web.

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.' Do you see your image ready to be published to your blog? Great!

Add a Video to Your Post

To add a video to your blog post, click the film strip icon in the Post Editor toolbar above where you compose your blog text. A window appears prompting you to 'Add a video to your blog post.'

Click "Browse" to select the video file from your computer that you'd like to upload. Blogger accepts AVI, MPEG, QuickTime, Real, and Windows Media files ONLY and your video must be less than 100MB in size.

Before uploading your video, add a title in the 'Video Title' box and agree to the Terms and Conditions (you'll only have to do this the first time that you upload a video with Blogger). Then click "Upload Video".

While your video uploads, you'll see a placeholder in the post editor showing where your video will appear. You'll also see a status message below the post editor letting you know that your upload is in progress. Depending on the size of your video, this usually takes about five minutes. When it is complete, your video will appear in the post editor.

When you're done, click the "Preview" button at the top to make sure it's ready to go, and then click the "Publish" button to publish your post.

Blogger-Step-34

Remove the Date Stamp from Your Posts

The last thing we're going to tackle today is removing the date stamp from our post. Since we are trying to achieve the look of a wedding website, I'm removing that (You can absolutely keep it though!). Go to Blogger Dashboard>Layout. Click on the "edit" button in the "Blog Post" section:

Blogger-Step-35

A small pop-up window will appear the post settings for your blog posts. The first item listed is the date stamp that appears under your post title. Uncheck the box next to it. This will remove all date stamps from all your blog posts.

Blogger-Step-36

I also unchecked the boxes for a time stamp, labels, an author, comments, and location. I feel this give the post that look of a website instead of a blog. You do whatever you want and click "Save" – if you ever want to change it back, just follow the same directions and re-check the box for it to appear again. Now click "Save Arrangement" in the upper right hand corner and "View Blog" to check it out!

Blogger-Step-37

See? You're getting closer to your FREE wedding website!

Adding a Page and a Favicon

Be sure to swing by tomorrow and learn how to add your first page and adding a favicon! 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!

0 Shares