Thursday, July 4, 2013

Turn blogger blog into a static web page

Turn blogger blog into a static web page

Create a static web page in blogger.

Tired of looking at your blog and wanted a static web page but do not want to work hard into setting-up one? Or you just wanted a more professional look for your page and not look like a blog?

Let us face it, a lot of us find it a bit difficult to set-up a page or just do not have much time to learn it while here is Google offering us Blogger where in just several steps you can have your own page (albeit a blog) not to mention that it is free.

Now, you can have both a static as well as a blog page in Blogger.


Here is how
Note: If you just wanted to convert your existing blog into a static page skip the first step.



  1. Create a blog following the normal process.
    • You can choose any template you wish but in my case I prefer getting the simple template.
    • For the Layout, I choose only a single column with no side bar this way I can have free range in styling it later.
    • I also adjusted the width to fit the entire blog area, I have only 1 column any way and no side bars.
  2. Make a static landing page
    • First thing is to create a page. Log-in to blogger then go to your blog's dashboard. Under Pages, click New Page then Blank page. Name this Home Page (under Page title). Publish the page.
    • Create a custom redirect. Let us create a redirect to the static page you just created so that it will effectively become the landing page of your site instead of the blog page. Click Settings on the dashboard then click Search preferences. Scroll down until you see Custom Redirect under Errors and redirections. Click Custom Redirects and on the From input field, input "/" (forward slash, without the quotes). On the To field, input "/p/home-page.html. Lastly, click on the Permanent check box to check it. Click on save then Save changes.
    • Hide the default Home blog page. After creating the custom redirect, when you go to your blog, it will automatically redirect you to the blank static page and no longer at the blog page. But notice your navigation bar that both Home and Home Page is present. Home is the default blog home page while the Home Page is the static one you have created. Notice also that it is the Home Page that is selected (meaning active) and not Home. We need then to hide Home as it is redundant and it does not hold much purpose. Click Layout on your dashboard then click edit under Pages gadget. On the pop-up window, uncheck Home under Pages to show. This action hides Home.
    • Rename Home Page to Home. After hiding Home, you are now left with just the Home Page on the navigation bar. But for me, Home Page do not sound too nice so I will rename it to just Home. Click back on Pages in the dashboard. Notice that Home is now under Hidden. Click Edit under Home Page and edit the Page title to whatever name you wish to name this page. For me I called it Home because it basically is now the effective home page of this site.
    • Bring back blog page. If you wish to still have the blog page (but just not as a landing page), create another page by clicking on New page (in Pages) but instead of a blank page, click Web address. Input any desired Page title, ex. Blog Posts. Under Web address (URL) input your blog URL and add the following texts "/index.html" without the quotes, ex. http://yourblog.blogspot.com/index.html. This page will have the same content as the original blog's home page including its formatting.
  3. Create content for your new static landing page. Congratulations! You have just reformatted you blog into a static site. Next step is to put content into the blank page. Format it as you wish.


Back to CyberLiving home page

Other Posts
Using Google Spreadsheet as a database for your site
Is facebook down?

7 comments

Päivi Santeri July 6, 2013 at 8:57 AM

About every 10th time the Dynamic views fail to load custom CSS and most parts of the user interface making it impossible for users to navigate the blog: Blogger Dynamic Views fail to load. The same just happened with your blog, too :(

Please help to spread the word so that we get this annoying bug fixed. Thanks!

Blog Author July 6, 2013 at 9:18 AM

Hi Päivi, I understand what you mean. Many times I find this page not loading properly and have been looking for answer/fix for months now. Anyways, we'll do and hope that they will make it a lot easier to customize dynamic views in the near future.

cheers!

By the way, for future readers, the blog page I am referring in this article is not this one but another blogger page: http://isarisari.blogspot.com

Lisa Messegee September 3, 2013 at 8:20 PM

I did this and it works beautifully. HOWEVER, when I click on my new blog tab (the web address tab), it doesn't look like it's active. I assume that's because it's a web address page and not a static page. Is there a way to make the tab to look active?

Julius Emman September 7, 2013 at 7:59 PM

Hi Lisa, sorry for the late reply.

I don't quite understand what your problem. Could you elaborate further? A link address that is set in the pages that should work the same as a static page so it should be clickable. Kindly check again if the address you placed is correct based on the actual address of what you are linking.

Hope I helped otherwise post here again.

Lisa Messegee September 7, 2013 at 10:17 PM

Hi Julius, thanks for replying. What I mean is that when I click on the tab, the tab doesn't change color and look active. Is there a way to make the tab look like it's active? See http://www.thewritewebdesign.com/index.html
Thank you.

website design October 27, 2013 at 10:18 PM

This is really attention-grabbing, You are an excessively professional blogger.I have joined your rss feed and sit up for in
quest of more of your great post. Also, I have shared
your site in my social networks.
website design

Preston Jose February 15, 2014 at 1:39 AM

You are an expert!!!!! I must say it. This post is awesome. I really appreciate your hard work. Thank you for the valuable info. I turned my blog into a website- www.thesoftwarecart.co.vu
Thankssssssssss.............................

Post a Comment