How to check your DNS server speed

Manually check your DNS performance or speed or compare your ISP DNS speed to other DNS server

I have looked around on ways on how to compare my ISP's DNS speed with that of Google Public DNS but the results I get are sketchy at best.

To check for a DNS speed one has to look not only on the ping test but the rate at which a DNS server resolves host names. Here is an excerpt from Google:

"In addition to the ping time, you also need to consider the average time to resolve a name. For example, if your ISP has a ping time of 20 ms, but a mean name resolution time of 500 ms, the overall average response time is 520 ms. If Google Public DNS has a ping time of 300 ms, but resolves many names in 1 ms, the overall average response time is 301 ms."

The formula therefore that I will be using here is:

DNS Speed = connection latency + host name resolution time

For connection latency this will be the result from Pinging. As for the host name resolution time, I could not find one anywhere. Well, at least not something that you still need to download.

I did found out that one way to check for a DNS response is by using the nslookup which has the command line nslookup www.example .com typed in the command prompt. The time it takes to give back result will be the host name resolution time.

The trick will be on how to get this elapsed time. You can try stop watch and time it starting the moment you press enter and stopping once result is displayed. This however is prone to error and result will be very inaccurate considering that the elapsed time is a fraction of a second.

The solution is to time stamp it by using the prompt $t. This command will change the C:\> prompt into time like this  1:30:50.62. Now you can just subtract the before and after time that the nslookup command was executed. Note though that this again will include the time you typed the command.

To remove the typing time for the command, use a batch file and this is what you have to run from DOS shell.

To create a batch file

• Open a text editor like Notepad.
• Write your code into Notepad. In my case I only wrote three lines:
• prompt $t
• nslookup www.example.com
• prompt
• The first line is to change the C prompt into time format, then the command nslookup and lastly, the third line is to change back the command prompt to C:/>
• The result will be as follows

• Save it as batch file by adding the .bat afer your file name and under Save as type, select All files
• To launch this in DOS, just type the name of the file from the same directory you saved the batch file.
• For this result, the host name resolution time is 9.25 seconds or 9250 millisecond (1:46:08.84 - 1:45:59.59)

Back to CyberLiving home page

Other Posts

Read More

Smart Bro internet speed is very slow. How to make it faster?

Improve your internet connection speed with Google Public DNS or OpenDNS

If you feel that your Smart Bro internet connection is very slow and you would like to improve it, here is how.

Change the DNS settings from Smart Bro, or whichever your ISP is, into Google's Public DNS or OpenDNS.

For Google: Primary/Main DNS: 8.8.8.8 and Secondary/Alternate DNS: 8.8.4.4 the two can be interchanged.

For OpenDNS: Primary/Main DNS:208.67.222.222 and Secondary/Alternate DNS: 208.67.220.220

To configure your DNS refer to the post How to change your Smart Bro DNS server to Google Public DNS or OpenDNS

