DIY Wedding Websites with Lesley! | The Budget Savvy Bride
The Budget Savvy Bride

Hello cupcake!

I’m going to share with you how I put together my own DIY wedding website. For me, having a website was essential…we have so many guests coming from out of town (and out of country!) that we needed a place to provide people with travel info, maps, hotels, and the like. Rather than overwhelming the back of the printed invitations with all these details we decided to put together a simple site that would be a go-to place for our guests. There are lots of big-name wedding webpages that will allow you to make your own wedding site for free, but you’re restricted by their designs and features. I wanted the creative control to design it myself, and that’s why I used Blogger . I could design the site the way I wanted it, and it’s FREE! Woot! The trick, however, was making the site look like a custom static webpage, and not like a typical blog. Here’s the finished product:

There are other blogging sites that would work for this purpose too, like WordPress. However, I’m using Blogger as the example because I’m familiar with it. I have no experience with web design or HTML, but with a little trial and error I pulled together a cute little site that I’m super happy with! Here’s how I got from boring blog to fancy finished product:

1. Sign up with Blogger and create your free blog. Choose a name that makes sense and is easy for people to remember, like fraserwedding.blogspot.com or justinandkrista.blogspot.com.

2. Use Blogger’s Template Designer and choose a simple, minimal template. This will give you more room for customization since you’re not stuck with someone else’s (potentially tacky) design elements.

3. Continue customizing colors, layouts, and fonts with the Template Designer. In here you can change font sizes, colors, background image, and layout of your site. I chose to have a white background, black and grey text, with a darker grey accent text for links. This is a great place to feature your wedding colors to give your guests a feel of what’s to come on your big day.

4. Find the Design tab to edit the page elements on your site. My site is quite simple, with just a header at the top; links to individual pages below that; a welcome message; a countdown clock, and an image of our save-the-date card. Blogger has lots of options – search for inspiration on other sites and choose what you like best! Blogger allows you to add new elements, remove ones you don’t need, and customize them too.

5. Make a header for your site. If you don’t have fancy photo editing software like Photoshop , there are free online options like Picnik . You can alternatively just have text at the top of your page to keep things simple. Just make it clear who you are and what your site is for.

6. Create your Pages. This is the “meat” of your site, where all the info is for your curious guests. Blogger’s Pages are the BEST THING EVER! They allow you to create static “pages” that you can link to from your homepage. On my site there are pages for RSVP, TRAVEL, MAPS, MOTELS, REGISTRY, VENDORS, PHOTOS, and CONTACT. Blogger allows up to 10 pages, so think about what would be most helpful for your guests. To make a new page, go to the Posting tab and select “Edit Pages”. You can then choose to have your pages link across the top (like I have) or have them link in a sidebar.

7. See things you don’t like? A little creative Googling will help! Blogger had some things I didn’t want on my site, like a search bar across the top (called the NavBar), a link at the bottom of the post that said “No Posts Match Query”, and attributes to the template designer. Spend some time Googling how to remove these, and you’ll find sites that will give you HTML code to change or remove them. Don’t be intimidated by this! I promise, pretty lady, you can do it! In the Design tab, simply click on “Edit HTML” and either copy in the new code where you’re instructed to, or delete part of the code that you’re instructed to. (The “Find” option in your browser really helps here to find the specific bits of code you’re looking for!) The nice thing here is that you can preview your changes, so if you’ve totally biffed up your blog you can “Clear Edits” and get things back to how they were. You might also want to save a copy of your template on your hard drive before you start messing with the HTML…again, if you totally biff it up, you can just upload the saved template and restore your original settings.

