Blogger Landing Page without losing Blog using Cookies


I followed the tutorials to set a custom redirect in blogger using a static page and discovered that you can no longer navigate back to the ordinary blog.  In fact, all the existing search engine references to your blog posts get lost.  This isn't a great solution.

To address this, I've put together the javascript code below which uses a cookie to recognise a new user.  A Blogger blog already uses a cookie to create the cookie notice that comes up.  One more cookie shouldn't be a problem.

The following javascript works like this: If a new user comes to your page, they are first sent to the landing (front) page.  However, if a new user is trying to get to a specific page, such as a blog post, then the javascript does not redirect them, it just lets them through to where they want to go.  This is achieved by checking if a cookie exists.   If the cookie does not exist, we assume they have not visited the page before, and the cookie is created for the next time they visit.

Importantly, if you simply redirect from the main address of your blog to your landing page, they will never be able to navigate to the blog itself.  So this cookie creates a once-only solution unique to each visitor.

You can use the following piece of code to redirect new users of your Blogger blog to a customised static page.  You need to copy and paste this code into the <head> section of your blogger template.  You can do this by navigating through the Blogger control panel, Template, Customize HTML (guide here).  When you are looking at the HTML, search for </head>, and paste the below code just before </head>.


Be sure to back up your custom html / template first, just in case something goes wrong.

Important: you need to change a few lines in the below code.

  • var homepage_url = "http://www.paulodowd.com/";
    • Change the web address here to the web address of your blog.  This might be "http://www.myblog.blogger.com", or something similar.
  • window.location = "http://www.paulodowd.com/p/paul-odowd.html";
    • You need to change the web address here to the address where you want your user to end up.  To create a landing page, use the Blogger control panel to set up a static page (tutorial here), and then use the URL you find in the address bar when you are on that static page.


<script type='text/javascript'>;
//<[CDATA[

// Blogger Landing Page Redirect by
// Paul O'Dowd
// 23 May 2016

// Get current cookies for this page.
var existing_cookies = document.cookie;

// Get URL string from address bar
var incoming_url = window.location.href;

// Add your homepage url here:
var homepage_url = "http://www.paulodowd.com/";

  // Check to see if the user is addressing the webpage directly.
  // If they want to go to a specific blog post we let them through.
  if( incoming_url.toLowerCase() == homepage_url.toLowerCase() ) {
  
  // If the Second Visit cookie does not exist, we send the user
  // to the landing page.
  if( existing_cookies.search("Second Visit") == -1 ) {

    // Create the cookie so if the user visits again
    // they don't go to the landing page.
    document.cookie = "Second Visit";

    // Send user to landing page.
    window.location="http://www.paulodowd.com/p/paul-odowd.html";
  }
}

//]]>;
</script>;

You can test if this is working quite easily by opening up a Private Window in Firefox, or Incognito Window in Chrome, and navigating to your page.  Cookies are automatically deleted when you close a private/incognito window.

The following pages might be useful resources if you want to develop the above code further:



Popular Posts