A layman's explanation as to why changing the DNS address can improve browsing speed
Every domain on the internet has a name or an IP address much like your computer has an IP address. This IP address are in numbers with dots much like 173.194.126.52 (one of Google's many IP addresses). But humans do not remember numbers very well but are good at remembering words which is also why you have contacts in your cellphone to store phone numbers because it is easier to remember names.

Back on topic, in order to remedy this problem, proponents of the world wide web decided on a host name to represent an IP address. So for IP address 173.194.126.52 its host name is Google.com.

A DNS (Domain Name Server) has the function of translating a host name into a machine readable IP address. Thing is, there are millions (if not billions) of host names currently registered today. Add to it, there could be more than one IP address linked to a host name. It is therefore impossible for a single DNS server to store all this data and so they ask the help of other DNS servers for host names not currently on their list adding to the time to resolve a host name which in turn causes a user (that is you and me) to have to wait longer before our browser could completely display the page we requested.

But, DNS servers differ on their capacity to store host names. Like in the case of our Smart Bro and Google or OpenDNS. Smart Bro's DNS server has a limited data compared to Google/OpenDNS's much much larger database.

So in the case of Google or OpenDNS the time to resolve a host name is much faster as they don't have to look somewhere else to resolve a host name unlike Smart Bro.

Back to CyberLiving home page

Other Posts
How to change your Smart Bro DNS server to Google Public DNS or OpenDNS

Read More

How to change your Smart Bro DNS server to Google Public DNS or OpenDNS

Smart Telecom's MF180 USB modem is bundled with an interface which has a limited options on it Settings page. Not even a away to edit its network configuration settings through the User Interface (UI).

So how to change the DNS setting?
By editing the NetConfig file.

In windows explorer, go to C:/Program Files/SMART BRO. In the SMART BRO folder look for the NetConfig file. This is what you must edit.

note: Before you do anything with the file, you must create a back-up just in case you mess up while editing, you have a back-up file to copy from. Just create a folder and name it Back-up, copy NetConfig file and paste it in the Back-up folder.

Right click NetConfig then Open With ... choose Notepad. In Notepad, you will see the following:

Original SMART BRO Configuration

Change it to

[SmartBro]
Name=SmartBro
UserName=none
UserPass=none
DialNum=*99#
IsAutoGetAPN=0
APN=SMARTBRO
IsAutoGetDNS=1
MainDNSaddr=0.0.0.0
AltDNSAddr=0.0.0.0
IsAutoGetPDP=1
pdpAddr=0.0.0.0
pdpType=IP
AuthType=PAP
IsDfault=1
DeniEditDelete=1
askUserAndPass=0
SaveuserAndPass=0
IsFactoryDefault=1
IsMmsConfig=0

[SmartBro]
Name=SmartBro
UserName=none
UserPass=none
DialNum=*99#
IsAutoGetAPN=0
APN=SMARTBRO
IsAutoGetDNS=0
MainDNSaddr=8.8.8.8
AltDNSAddr=8.8.4.4
IsAutoGetPDP=0
pdpAddr=0.0.0.0
pdpType=IP
AuthType=PAP
IsDfault=1
DeniEditDelete=1
askUserAndPass=0
SaveuserAndPass=0
IsFactoryDefault=1
IsMmsConfig=0

In the original configuration, IsAutoGerDNS is 1 while I changed it to zero (0) to mean false. This change cause the UI not to automatically get the DNS instead configure it to use the set MainDNSaddr and AltDNSAddr which is 8.8.8.8 and 8.8.4.4 respectively (Google's public DNS- can be interchanged). Without setting IsAutoGetDNS to 0, the UI will automatically get the ISP assigned DNS for you even if you set the MainDNSAddr and AltDNSAddr to your desired DNS.

Save the file and relaunch your Smart Bro UI to connect to the internet.

For OpenDNS, use the following: MainDNSAddr=208.67.222.222; AltDNSAddr=208.67.220.220

Other public DNS are:
Comodo Secure DNS: Main=8.26.56.26; Alt=8.20.247.20
Norton ConnectSafe: Main=198.153.192.40, Alt=198.153.194.40
DNSResolvers.com: Main=205.210.42.205, Alt=64.68.200.200

Back to CyberLiving home page

Other Posts
Smart Bro internet speed is very slow. How to make it faster?
Meta tag generator

Read More

Meta tag generator

Here is a free meta tag generator/builder for blogger users and non-blogger users that include facebook and twitter meta tags.

Simply input the page title, description and keywords (if you wish not to include it leave it blank) and the post URL and click the Generate Meta tags button. To include facebook and twitter meta tags, just click on the option list that you wish included.

Copy the code (that appears after the button) applicable for you and paste it on your page. It is important to copy including all leading spaces so it will align properly when you paste it on blogger template, If you are a blogger user look for the <b:include data:='blog' name='all-head-content'/> and paste the code just below it. For non-blogger users, paste the code within the <HEAD> and </HEAD> tags.

Blog post URL:

Page Title:

You have 160 characters left.

Description:

You have 160 characters left.

Keywords:

You have 160 characters left.

Tell Robots to:
Index this page and follow the links on the page
Index this page but do not follow the links on the page
Do not index this page and follow the links on the page
Do not index this page and do not follow the links on the page

Facebook Meta tags
Include Facebook Meta title tag (og:title)
Include Facebook Meta URL tag/Canonical URL (It will use the same URL as the one supplied above) (og:URL)
Include Facebook Meta description tag (og:description)
Include the type

Select Type
blog
website
article

Include Facebook Meta image tag (og:image)

Image URL:

Include Facebook User IDs (fb:admins)

User IDs:

Twitter Meta tags
Include Twitter Meta URL tag (twitter:url)
Include Twitter Meta Title tag (twitter:title)
Include Twitter Meta Description tag (twitter:description)
Include Twitter Meta image tag (twitter:image)
Include the type

Select Twitter Card Type
summary
photo
player

For Blogger Users copy this

For others use this

Back to CyberLiving home page

Other Posts
How to change your Smart Bro DNS server to Google Public DNS or OpenDNS
Add your profile photo in search results

Read More

Add your profile photo in search results

Google Authorship Markup: How to add your photo into SERPs

So you wanted to add your profile photo into the results page of major search sites like Google, Yahoo and Bing.

The short answer is by using Authorship Markup and it is called rich snippet. And in Google it is done without having to write a single code.

Why bother with Authorship Markup
Aside from the obvious that it is quite cool, it also standouts out among the other results. And if it stands out you get more attention, thus you get more advantage against the competition. It also gives the impression that that search result is more credible since Google has given you authorship on that particular subject or with the article.

Many believes that with the authorship, click through rates have increased for their site. I mean, just look at this result:

Here is what it looked without the Authorship Markup

An here is with Authorship Markup

And so how did they do it?

Here is how

• You need to have a Google+ account - If you don't have one yet or even if you don't intend on using it just create one since it will be used to link your site/content and your bio/profile. If you are on Blogger, I suggest that you take time to write your Tagline and Introduction.
• Link your profile to Google+
1. Go to your site and click your about or profile page, the one that contains your personal profile.
2. Copy the URL of that (profile) page from the address bar.
3. Go back to your Google+ profile and click on About.
4. Scroll down until you see the links box.
5. Click Edit and under Contributor to click Add custom link and on Label put something like +Your Name Blog. On URL put the copied profile address. Make sure that Current contributor is selected on the drop down menu.
6. If you don't see your site listed under Contributor to add it as well by following step 5.
• Note to Blogger users - To connect your blogs to Google+, go to your dashboard and click on Google+ then on the right side will be the Get Started button. From there, just follow the instructions or you can still manually do them by following step 5.
• Link Google+ profile to your site's content
1. Add the 'rel=author' on the link of your author box (the <a href="http://example.com/profile.html/" of written by Blog Author at the bottom of the page)
2. If you have a profile page, ad the 'rel=me' on the link.
3. For Blogger users (or even if you are not) you can link your Google+ profile directly by adding '?rel=author' at the end of the URL link like https://plus.google.com/14790572345602544?rel=author.
• Test and see the result using Google's Structured Data Testing Tool. Just type in your site URL and click on the PREVIEW button.

Back to CyberLiving home page

Other Posts
Meta tag generator
Put the Loading... text with animated dots

Read More

Put the Loading... text with animated dots

There are times where you navigate to a page and you see the "Loading..." text with moving three or so dots like this

Loading

and you wonder how they did it.

Here is how
Copy and paste the following code to where you wish for it to appear inside you page

<span id="wait">Loading</span>
<script>
var dots = window.setInterval( function() {
    var wait = document.getElementById("wait");
    if ( wait.innerHTML.length > 12 )
        wait.innerHTML = "Loading";
    else
        wait.innerHTML += " .";
    }, 300);
</script>

You may replace the value 300 (in red text) to a value you wish. 300 means 300 millisecond or 0.3 second interval between each appearance of the dot so naturally the higher value you put in, the longer it will take for each dot to appear and vice versa.

You may also wish to add some format to the text like making the font size 40px and color gray. You can put an inline CSS at the span tag like this:

<span style="color:gray;font-size:40px;" id="wait">Loading</span>
<script>
var dots = window.setInterval( function() {
    var wait = document.getElementById("wait");
    if ( wait.innerHTML.length > 12 )
        wait.innerHTML = "Loading";
    else
        wait.innerHTML += " .";
    }, 300);
</script>

And the result will be like this:

Loading

Back to CyberLiving home page

Other Posts
Add your profile photo in search results
Using Google Spreadsheet as a query-able table using Javascript

Read More

Using Google Spreadsheet as a query-able table using Javascript

Add more functionality (like sort, search string, limit result per page and page navigation) to your query using Javascript that a query in the data source URL would be tedious do.

In a previous post (Using Google Spreadsheet as a database for your site) it was shown that a Google Spreadsheet could function as a database and that it was possible to make queries as opposed to just publishing the entire content into one very long table (in a case where the table contains lots of data).

But in my desire to give more functionality (like searching a certain text, limiting to 10 result per page and a navigation button for the next or previous 10 results) to the page, I thought it would be much simpler to do the query in Javascript rather than to do it in the data source URL. Fortunately I found one in Google code playground.

Here is how
By using the setquery method to put your query string within the Javascript code. Here is what it would basically look like:

var query = new google.visualization.Query(DATA_SOURCE_URL);
query.setQuery('select A,B,C group by A order by B desc');
query.send(handleQueryResponse);

With the query in Javascript it turned my display result page from this:

into this:

The Javascript code for this is found just below. Feel free to use it. Just copy and paste the code into your page replacing the source spreadsheet and the query string as best fits your requirement.

<style>
.post h3 {display:none !important;}
</style>


<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
 
    <title>
      Google Visualization API Sample
    </title>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['table']});
    </script>
    <script type="text/javascript">

    var isFirstTime = true;
    var data;
    var queryInput;
    var credits = '<br /><p style="font-size: 8px;">Courtesy of <a href="http://cyberliving.blogspot.com">http://cyberliving.blogspot.com</a></p>';
     
    var query = new google.visualization.Query(
        'https://spreadsheets.google.com/tq?key=YOUR_SPREADSHEET_ID_HERE');
 
    function sendAndDraw() {
      // Send the query with a callback function.
      query.send(handleQueryResponse);
    }
 
    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }
      data = response.getDataTable();
      var table = new google.visualization.Table(document.getElementById('querytable'));
      table.draw(data, {'allowHtml': true, 'alternatingRowStyle': true, 'page': 'enable', 'pageSize': 10, 'sort': 'enable', 'sortAscending': false, 'sortColumn': 0});
      if (isFirstTime) {
      init();
      }
    }
 
    function setQuery(queryString) {
      // Query language examples configured with the UI
      query.setQuery(queryString);
      sendAndDraw();
      queryInput.value = queryString;
    }
 
 

    google.setOnLoadCallback(sendAndDraw);

    function init() {
      isFirstTime = false;
      queryInput = document.getElementById('display-query');
    }

    function setQueryFromUser() {
      var queryInput1 = "Select * where C contains " + "'" + queryInput.value + "'" + " or D contains " + "'" + queryInput.value + "'" + " or E contains " + "'" + queryInput.value + "'" + " or F contains " + "'" + queryInput.value + "'" + " or G contains " + "'" + queryInput.value + "'"
      setQuery(queryInput1);
    }
 
    </script>
  </head>
