Why choose Blogger?
- It's free, speedy and stable.
- It's highly customizable and extensible. That's what we need to make a Wedding page as beautiful as we want.
- Compare with other Wedding site services, it never expires or has space limitation.
- We can make not only a wedding information page but also a blog to memorize special events of our marriage.
- HTML & CSS programming.
- Blogger template understanding (you can reference here).
- Web graphic design (know to use a photo editor such as Photoshop).
Step-by-step (for new Blogger interface-Blogger in Draft)
Step 1: Sketch your design
Example: A Wedding page with a banner on top, a menu on left, content of a page on right and a copyright text at bottom like this picture:
Step 2: Prepare images
Design your website interface, separate top image, background image, bottom image, left, right images, flash images and other stuffs...
Step 3: Make HTML website preview (optional): this step is to help you make a Blogger template easier, you can bypass it if you know how to make Blogger template well.
Step 4: Add pages (such as: About Us, Wedding information, Guest book, Photo Albums, News, Love Story, Our Proposal, Map of Events, Wish List, Honeymoon, Anniversaries, Our Registries, Our Wish List, Our babies...)
- Go to Pages > create a new page. In Page Options, set Reader comments to Allow or Don't allow as you wish.
- If you want somebody not having Blogger account to comment, go to Settings > Posts and comments > Who can comment? > choose Anyone.
- Notes: Homepage / main page of the website is blog posts page.
Configure number of posts on main page, hide/show other elements as you wish: Layout > Page Elements > go to Blog Posts element, click Edit. Configure options then click Save.
Step 7: Make Template XML file
Use existing Template XML file to make new template quickly. Here are some CSS code to hide what you don't want to show on website.
- Hide navigation bar:
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
} - Hide Posts Atom:
.blog-feeds {
height:0px;
visibility:hidden;
display:none
}
- Hide Blogger pager:
#blog-pager {
height:0px;
visibility:hidden;
display:none
}
- Hide Post title if you want:
.post-title {
height:0px;
visibility:hidden;
display:none
}
- Hide Feed Links:
.feed-links {
height:0px;
visibility:hidden;
display:none
}
Here are 2 ways to do this:
- Add Blogger Pages gadget to show all page links automatically.
- Make your own menu of pages: copy URL of each page created at Step 4 to make menu links. For example: Photo Albums page URL "http://bloggerwedding.blogspot.com/p/photo-albums.html" => HTML code: Photo Albums. Paste this code to where you want to place in template.
Go to Template > click Edit HTML > Paste new template code to Edit HTML text box > click Preview to review and Save when done.
Step 9: Add other stuffs
You can add stuff as a gadget or make HTML code in template.
- Wedding countdown tickers: http://daisypath.com/
- Pregnancy, baby and parenting tickers: http://lilypie.com
- Page counters:
- Histats http://www.histats.com/
- ClusterMaps http://www.clustrmaps.com/
- Statcounter http://www.statcounter.com
- Simple hit counter http://www.simplehitcounter.com
- Photo albums: you can use the Picasaweb, Flickr, Photobucket or other Image hosting services to host your wedding photos. Set Photo privacy to Anyone with the link if you don't want to show on public officially but can still embed it in your own website.
- Slide shows: Slide.com
- Videos: Youtube. Set Video privacy to Anyone with the link if you don't want to show on public officially but can still embed it in your own website.
- Polls: Add Blogger gadget "Poll".
- Contact form: see http://skyofflowers.blogspot.com/2009/07/contact-form-for-your-website.html
0 comments:
Post a Comment