Good luck my dears! Jump in and have fun with it! Do you have any troubleshooting issues that you need help with? Or do you have specific questions that I haven’t answered here? Leave ‘em in the comments and I’ll do my best to point you in the right direction.

    • Sandy
    • October 1st, 2010

    Such a good idea!!! I didn't know Blogger had added the Pages feature – thanks for this! I'm creating mine right now :)

    • JK
    • October 1st, 2010

    What font did you use for your site? It's super cute! I'm using Blogger as well and it's great because my fiance can help build it as well!

    • Krista
    • October 1st, 2010

    i think justinandkrista.blogspot.com is the perfect wedding site! hehehe…

  1. THANK YOU!! :) Haha this is just a perfect idea. <3 it!

    • Denise
    • October 4th, 2010

    Your site looks amazing! Can you let me know where you got your countdown ticker from? Also do you know if you can enable the comments section in just one page but not all of them? I can't seem to figure it out! I want to add a page where people can give us song suggestions.

    • Ashley
    • October 7th, 2010

    I had no idea you could do this!! And your site looks great! As soon as i read this, I went right to my blog and started adding pages, directions (you are so right, this is going to blow the pants off those wasteful inserts in the invites), hotels, photos. It's so awesome!! Thanks!!!!!

    • @lesleydenford
    • October 7th, 2010

    Hey guys! Thanks so much for your comments. Sorry I haven't responded sooner, I didn't even see that this post was up! SO SORRY! Anyway, read below and I'll try to help…

    @Sandy – Woot! Can't wait to see the finished product!

    @JK – I used a couple different fronts. The main title font is called "Peas Stacy Fancy" from this awesome site: http://kevinandamanda.com/fonts/fontsforpeas/, and the secondary font is called "Mighty to Save" from http://www.dafont.com/. You can find some SERIOUSLY cool free fonts online!

    @Krista – yeah, but too bad it's taken. PS. I'm sure you realized that I put that name in just for you… :)

    @Denise – I can't remember the exact site, but if you do a Google search for something like "blogger countdown clock" you can find a few options. Then, you just add the HTML/Java Script gadget to your template and paste in the code. As far as the comments go, I don't think you can only have it one one page. But, I've never tried to change it, so you might want to do a little googling and see what you can find. :)

    @Ashley – YAY! Save yourself some money on postage. :)

    Good luck gals!

    • @lesleydenford
    • October 7th, 2010

    @JK – sorry, just realized that first link doesn't work. Here's the right one: http://kevinandamanda.com/fonts/fontsforpeas/

    • Amy
    • October 7th, 2010

    Hey! What a great idea!! I've been researching for a cool wedding website! I wanted something unique and fun! I think this is perfect. where did you get the little picture frame in the corner?

      • @lesleydenford
      • October 7th, 2010

      I just did a Google image search! I was searching for things like "vintage black picture frame". So the image is not mine, but for personal use only I think it's okay. (If I'm wrong about this, someone please let me know so I can give credit for it!) PS. I like that you can also tell Google only to show you medium or large images – sometimes the small ones are too small for use.

    • Claudia
    • October 11th, 2010

    Thank you so much for the information, Lesley! You're inspired me to take a different approach instead of the generic, cookie cutter wedding websites. I checked out your wedding website and I love what you did. Wonderful ideas!

  2. this is a BRILLIANT tutorial. good work. we'll definitely be using this…disappointed with the wedding website services out there!

    • Leah
    • November 17th, 2010

    Argh – having issues figuring out how to get my cute fonts into blogger – have googled again and again and there are so many responses – how did you do it?

    • Lizzie
    • November 24th, 2010

    Does anyone know if there is a way to put some sort of RSVP application into a blogger page? I was hoping the website could function as an online place to RSVP, as I have seen on wedding websites in the past…

    Any ideas?

      • Charisse
      • March 8th, 2011

      I was thinking the same thing!

    • worksrightapp
    • February 25th, 2011

    I am not yet engaged, as i read your article it share good information for me to prepare when my time comes.

  3. Blogger is a good option, but WordPress.org is even better. If you build a wedding site on your own domain and use WordPress, you will be able to personalize and customize it even further. With a huge array of widgets and plugins to choose from, there's no limit to the amount of features you can add to your site. You can learn how to easily build your own wedding website using WordPress in only 10 steps with this guide:
    http://www.makingyourownwebsites.com/wedding

    • charisse
    • March 8th, 2011

    Hi! I love your blog post. I'm new at this can can't figure out how to use the downloaded fonts (I downloaded Peas Stacy Fancy and Might to Save) on the Template Designer? They don't seem to be showing up.

    Any suggestions would be greatly appreciated!