<body style="border: 0 none; font-family: Arial;">
<div style="background-color: buttonface; border: 1px solid gray; margin-bottom: 10px; padding: 5px;">
<span> Refine your search</span>
<form action="">
<table style="font-size: 12px;">
<tr>
    <td>Select Category</td>
    <td><select id="query-1" onchange="setQuery(this.value)">
      <option value="">None</option>
      <option value="where B = 'Real Estate'">Real Estate</option>
      <option value="where B = 'Automobile/Vehicle'">Automobile/Vehicle</option>
      <option value="where B = 'Computers/Electronics'">Computers/Consumer Electronics</option>
      <option value="where B = 'Job Opportunity'">Job Opportunity</option>
      <option value="where B = 'Others'">Others</option>
    </select></td>
    <td>Search iSari-Sari Store</td>
    <td><input id="display-query" type="text" />
      <input onclick="setQueryFromUser()" type="button" value="Search" />
    </td>
</tr>
</table>
</form>
</div>
<br />
<div id="querytable">Loading...</div>
  <script>document.write(credits);</script>
</body></html>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

The following things you need to do after pasting the code in your page:

1. Replace the YOUR_SPREADSHEET_ID_HERE with the correct ID.
2. There are also other red texts in the handleQueryResponse function. Edit it as you wish or you may remove an option:
• 'allowHtml': true this is to allow some formatting from the table to be carried out in the query output.
• 'alternatingRowStyle': true when set to true alternating rows will get different tone (gray for odd rows and white for evenrows).
• 'page': 'enable' when set to enable, paging is turned on meaning you can set the maximum result to be displayed per page by using the pageSize option.
• 'pageSize': 10 the number is the maximum limit of displayed result per page. A navigation button (previous and next buttons) is placed at the buttom of the result table.
• 'sort': 'enable' seems self-explanatory. When enabled, you can sort any column.
• 'sortAscending': false when set to true, data is sorted in ascending manner. When false, data are sorted in descending manner.
• 'sortColumn': 0 Tells the query language which column to sort automatically before publishing the result on the page. 0 is for column A, 1 for B and so on.
3. The blue and purple texts makes up the "Refine your search" user interface. The blue texts is for the drop down menu while the purple makes the search input field.

