Search This Blog

How To Create Static Home Page Website with Blog using Blogger?


how to create a static website using blogger
Blogger is a blogging platform from Google and is meant for blogging. Quite obvious, right? So it has the typical front page that displays list of posts published from newest to oldest. If you are asking how to create website using Blogger, read on.


Usually, to run websites we need a domain name and a host to host the website files to run the website, for which we need to regularly pay for hosting and domain name. If you are planning to create a basic website to display basic static contents and a blog, Blogger can be used to do away with the hosting fee. Since Blogger is hosted by Google and website files such as photos are hosted on Google Photos/Picasa Web, there is not need to pay for hosting. The only thing that is required is a domain name if you want a website name without the "blogspot.com" at the end of the website URL. We'll see how to setup custom domain name for Blogger at the end of this post.

To make Blogger blog look like a website, we need to do away with the default posts frontpage and display a static page instead. There are different approaches as you may find on the internet from other sources, but the custom redirect is the safest and easiest, no code changes required.

So, let's get started.


1. Create a static pages
  • Blogger > Pages > New Page.
  • Name it "Home"
  • Add any other pages you like, such as About, Contact etc. 
  • In each page you create, disable comments from the "Page Settings" on the right if you so desire.

creating pages in blogger
Create Pages in Blogger
disable comments in blogger pages
Disable Comments in Blogger Pages

 After creating the pages required, the next step is to create a navigation menu so that users can access your pages.

2.Blogger > Layout > Add Gadget > Pages
  • Uncheck the default "Home" (Shows boxed) and check the home page you just created. 
  • Also check other pages you'd like to display if you created in the "Pages to Show" list
  • Drag the Menu Items to reorder.
  • Click Save to Save it.
blogger pages to show and order

3. Blogger > Layout > move the pages gadget to a region where you want to display it. Preferably, on top below the home page banner and site description. Or on sidebar.

4. Set the home page to the blogger addresss
Next, we need Blogger to show the home page clicked and when the blog address is entered in the browser. To set the home page, do the following.
  • Blogger > settings >search preference >custom redirect
  • Open the home page your created in another tab.
  • Copy the link/url of the home page you created from the browser's address bar.
  • Paste the home page address in the "From" field of the "Custom Redirect"
  • Save it.

blogger setup custom redirect
This allows the user to go back to the Blogger home page when "Home" is clicked or when the blog url is entered in a browser.

5. Display the blog posts
Till now, we have a few static pages and we have setup the navigation menu as well. But where are the blog posts? If you can to display the blog posts, do the following:

  • Go to Blogger > Layout
  • Click EDIT on the "Pages Gadget"
  • Click "Add External Link"
  • Name it "Blog"
  • Enter Web Address (URL) as http://yourblog.blogspot.com/index.html 
  • Save Link
  • Reorder if required
  • Save
 There should be a menu item called Blog, which shows the blog posts. 

So we have created a website with static pages and a blog using Blogger. If you can to add a contact us form in the Blogger website, you can also do so by adding the confirm form gadget. See the tutorial below.

Add a contact page/contact form in Blogger:
http://techubber.blogspot.in/2015/03/blogger-tips-how-to-add-contact-us-page-in-blogger.html


Setup  custom domain for Blogger:
Another things you might want to do is to setup Blogger to use a custom domain name instead of the URL with "blogspot.com" in it. See here how to setup and redirect Blogger to Custom Domain Name - http://techubber.blogspot.com/2016/06/how-to-setup-and-direct-blogger-to-custom-domain-name.html

How to host other files in Blogger?
Blogger cannot host other files except for pictures used in the blog posts. To host other files such as documents, audio, video etc. you need to explore other storage. You can use other Google services for documents, audio, video etc.

1. Document: Upload the documents to Google Drive, get the sharing link and use it in Blogger post to let users view or download the documents.

2. Videos: Upload videos to YouTube and embed the YouTube videos in Blogger posts. To embed YouTube videos to Blogger blog post, do the following:
  • Open the YouTube Video
  • Click Share
  • Click on Embed
  • Select Video Size and copy the embed code
  • Paste the YouTube video embed code and paste it in Blogger blog post in HTML tab
3. Sound: You can host audio files in Google Drive as well or you can host it on free services such as SoundCloud and share the link.

Hope you found this post helpful in setting up a website using Blogger.
Let me know in the comments.
 

Sponsored Links


11 comments:

  1. Very good points you wrote here..Great stuff...I think you've made some truly interesting points.Keep up the good work..

    app development company | web design and development company

    ReplyDelete
  2. Your information is helpful, but if purchasing a domain from Google Domains, the custom redirect is not allowed; any workaround for that scenario?

    ReplyDelete

  3. i like this post and its very helpful to us. Thankyou For shearing This Information With Us.
    Website Designing Company

    ReplyDelete
  4. This is great post......

    The static website is just similar to pamphlet. The changes cannot be made to the static website.

    ReplyDelete
  5. Thank you for such a fantastic blog. Where else could anyone get that kind of info written in such a perfect way? I have a presentation that I am presently working on, and I have been on the look out for such information.
    website design company in USA

    ReplyDelete
  6. Thank you for sharing your information. It is very useful for us. custom web development services india

    ReplyDelete
  7. Thank you for posting such a nice useful and impressive content.
    Look out another usful post. Web Design Tips for a Successful Small Business

    ReplyDelete
  8. Really very nice useful information, thanks for sharing...!

    Web development company India

    ReplyDelete
  9. The use of blogger can make the website and form designing easier. Even the users who do not know much about web development can use it to create the website.

    ReplyDelete
  10. Thank you, you have shared a good information. Its really useful and affective information about web development company in US

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...