Sometimes a plain website — not a blog — is exactly what you need when you have a finite number of pages that you want to share. If your information doesn’t need to be updated, a blog could be over-kill. A website would be ideal for the following:
1. A personal directory page sometimes called a homebase landing page that consolidates links to all your blogs, social networks and businesses. Think of this as your public profile page. Examples: 1, 2, 3
2. A page to sell a couple of items. Susannah Conway and Marisa Anne converted a WordPress installation into a one-page website to present their podcast (designed by Jo Klima of The Darling Tree).
3. Wedding websites
4. Party info, map/directions, etc.
In my case, I created a website using Blogger to present a menu of blog layouts. Blog software is versatile!
Blogger is ideal for creating small websites
Even though Blogger is primarily used for Blogs, it’s also adaptable to building small websites. There are many plusses to using Blogger for this task.
- It’s free. You save money because you don’t have to pay for web hosting services and you don’t have to buy a domain name (unless you want to).
- Blogger is one of the most reliable services on the web — it’s got Google backing it up. You don’t need to worry about keeping your server up, down-time, and any kind of administration problems.
- It’s simple. Using Blogger’s GUI and a few lines of CSS, you can convert Blogger into a static website in less than 10 minutes (this does not include Photoshop work — you can spend an infinite amount of time doing that. It took a dozen design incarnations and 2 days to finish my simple webpage).
Anyway, I created a one-page website for myself. My goal was to create a blank slate with no widgets, no footers, no sidebars, no image drop shadows — nothing but my stuff. I’ll show you how I did it in the screencast below. Best viewed in fullscreen, HD, volume ON. If the tutorial is not your kinda thing, it’s still worth watching for the music alone. THANK YOU, Allen Coté.
Need to review CSS? Check out my Web Basics tutorials. How about a Firebug review? I used Firebug in these screencasts: Banish Drop Shadows, Horizontal Nav Bar Part 3.
Oh by the way, if you’re wondering why I’m not recommending Google Sites, which is also free, it’s because it’s not as easy to customize and I want to do things the easiest way possible.
stationery textures tutorial
wallpaper collaboration with the graphics fairy (tutorial + free download)
distressed overlays (premium)
vintage polaroid (Allen Coté photo) by fuzzimo
faraco hand from dafont
typewriter basix from myfonts
script bt from myfonts
cheap pine from myfonts
belinda from myfonts
{ 43 comments }
that’s super clever, thanks.
to make your little tab images clickable is that done with some css code?
Great stuff,! Thank you!! How did you create the Css for your links on the right of the page pls?
Ace! I’m definitely going to make a static landing page too. Fabulous tutes – thanks.
how exciting! I had no idea! Not that I need a static website or anything, but good to know still! It’s also interesting what you say about blogger. everyone is so negative about it, especially after the big three day outage (which admittedly was a bit ridiculous. You’re google. just throw engineers at the problem!). I think I may move to self hostedf wordpress in the autumn, mainly because the blogger commentiong system is just awful, and siqus which i use now is so unreliable. But I do worry that if there’s any technical problems, I’m on my own. At least with blogger there are millions of others in the same boat.
Oh, man! I need to find more ways of saying \You Rule!\.
Thank you for this amazing tutorial. I am going to give it a try right now.
Oh, and I love your fiddle farting. Ha :-)
Excellent post! I’ve been wondering how to do this for a long time. Your blog is wonderful – I always learn so much. Thank you!
I love your landing page, Katrina! I wanted to set up something similar with my new blogsite because I think it has a more professional feel to it. Wish I had seen this sooner!
Oh, can’t wait to play with this idea! Thanks for sharing – your site is wonderful!
what a great tutorial. hah! glitter pimp. love. :)
wow, it’s kinda like you read my mind! fantastic tutorial! i’ll send you a link once i’m finished :)
i’m glad you guys enjoyed this — thanks for the feedback. :)
@rose: yes, please send it to me!
@franca: i know — that outage was ridiculous! blogger was offline for a while this year. But there have been many years when blogger’s uptime was 100%. check out this interesting article at techcrunch which tested the 5 major blogging services (tumblr, posterous, typepad, wordpress.com, & blogger):
http://techcrunch.com/2010/12/20/report-blogger-most-reliable-blogging-platform-as-tumblr-tumbles-on/
happy happy friday, guys! :D
Looove this! I totally need to make one because I have a blog, youtube channel, twitter, tumblr, facebook fan page, google plus, the list goes on!!
So many thanks, Katrina.
What a good & inspiring idea !
I enjoy reading your posts ; that’s so a pleasure.
Thanks for sharing your knowledge.
Read you soon.
Hi Katrina!
You know you’re absolutely brilliant, right?
This tutorial was exactly what I needed!
Thank you so much :)
xx
(I hope you like what I’ve made! http://rosiechoppin.blogspot.com)
Fantastic! Off to work this weekend :)
Katrina -
I love your blog – so insightful. I am currently working on trying to start a blog myself. Your tutuorials have been great – this one was just what I needed. Just one question – how did you link up to your other pages from the main page? Did I miss something?
Thanks so much.
@stephanie, @peggy — your’re welcome!
@Michelle Miller: hey Michelle, I used an image map for my links and I show how to create one in the following screencast. hope it helps:
http://www.puglypixel.com/2010/11/17/pixel-pointers-image-maps/
@Rosie: WOW, you’re fast — I LOVE what you made, Rosie, thanks for sharing your site! :D By the way, I just realized that i had forgotten to cover the content-inner class. Please add this to your CSS to center your website:
.content-inner{padding: 0; /* removes excess padding */}AND, here’s the CSS I covered in the screencast:
.title,.blog-pager,#Attribution1,#navbar{display: none;}
.footer-outer{border-top:none;}
.post-body img{-moz-box-shadow: 0 0 0;-webkit-box-shadow: 0 0 0;box-shadow: 0 0 0 0;padding:0;}body{background-image:url('YOUR_URL'); /* optional */}This is fabulous! Thanks so much
I almost have no words for how amazing this is and EXACTLY what I needed right now! thank you sooo much for all you do. :)
you’re amazing!! i can never get enough of your wealth of knowledge. thanks so much for sharing.
the first 2 songs of the screencast had me thinking i was soaking up the sun in hawaii!! :)
That was really interesting! I turned my site into a blog-static hybrid earlier this year and figured out a lot of this stuff by trial and error, but your method will help me streamline parts of it. I was wondering if you have any idea how to disable the header from linking back to the blog main page? I’m using the header, but my home page is different from the blog home so I don’t want it to be clickable. I don’t know if that’s possible, but thanks in any case!
@Joumana: Remove the default banner and then add it back as an HTML widget. That way, you can set your own URL. Hope that helps.
This is amazing!! This is exactly what I’ve been looking for!! Thank you!!
<3 Kelly
This just seriously changed my life. I was just about to hire someone to do this! And now I can do it myself. It was soo easy. Thanks a lot for all your help. I will be sure to link back to you when everything goes live:)
besitos,
rebecca
heehee…”For Lulu Whenever I May Feed Her” refers to our fat cat. She always begs Allen for food but he’s never the one that feeds her! Her name is Lulu….
@kate: i love learning about the history behind names. thanks for sharing that bit of trivia!
You are the BEST, you know that, right? :)
Thank you soo much for this tutorial. I am helping a school for visually challenged kids here in India re-design their website (and I am an HTML novice!), and this tutorial is an awesome start to the site.
i am finding this SO helpful!!
Thank you SO much! I have been searching for a few hours to find a way to create a landing page for my blogger blog. Because I would like to have one page to link to my blog/shop/facebook page! I couldnt find anything that seemed helpful, until I finally came to this post! So thank you! I do just have a few questions.. hopefully I dont sound totally idiotic!
So this is probably obvious.. but I just need to make sure. So this static page is a who new blog separate from your regular blog right?
And for THAT static/landing page you bought the domain name, correct? Because I have been wanting to turn my blog into a dot com but was curious about a landing page for it. I hadnt bought my domain name yet because I was so confused about the landing page thing. From what Im understanding is the the “dot com” page would not actually be the same as my blog.. it would be for my landing page.. which would then link to my blog as well as my shop and facebook? Is that right?
I guess I was just worried that if I switched my blog to a custom domain then I wouldnt be able to have a landing page. So I should create another blog to buy the custom domain for to use as my landing page. Right? lol ok now I feel silly I think I just asked the same question 3 times in different ways! Oye… as you can tell I am just a little confused on how I should do it. Point is.. I want a custom domain (agapelovedesigns.com rather than .blogspot.com) to use for my business cards. But I also need a landing page so that when people go to my custom domain they can go to either my blog/shop/facebook.. obviously.. as I mentioned before. haha
Thank you so much!
~Maria-Isabel
Thank you…This is a wonderful tutorial – the only thing that didn’t work is that when I added a background image the lower half of the page is white even though I have all backgrounds set to transparent. Obviously I did something wrong! (I haven’t made the page public yet so I can’t show the example)
seriously katrina…. you are beyond amazing!!!
You’re the best – I did it!!!
Thanks – can’t wait to check out the rest of your tutorials.
♥
@geri: glad you got it!
@Maria-Isabel: Yes, the static website is separate from my blogs. I bought a domain name (katrinatan.com) for my static website/landing page. Yes, you are right: from your static website, you will create links to your other websites (like your blogs, shops, social networks, etc.). So, when you’re ready to create your static website, please “create a new blog” in blogger and remove all the blog characteristics (as I did in the screencast). I hope this helps.
This is awesome!
One question- I have a lot of white space at the top of my “post” on my new static page after I have added my image. How can I fix this?
You can see what I am talking about here:
http://www.katiecompanywebsite.blogspot.com
Thank you, thank you, thank you Katrina!!! Thanks to your tutorial, I was able to make the cutest little site!
http://marissabreanna.com
The only question I have for you is, and I made my image as small as possible, is there a way for me to remove the scroll bar? Thanks!
♥ M
@Katie: I just looked at your site and it looks fantastic. Q: do you wish to remove all the white space (as in no top margins)? If so, i recommend that you use the Firebug browser plugin to determine the blocks that you need disappear — make note of the classes and id names. Then, go to your css and add display:none as an attribute to those blocks.
@Marissa Breanna: Please maximizing the layout width.
Thank you, thank you, thank you!!!
I am definitely going to try this.
Hi Katrina! This is so awesome: I made a static page this afternoon thanks to this tutorial. Just one question: how do I make the header space less deep. Its just too much headspace on my site. I figure there must be a quick fix to this.
Dear Katrina,
thnx a lot for this tutorial. With your help and much fiddling over the last couple of days (or should I say nights!) I managed to make a site for my small business soon to be, Klick! (http://klickfoto.blogspot.com/)
I had to do some things different as blogger didn’t let me change eberything like you did in the CSS, so I used HTML code in the blogpost itself instead. I will try to add a background later.
I even managed to link to the ‘Impressum’ (disclaimer) by writing a second blogpost, linking to it from the ‘static site’, while making the first post sticky.
I would love to have the post a bit more to the top of the pager, but I guess thats where the header and the pos’s title would be, and that I can’t change that.
Again, thanks a lot for sharing!
Keep up the good work!
Greetings from Hamburg, Germany, Maja
Hi Katrina!
This is a great tutorial! Thanks so much!
I know you usually only do Blogger tutorials, but I would LOVE to know if you would be willing to do, or have done, or can point me in the direction of someone who can show me… how to create a “landing page” for a wordpress website?
Love your site!
@Alexandra: i found this tutorial via google. hope it’s what you’re looking for. an alternative would be to create a good ol’ static HTML webpage (that you would store @ your web hosting provider) and then provide links to your social networks/sites from it.
Hi Katrina!
I recently found your site and I am so thankful! I was considering using my hosting account to host my portfolio website, but I was going to have to design the site from scratch…something that I could use practice on :)
Instead I followed your tutorial and am giddy with the results! I completed my portfolio website in 3 days thanks to you!
I will definitely be forwarding your blog to others.
Thanks again for being so generous!
http://www.Shift-L.com
This is exactly what I was looking for. I will create a static site for me and post the link here. Thanks for sharing such a great blogger tweak.