Back to CyberLiving home page

Other Posts
Put the Loading... text with animated dots
Make your static page look cleaner by removing the page title

Read More

Make your static page look cleaner by removing the page title

How to remove the page title on your blog pages?

There are times when you wanted to remove the page title on your blog's static pages just to make it cleaner and appear more professional.

I mean look at the sample screen capture of a form page below:

An Ad submit page with the page title.

Examine the photo above and you will see the redundancy. Submit your Ad is the page title (encircled in red). You will see, however just above is the navigation bar showing the current page selection (pointed by the red arrow) which says exactly the same as the page title.

Removing Submit your Ad on the navigation bar is not advisable since it is used to navigate to the form. The one appearing on the actual page, however, is not necessary so it should be removed.

Here is how
The solution is quite simple, by placing a 3 line code at the top of your page's code.

• Edit your page in HTML
1. In your dashboard, click pages.
2. Select the page and click on edit.
3. On the edit/compose window, click on HTML so you can edit the html code of the page.
• Copy and Paste the following code at the top of your page's code

<style>
.post h3 {display:none !important;}
</style>

• Publish the page
1. Click on the Upate button.
2. Check the page you just edited and it should no longer be showing the page title on the page.

Done!

Back to CyberLiving home page

Other Posts
Using Google Spreadsheet as a query-able table using Javascript
Using Google Spreadsheet as a database for your site

