Welcome Message for First Time Visitor in Blogger

Hi Guys,

In this blog, I am not going to talk about anything about C#, ASP.NET or any of the technical or architectural stuffs. This is actually a post for my refreshment. Recently I have added a new feature to my blog to ensure that the users who visits my site for the first time gets a warm welcome message telling about the features of the site. Lets show you how to do that, so that others who are using the same to blog their content can benefit from it.

The Funda
 Here are the steps to do : 

1.  Add a small div element to the blogger template which contains the message. 
2. Add a css for the div to ensure the message is hidden.
3. Try to find a cookie through javascript after the page loads.
4. If cookie is found, we do nothing, otherwise we unhide the message and store the cookie in the browser.

So, whenever the user hits the site for the first time, he will be prompted with the welcome message which will not be present on subsequent visits. 

The steps 
In blogger's console, click on Design. Next go to Edit Template. 

Try to find 
tag.
After body tag place the following html :

<div id='layer1'>
<p>Welcome to my site. Thanks for visiting.(Dismiss)</a></p>
</div>

Now move up, and before end of head place a script block :

<script type='text/javascript'>
function GetCookie(name) {
   var arg=name+&quot;=&quot;;
   var alen=arg.length;
   var clen=document.cookie.length;
   var i=0;
   while (i&lt;clen) {
    var j=i+alen;
    if (document.cookie.substring(i,j)==arg)
      return &quot;here&quot;;
    i=document.cookie.indexOf(&quot; &quot;,i)+1;
    if (i==0) break;
   }
   return null;
}

function setVisible(obj,isopen)
{
    obj = document.getElementById(obj);
    obj.style.visibility = !isopen ? &quot;hidden&quot; : &quot;visible&quot;;
}
function placeIt(obj)
{
    obj = document.getElementById(obj);
    if (document.documentElement)
    {
        theLeft = document.documentElement.scrollLeft;
        theTop = document.documentElement.scrollTop;
    }
    else if (document.body)
    {
        theLeft = document.body.scrollLeft;
        theTop = document.body.scrollTop;
    }
    theLeft += x;
    theTop += y;
    obj.style.left = theLeft + &#39;px&#39; ;
    obj.style.top = theTop + &#39;px&#39; ;
    setTimeout(&quot;placeIt(&#39;layer1&#39;)&quot;,500);
}

function loadFirstTime(){
x = 0;
y = 0;
var visit=GetCookie(&quot;COOKIE1&quot;);
  if (visit==null){
    var expire=new Date();
    window.name = &quot;thiswin&quot;;
    setVisible(&#39;layer1&#39;, true);
    expire=new Date(expire.getTime()+7776000000);
    document.cookie=&quot;COOKIE1=here; expires=&quot;+expire;
}
 window.onscroll = function(){
   placeIt(&#39;layer1&#39;);
  }
}
<script>

Replace the body tag with  
Thus the body tag calls loadFirstTime when the page loads up.

Finally in the style section add

#layer1 {
 position: absolute;
 visibility: hidden;
 width: 100%;
 height: 60px;
 left: 0px;
 top: 0px;
        color:#FFF;
 background-color: #AF7817;
 border: 1px solid #000;
 padding: 0px;
}

Now when you visit the site after deleting the browser cookie, you will see the welcome message. Try clicking on dismiss to dismiss the message.

Thank you for reading the content.

Read Disclaimer Notice