I said earlier that by turning off the comments, you were eliminating the option to have a guestbook, or to set up online RSVPs. But I was reminded by Morgan that I could probably use Google Docs to set these up. So I decided to play around with it, and I came up with something I like.
If you already have a Google account, all you have to do is sign in to Google Docs to get started. If you don't, signing up is simple and free.
At the top of the screen you'll see the option to "Create New."
For a Guestbook, RSVP, or Playlist Request, choose the "Form" option.
I'll take you through the steps of setting up an RSVP form.
A new window will open up.
Now you just need to fill it out to your specifications. Give the form a title; this will show up in the form. Then go about setting the questions you want. The first I did was "First and Last Name."
Make sure you click the little box to make it a required question. From the "Question Type" pulldown, I chose to use Paragraph Text so they could list all of the names at once.
Now finish filling out your questions.
Anything you type into the "Help Text" box will show up in a lighter gray under the question to clarify. As you can see, there are a few different options for Question Type. I made use of the paragraph text, text, and check boxes. At the top you can click on the Theme drop down and choose a background for your form.
As soon as you have everything filled in, click save at the top. Then click on "More Options" and choose "Embed."
A window will pop up with a link. All you have to do is copy, and paste it into a post. Keep in mind that if you add this to your website after you've altered the HTML to make the left hand links, you'll have to go back in and add it. The order that you place it in the HTML will determine where it shows up on your webpage.
Check out my "fake website" to see what it looks like.
Anything that people submit in this form will show up on your Google Docs homepage. It makes a spreadsheet for each form with all of the responses.
You can do this similarly for a guestbook, or as a Playlist Request. You can see both of these options on the website as well.
Showing posts with label Webpage. Show all posts
Showing posts with label Webpage. Show all posts
Wednesday, November 4, 2009
Turning a Blog into a Webpage: HTML Codes, Part Three
Turning a Blog Into a Webpage, Getting Started, Little Things, Codes Part One, Part Two
Hopefully I didn't lose any of you after the last post. If you're still following along, here are just a couple more things that you may be interested in when creating a webpage.
If you've made it successfully to here, this is what your website should look like.
This next part can be used when building your website, but it may also be useful to any of you with a blog.
Changing the width of your "columns"
As you can tell there are "columns" on your website. There are actually three that you can change if you'd like to alter them a little. The outer wrapper goes all along the edge of the page. It's all the blank space on the left and right. The main wrapper is where your post goes, with the pictures and text. And the sidebar wrapper is the width of the column the links are in on the left side.
To change these go back into your HTML section and find this section. It's towards the top, under the header section.
Right now the outer wrapper is set to 600, the main wrapper is 410, and if you scroll down the sidebar wrapper is something that I don't remember.
You can play around with these numbers, but I changed the outer wrapper to 1100, the main wrapper to 800, and the sidebar wrapper to 220. The larger you make the number for the outerwrapper, the less empty space you'll have on the sides.
So now, the writing area is bigger, and the links are closer to the left hand side. I've done this with my own blog because then it allows me to post bigger pictures, and my long posts don't take up so much vertical space.
Adding a favicon
Right now if you were to look at the address bar of your own website, you would see the little orange "B" blogger symbol before the address. But as you're reading this blog, look up and you'll notice a cute little "T." This is a way to change that B to a different icon of your choosing. This is also fun, because if you save your website as a favorite, that icon will show up in the list.
I already posted about this previously, so follow the directions here.
You can see where the two red circles are that I made my favicon a cute little green heart. This is one of those absolutely unnecessary things, but if you've got time and can figure it out, it's such a cute touch!
So there you have it. If you got to this point successfully you should have a nice website you can use for your wedding, small business, etc. It's free and you have the opportunity to add and personalize much more so than with a typical "wedding website builder." Go check out my "fake website" at http://www.happilyafterallwebsite.blogspot.com/
Again, I'm open to questions if you get lost along the way!!
Hopefully I didn't lose any of you after the last post. If you're still following along, here are just a couple more things that you may be interested in when creating a webpage.
If you've made it successfully to here, this is what your website should look like.
This next part can be used when building your website, but it may also be useful to any of you with a blog.
Changing the width of your "columns"
As you can tell there are "columns" on your website. There are actually three that you can change if you'd like to alter them a little. The outer wrapper goes all along the edge of the page. It's all the blank space on the left and right. The main wrapper is where your post goes, with the pictures and text. And the sidebar wrapper is the width of the column the links are in on the left side.
To change these go back into your HTML section and find this section. It's towards the top, under the header section.
Right now the outer wrapper is set to 600, the main wrapper is 410, and if you scroll down the sidebar wrapper is something that I don't remember.
You can play around with these numbers, but I changed the outer wrapper to 1100, the main wrapper to 800, and the sidebar wrapper to 220. The larger you make the number for the outerwrapper, the less empty space you'll have on the sides.
So now, the writing area is bigger, and the links are closer to the left hand side. I've done this with my own blog because then it allows me to post bigger pictures, and my long posts don't take up so much vertical space.
Adding a favicon
Right now if you were to look at the address bar of your own website, you would see the little orange "B" blogger symbol before the address. But as you're reading this blog, look up and you'll notice a cute little "T." This is a way to change that B to a different icon of your choosing. This is also fun, because if you save your website as a favorite, that icon will show up in the list.
I already posted about this previously, so follow the directions here.
You can see where the two red circles are that I made my favicon a cute little green heart. This is one of those absolutely unnecessary things, but if you've got time and can figure it out, it's such a cute touch!
So there you have it. If you got to this point successfully you should have a nice website you can use for your wedding, small business, etc. It's free and you have the opportunity to add and personalize much more so than with a typical "wedding website builder." Go check out my "fake website" at http://www.happilyafterallwebsite.blogspot.com/
Again, I'm open to questions if you get lost along the way!!
Turning a Blog Into a Webpage: HTML Codes, Part Two
Turning a Blog Into a Webpage, Getting Started, Little Things, Codes Part One
Now it's time for the finishing touch on your webpage. This first part isn't HTML related, and in fact, is quite simple. But you'll need to do it before finishing the project.
Lining up your links in the order you want them to appear, instead of the order you type them
As you write a post, the most recent one shows up first on your blog. For a wedding website, though, you'll want the welcome page to show up first. Or an equivalent. And you'll likely want the links on the left to run in a certain order. You have two options for this. You can type them in starting with what you want last, and ending with the homepage. That's a good strategy, until you decide to add pages after you think you're finished. The other option, is to follow these steps.
Write out all your posts, and don't worry about what order they are in. As you can see, my Welcome page is all the way at the bottom, which means it would show up at the end of the list on the blog.
Then when you're done with that, go into whatever post you would like to show up second. You don't have to worry about the Welcome page because it will have the most recent published date when you're done with this.
Scroll to the bottom of the text box, and you'll see a link that says "Post Options." Click on it, and it will drop down another window of options. At the right, click on the button that says "Set date and time" and then enter a date or time, that is previous to when you wrote the Welcome post. If they were all written at the same time, the easiest thing to do is just enter the previous day's date and a time that is late at night.
As you can see, I put in yesterday's date and 11 PM.
Click Publish Post.
Continue to do this with all of the posts. The next you will do would be the post you'd like to show up third in the links list. Just set it to the previous day's date again, and put in 10PM. Do the same thing with the remaining posts, setting each one back another hour, day, minute, etc. Whichever you'd like to do.
By leaving them in hour increments, it gives you room if you decide to put in another post you'd like to go between the second and third. You can put the time to 10:30 and it will now be the new third link, and all the others will drop below it.
Turning your blog archive into "website links"
Under the line you just entered, enter the following:
Where it says 'websiteoflink' replace it with the website of the link you want. For instance, the first one for my website is the Welcome page. So I would go to my website, click on welcome, and in the bar at the top it would say
http://www.happilyafterallwebsite.blogspot.com/2009/11/sample-post.html
It says sample-post instead of welcome because that was the original title of that post. This isn't a huge deal to me, but just be aware that when you change the title of a post, the web address doesn't change.
So I would insert that whole address into the 'websiteoflink' area, but make sure you leave the ' and ' at the beginning and end of it.
Then where it says linkyouwantdisplayed I put Welcome because that is what I want the link on the left hand side to say.
Repeat this for every entry that you have. If you click on the picture it will enlarge and you can see how I put in every post.
At this point, click save and go look at your website. If you did it correctly it should look like this.
As you can see, the two lines that are highlighted now were in the previous picture, and the space in between is the text you just deleted. Save the template and go look at the website. You should have something that resembles this if you did it correctly.
At this point you can be done if you'd like, your website is now de-blogged. Or you can look out for the final episode of this mini-series. There are just a few more codes to tweak your website, so stay tuned.
Now it's time for the finishing touch on your webpage. This first part isn't HTML related, and in fact, is quite simple. But you'll need to do it before finishing the project.
Lining up your links in the order you want them to appear, instead of the order you type them
As you write a post, the most recent one shows up first on your blog. For a wedding website, though, you'll want the welcome page to show up first. Or an equivalent. And you'll likely want the links on the left to run in a certain order. You have two options for this. You can type them in starting with what you want last, and ending with the homepage. That's a good strategy, until you decide to add pages after you think you're finished. The other option, is to follow these steps.
Then when you're done with that, go into whatever post you would like to show up second. You don't have to worry about the Welcome page because it will have the most recent published date when you're done with this.
As you can see, I put in yesterday's date and 11 PM.
Click Publish Post.
Continue to do this with all of the posts. The next you will do would be the post you'd like to show up third in the links list. Just set it to the previous day's date again, and put in 10PM. Do the same thing with the remaining posts, setting each one back another hour, day, minute, etc. Whichever you'd like to do.
By leaving them in hour increments, it gives you room if you decide to put in another post you'd like to go between the second and third. You can put the time to 10:30 and it will now be the new third link, and all the others will drop below it.
You can see here how the order has changed from the first picture. The posts are now in the order I'd like for them to show up, even though I wrote them in a different order.
And as you go to the website, the Welcome page is the first thing you see.
And on the left, the links are in the right order. But it is still listed by date, and it saves 2009, blog archive, etc. Clearly, you're still looking at a "blog." The next step will take care of that problem.Turning your blog archive into "website links"
This is the look we're trying to achieve. All you see on the left are the links to take you to another page, just like you see on a typical website.
First thing you need to do is click on the Layout tab and go to Edit HTML. There is a small box at the top of the text box that say "Expand Widget Templates." You need to click on this to get to the section we need to be in.
Now may be a good time to save a copy of your template, if you'd like. Just in case you mess this up horribly, you can upload everything you had saved up until this point. That option is at the top of the page.
Scroll down until you find this section, it's towards the very end.
Of the three highlighted lines, erase the bottom one and replace it with the following:Under the line you just entered, enter the following:
Where it says 'websiteoflink' replace it with the website of the link you want. For instance, the first one for my website is the Welcome page. So I would go to my website, click on welcome, and in the bar at the top it would say
http://www.happilyafterallwebsite.blogspot.com/2009/11/sample-post.html
It says sample-post instead of welcome because that was the original title of that post. This isn't a huge deal to me, but just be aware that when you change the title of a post, the web address doesn't change.
So I would insert that whole address into the 'websiteoflink' area, but make sure you leave the ' and ' at the beginning and end of it.
Then where it says linkyouwantdisplayed I put Welcome because that is what I want the link on the left hand side to say.
Repeat this for every entry that you have. If you click on the picture it will enlarge and you can see how I put in every post.
At this point, click save and go look at your website. If you did it correctly it should look like this.
The links at the top have replaced the previous words "Blog Archive." At this point you still have the archived links below it. Now we'll remove those.
Go back into the edit HTML section. Scroll a little above the section we just edited. Look for the following:
Now delete the highlighted section. You'll be left with this.As you can see, the two lines that are highlighted now were in the previous picture, and the space in between is the text you just deleted. Save the template and go look at the website. You should have something that resembles this if you did it correctly.
At this point you can be done if you'd like, your website is now de-blogged. Or you can look out for the final episode of this mini-series. There are just a few more codes to tweak your website, so stay tuned.
Tuesday, November 3, 2009
Turning a Blog Into a Webpage: HTML Codes
Here's where we start altering the actual template that blogger provides. We'll be working inside the HTML of the template. These first few changes are relatively simple, and you shouldn't have any problems manipulating the blog. Just be sure you're making changes in the right section, and that you're typing in the changes exactly as I've shown them.
Removing the "older post" and "newer post" links at the bottom of each post
Click on the Layout tab and go to "Edit HTML" Scroll down until you find the comments line break.Find the section that looks like this:
Make the following changes.Be aware that it is displayspace:spacenone; Don't delete the bracket on the next line either.
This tells the browser not to display those links. Click "Save Template" and refresh your website.
The older, newer, and home links are no longer there, like in the first picture up above.
Remove the link that says Subscribe to Post or Comments
You'll turn this off in the HTML section of the Layout tab as well. It will be located immediately under the changes you made with the older and newer links.
Make the following change and click save.
Removing the blue navigation bar at the top of the page
This is the search bar that blogger puts in at the top of your blog, to allow for easy navigation. You definitely don't want to have this if you're trying to pass your blog off as a website.
Go to the edit HTML section under the Layout tab again. Find the the header section:
Anywhere after the dashed line, before the next section you'll want to insert the following:
#navbar-iframespace{
visibility:spacehidden;
}
I just put it right at the end of the section before the next dashed line. Click save, and your website will now look like this.
(From this point on, my website will look like yours, instead of having the links on the right.)
The next post will take you through turning the left side into links, instead of being a blog archive. This is the part I had the most trouble with at first, so I'm going to devote a whole post to it, so I can make it very detailed, and hopefully you won't have any troubles.
Make sure as we go if you need anything clarified that you let me know.
Turning a Blog Into a Webpage: Little Things That Make A Difference
Turning a Blog Into a Webpage, Getting Started
Here are some very easy steps that you can take to make your blog look more like a website. The following things don't include any HTML codes, all you have to do is play with your settings a little.
Please note one more time: for the following pictures, my links are on the right side, instead of the left like yours will be. Eventually the pictures will catch up, and I'll have my links on the left side. Make sure though that your links are on the left side from the beginning! If you have to change your template in the middle of all this, you'll have to start all over like I did. So be sure you pick the left template from the beginning.
Turn off your comments
You don't want your guests to be leaving comments all over the website...it will get messy.
This one's easy. Just go to the dashboard and under the Settings tab click on the "comments" link. Simply change it to hide instead of show, and save it.
Remove your "About Me" and "Followers" section from the sidebar.
I chose to remove both of these using the "page elements" link under the Layout tab. Just click edit on each one, and either remove or choose to have it not shown. On a brand new blog, the "About Me" section isn't even there, so you just need to remove the "Followers" widget. Leave the "Blog Archive" there.
Add your blog to our listing?
Under the basic settings you have the option to answer no to this question. This will keep your website private and off of Blogger's listed blogs. You can also disable letting search engines find you. Just change both options to no, and then save.
Removing the Footer
This is the section at the bottom of a post that will say "posted by jane at 10:54 am, 0 comments"
To get rid of this, go to the "page elements" section of the Layout tab and click on edit in the blog posts section. Simply uncheck all of the boxes so nothing will show up under your post.
As you can see here, the posted by section is gone.
Change your settings to only show 1 post per page
This will allow you to have one post at a time show up. For example, a welcome page, accomodations, ceremony, etc.
You can either change this at the same time you change the posted by section ,shown above, or this can be found in the formatting section of the Settings tab. Simply change the number of posts to be displayed to one.
Here are some very easy steps that you can take to make your blog look more like a website. The following things don't include any HTML codes, all you have to do is play with your settings a little.
Please note one more time: for the following pictures, my links are on the right side, instead of the left like yours will be. Eventually the pictures will catch up, and I'll have my links on the left side. Make sure though that your links are on the left side from the beginning! If you have to change your template in the middle of all this, you'll have to start all over like I did. So be sure you pick the left template from the beginning.
Turn off your comments
You don't want your guests to be leaving comments all over the website...it will get messy.
This one's easy. Just go to the dashboard and under the Settings tab click on the "comments" link. Simply change it to hide instead of show, and save it.
Remove your "About Me" and "Followers" section from the sidebar.
I chose to remove both of these using the "page elements" link under the Layout tab. Just click edit on each one, and either remove or choose to have it not shown. On a brand new blog, the "About Me" section isn't even there, so you just need to remove the "Followers" widget. Leave the "Blog Archive" there.
As you can see on the right side of the blog, the followers section is now gone, and there is no longer the option to "follow this blog."
Add your blog to our listing?
Under the basic settings you have the option to answer no to this question. This will keep your website private and off of Blogger's listed blogs. You can also disable letting search engines find you. Just change both options to no, and then save.
Removing the Footer
This is the section at the bottom of a post that will say "posted by jane at 10:54 am, 0 comments"
To get rid of this, go to the "page elements" section of the Layout tab and click on edit in the blog posts section. Simply uncheck all of the boxes so nothing will show up under your post.
As you can see here, the posted by section is gone.
Change your settings to only show 1 post per page
This will allow you to have one post at a time show up. For example, a welcome page, accomodations, ceremony, etc.
You can either change this at the same time you change the posted by section ,shown above, or this can be found in the formatting section of the Settings tab. Simply change the number of posts to be displayed to one.
Next up, we'll get into some of the more detailed steps that involve HTML codes you can take to finish turning your blog into a webpage.
Turning a Blog Into a Webpage: Getting Started
Turning a Blog Into a Webpage
This first part is just getting the blog set up and changing fonts and comments. This could be useful for any of you starting a new blog, or giving your own a facelift. I'm going to take you through the steps I used to create my "fake website" which I'll share with you at the end so you can see how it works.
Create a new blog
Blogger gives you the ability to have multiple blogs at one time. So if you're already blogging, all you need to do is create a new one.
Click on "Create a Blog" on your Blogger Dashboard home page.
Follow the steps, and choose a new name for your blog. Make sure it is one you're happy with, because if you decide to change it towards the very end of this process, it will mess up some of your html codes. So pick one you're happy with!
The next step is to choose a template. The window will look a little different from this picture, because I chose the wrong template in the beginning.
If you want your links to show up on the left side, like most websites do, then choose the "Minima Lefty." Make up your mind now, because as you get farther along, you don't want to switch and redo all the HTML codes. As you'll see in the coming pictures I accidentally chose a template that had the links on the right side, and I had to redo the website halfway through.
This first part is just getting the blog set up and changing fonts and comments. This could be useful for any of you starting a new blog, or giving your own a facelift. I'm going to take you through the steps I used to create my "fake website" which I'll share with you at the end so you can see how it works.
Create a new blog
Blogger gives you the ability to have multiple blogs at one time. So if you're already blogging, all you need to do is create a new one.
Click on "Create a Blog" on your Blogger Dashboard home page.
Follow the steps, and choose a new name for your blog. Make sure it is one you're happy with, because if you decide to change it towards the very end of this process, it will mess up some of your html codes. So pick one you're happy with!
The next step is to choose a template. The window will look a little different from this picture, because I chose the wrong template in the beginning.
If you want your links to show up on the left side, like most websites do, then choose the "Minima Lefty." Make up your mind now, because as you get farther along, you don't want to switch and redo all the HTML codes. As you'll see in the coming pictures I accidentally chose a template that had the links on the right side, and I had to redo the website halfway through.
Click on the link and you'll be ready to begin.
Here's what the website will look like to start.
(Last time I promise, but remember that all of your links and extras will be on the left side of the page.)
Changing your fonts and text
Go to the Layout tab at the top of the page, and click on "Fonts and Colors."
They don't give you a lot of color options in that small grid, so instead, you can enter a color hex code into the box. The website has a chart of different colors with their code next to it.
Play around until you find the right color combination for you. I would recommend keeping your font a dark color so it is easy for everyone to read. Also, don't go with a neon color for your background, it can be obnoxious to look at.
Adding a title banner to the top of the page
You can leave the header the way it is, with simple text, or you can create a banner of your own. Just create a picture in your program of choice. I found that the best size to make it is, 2.17"x1.00" This will allow it to fit perfectly in the border at the top, and not to stretch outside of it.
Click on the Layout tab, and go to "Page Elements." Click edit in the header section and a new window will open up. Click browse and find your image from your computer. Then under Placement, choose "instead of title and description." This will place your new image in the header, instead of the Blog title. Then click save.
The image I used was smaller than 2.17"x1.00" If you used those dimensions, the image would fit right inside those blue lines.
These are probably things that most of you already know. The next post will start to get into the details that will take what currently looks like a blog, and begin to transform it into a website.
Subscribe to:
Posts (Atom)




















