Read More

Using Google Spreadsheet as a database for your site

Turn Google spreadsheet into a query able database that you can publish on your web page.

In a previous post (Create your own form and display all response real time using Google Drive) I have mentioned that you can post the results of your Google Form that updates real time. It is good because it is an active result by that I mean it updates data real time.

But the output result will also include everything like the menu bar and tool bars which is basically anything when you open a spreadsheet in Google Drive. It therefore looks and feel more like a work space than a web page. Refer to below image for the output.

Output on your website using the link share address of the spreadsheet.

But what if you wanted a better output without the distracting menu and tool bars, column and row headings and just wanted it to look like any other table you see around the internet?

Use the Data Source URL instead of the link share address
Fortunately, there is a better way of showing your response table and that is using the data source URL. It looks like this:

https://spreadsheets.google.com/tq?tqx=out:html&key=YOUR_SPREADSHEET_ID_HERE

To find your spreadsheet ID, open your spreadsheet in Google Drive and on the address bar should look like this:

https://docs.google.com/spreadsheet/ccc?key=SPREADSHEET_ID#gid=0

Just copy the spreadsheet ID and paste it on your data source URL. To post this in your website, use the iframe tag just like when you made the link share address. It therefore should look something like:

<iframe frameborder="0" height="1100" marginheight="0" marginwidth="0" width="1000" src="https://spreadsheets.google.com/tq?tqx=out:html&key=YOUR_SPREADSHEET_ID_HERE"></iframe>

Please note also that I have highlighted in bold and blue the text tqx=out:html that is because there are three possible output in using the data source URL (json, html and csv). Without specifying the output, it will automatically assume a json output (default). The tqx=out:html text will ensure that it gives an html output which is more readable to us common folk. Using csv will download the table to your hard drive.

