Singpolyma

Technical Blog

Static Pages in Blogger

Posted on

This is a long-standing feature/hack request from much of the Blogger community. Pages that are not posts. This hack is a little messy and not the be-all solution, but I feel it is mature enough to publish as a start.

The pages are all addressed as http://yourblog.blogspot.com/?page=pagename

As always there are multiple options for this hack, but the basic starting is the same:

  1. Go to Google Pages (you’re on the new Blogger, you have a Google Account) and create the page you want.
  2. Click the ‘View live’ link from the Google Pages editor (after publishing the page)
  3. Note the URL in the location bar / address bar, you will need it later

You will need to add this code to the <head> section of your blog first time only, subsequent pages you can skip this:

<script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=2999987' type='text/javascript'/>

In code that follows, replace the red pagename with the what you want used as pagename in the URL (See above) and the red URL.

If you want to just redirect to the other page (example) use this code:

<script type='text/javascript'>

//make sure the WidgetData object and staticpage section are defined
if(typeof(WidgetData) != ‘object’) WidgetData = {};
if(typeof(WidgetData[‘staticpage’]) != ‘object’) WidgetData[‘staticpage’] = {};

WidgetData[‘staticpage’][‘pagename‘] = {
‘url’:’URL‘,
‘type’:’redirect’
};
</script>

If you want the other page superimposed in an IFRAME (example) use this code:

<script type='text/javascript'>

//make sure the WidgetData object and staticpage section are defined
if(typeof(WidgetData) != ‘object’) WidgetData = {};
if(typeof(WidgetData[‘staticpage’]) != ‘object’) WidgetData[‘staticpage’] = {};

WidgetData[‘staticpage’][‘pagename‘] = {
‘url’:’URL‘,
‘type’:’iframe’
};
</script>

If you want the other page superimposed (example) use this code:

<script type='text/javascript'>

//make sure the WidgetData object and staticpage section are defined
if(typeof(WidgetData) != ‘object’) WidgetData = {};
if(typeof(WidgetData[‘staticpage’]) != ‘object’) WidgetData[‘staticpage’] = {};

WidgetData[‘staticpage’][‘pagename‘] = {
‘url’:’URL
};
</script>

If you want the other page included in a DIV so that it fits better into your page (you must style the DIV so that it works well. The example simply styles it to fill the page), use this code and put a DIV in your code with an ID the same as pagename:

<script type='text/javascript'>

//make sure the WidgetData object and staticpage section are defined
if(typeof(WidgetData) != ‘object’) WidgetData = {};
if(typeof(WidgetData[‘staticpage’]) != ‘object’) WidgetData[‘staticpage’] = {};

WidgetData[‘staticpage’][‘pagename‘] = {
‘url’:’URL
};
</script>

If you want the other page included as an IFRAME in a DIV so that it fits better into your page (you must style the DIV so that it works well. The example simply styles it to fill the page), use this code and put a DIV in your code with an ID the same as pagename:

<script type='text/javascript'>

//make sure the WidgetData object and staticpage section are defined
if(typeof(WidgetData) != ‘object’) WidgetData = {};
if(typeof(WidgetData[‘staticpage’]) != ‘object’) WidgetData[‘staticpage’] = {};

WidgetData[‘staticpage’][‘pagename‘] = {
‘url’:’URL‘,
‘type’:’iframe’
};
</script>

10 Responses

Deepak

One question..
Will these pages be crawled as inside the same site as your blog URL?

Singpolyma

Yes, but the search engines will index the content as the content of your blog’s homepage (because they are JavaScript and search engines ignore that).

Jack

Couldn’t seem to make any of the methods work, although none of your examples seem to be working any more so I wasn’t entirely sure what I was doing.

Stephen Paul Weber

@Jack – None of the examples will work anymore because my old blog now redirects here. If you try to install one again and then give me a link to your blog I can take a look 🙂

Chris

how do i do this
“//make sure the WidgetData object and staticpage section are defined”?

René Fischer

You wrote …

> If you want to just redirect to the other page (example) use this code:
>
>

… but where i have to paste this code?

Greetings
René

kajdo

hi, i also spent some time to do a static about me page on my blogspot site … here is the result http://detect-it.blogspot.com/search/label/xxx … look at detect-it.blogspot.com – the how-to is not finished yet, but i will clean up the code and probably make a widget for this purpose …

i think there are many advantages to use the “static page way” i do … try it and if you have any ideas – or other comments -> let me know

have fun
kajdo

Leave a Response