Supposing your iframe options were set properly, you will not see any evidence of the iframe on your page and should look like this:

Using the data source URL gives a cleaner look.

Add Query on your data source URL for better interactivity with your table
Now looking better! How about if you wanted some interactivity with the table like showing responses only on a certain category. Like this:

Sort by:
Real Estate                     Automobile or Vehicle
Job Opportunity              Computers and Electronics
Others

From the above table, you can see that you can sort the data by clicking on any of the choices on how to sort it.

To do this include a query in the data source URL. The query has the following syntax:

&tq=QUERY_STRING_HERE

The entire data source URL then would look like this:

https://spreadsheets.google.com/tq?tqx=out:html&key=YOUR_SPREADSHEET_ID_HERE&tq=QUERY_STRING_HERE

Replace that into your iframe source and it will display any data that meets the query requirement.

But what to put on the query string? Instead of discussing the details, I will give you the code for the above example as it is beyond the scope of this article to discuss in detail about the query language.

Here is the code. Feel free to use it. Just copy and paste it to a blank page and it should work fine.

<b>Sort by:</b><br />
<a href="https://spreadsheets.google.com/tq?tqx=out:html&amp;tq=select * where (B='Real Estate' or B='Category') order by A desc&key=YOUR_SPREADSHEET_ID_HERE" target="pakita">Real Estate</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href="https://spreadsheets.google.com/tq?tqx=out:html&amp;tq=select * where (B='Automobile/Vehicle' or B='Category') order by A desc&key=YOUR_SPREADSHEET_ID_HERE" target="pakita">Automobile or Vehicle</a><br />
<a href="https://spreadsheets.google.com/tq?tqx=out:html&tq=select * where (B='Job Opportunity' or B='Category') order by A desc&key=YOUR_SPREADSHEET_ID_HERE" target="pakita">Job Opportunity</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<a href="https://spreadsheets.google.com/tq?tqx=out:html&tq=select * where (B='Computers/Electronics' or B='Category') order by A desc&key=YOUR_SPREADSHEET_ID_HERE" target="pakita">Computers and Electronics</a><br />
<a href="https://spreadsheets.google.com/tq?tqx=out:html&tq=select * where (B='Others' or B='Category') order by A desc&amp;key=YOUR_SPREADSHEET_ID_HERE" target="pakita">Others</a>
<br />
<iframe frameborder="0" height="900" marginheight="0" marginwidth="0" name="pakita" src="https://spreadsheets.google.com/tq?tqx=out:html&amp;tq=select * order by A desc&key=YOUR_SPREADSHEET_ID_HERE" width="1000"></iframe><br /><p style="font-size: 8px;">Courtesy of <a href="http://cyberliving.blogspot.com">http://cyberliving.blogspot.com</a></p>

A little explanation for the code
In order to make an interaction with the table, I made use of an achor text (<a href="source URL>) in order to make the query using the data source URL then targeted the frame (iframe) as my output.

You might have also noticed the blue and red texts. These are what composed the query string, except for the key=YOUR_SPREADSHEET_ID_HERE which we have already explained earlier. The blue texts are called clauses while the red texts are the conditions you set for each clause.

For the select I gave it the * to mean select all columns in the table. You may also select only certain columns. Do it by specifying its column letter. Ex. select A,B,C or select A,C,D,E or select B,E,F

The where clause tells your query which among the data is to be displayed. In my example I used where (B='Real Estate' or B='Category') on my first anchor text (Real Estate) because I just wanted to display all responses under the category Real Estate. I included or B='Category' so that it will still display the column title. Without it, the displayed data will not have any column title.

Then there is the order by A desc. This serves to arrange the data according to the content of column A. Since I wanted it to display the data from the latest entry from the form down to the earliest I choose column a to sort because it contains the time stamp data as to when each data has been created and since I wanted the latest entry to be on top I choose "desc" for descending order.

That is it. I hope I helped you solved your problem. If you wish for any clarification, leave your comments below.

Back to CyberLiving home page

Other Posts
Turn blogger blog into a static web page
Make your static page look cleaner by removing the page title

Read More

Turn blogger blog into a static web page

Written by Julius Emman on Thursday July 4th 2013

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?

Read More