Adding an entry or a welcome page

welcome or entry page Here is a tutorial for creating an entry or welcome “page” for your blog. I think it can also be called a splash page or a landing page, hmm….whatever.

It is different from the usual welcome message found in most Blogger blogs whereby the message is placed on top of the blog post column, and stays up there the entire time.

This welcome page acts like an entry page. It only appears at the beginning of  a visit and disappears when the visitor “enters” the blog. Definitely better than an alert box, looks nicer and comes without the annoying sound.

The page comes with these features:

  1. Lightbox-type message window.
  2. This entry page is fully widgetized, so it can be removed by simply removing the two gadgets, no need to deal with your template HTML.
  3. Visitor need to click ENTER button to continue viewing your blog. This in a way, will make sure your visitor to read your important welcome message before entering your blog.
  4. Only external visitors will go through the welcome page. Readers coming from any one of your blog pages will bypass this page.

See the entry page in action here in my widget showcase blog.


Adding HTML/Javascript and text gadgets

We won’t add the widgets in Page Elements. We will add it  by adding a code to your template HTML.  This way we can give the widget our own Id. We will add two widgets, one is a Text gadget to hold the welcome message, the other one is a HTML/Javascript gadget to hold the codes that will transform the Text gadget into a welcome page.

Now let’s do this:

  1. Login to your to your Blogger account.
  2. Back up your template.
  3. At Dashboard go to Design > Edit HTML.
  4. Make sure the Expand Widget Templates check box on top right of the HTML window is unticked.
  5. Find this code in your template HTML:
    • <body> -if you are using Layout templates, or
    • <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> -if you are using Template Designer’s template.
  6. Copy the code below and paste it immediately after the code in step 5:
    <!-- Welcome page Start -->
    <div id='welcome-wrapper'> 
    <b:section class='welcome' id='welcome' showaddelement='no'> 
    <b:widget id='Text88' locked='false' title='' type='Text'/> 
    <b:widget id='HTML88' locked='false' title='' type='HTML'/> 
    <!-- Welcome page End -->

Adding contents to the gadgets

  1. Go to Design > Page Elements. You should see the newly added widgets above the header. welcome or entry page element
  2. Click Edit on the Text gadget and enter your welcome message or greeting. Remember this entry page adds an extra step before your readers could reach your blog content. So make it short and worth their wile reading it.
  3. Then proceed with the HTML/Javascript gadget  (HTML88). Add the code below in the content box:
    <!-- Welcome page Start (c) 2010 Blogger Sentral. Original code by Please do not remove this credit and the “Get this widget” link at the bottom of the widget. -->
    <!-- HTML part -->
    <div style="padding-top:15px;">
    <a id="EPEntryButton" onclick="document.getElementById(&quot;HTML88&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;Text88&quot;).style.display=&quot;none&quot;">ENTER</a>
    <div id="EPGrab"><a href="" target="_blank">Get this widget</a></div>
    <div id="EPDarkLayer"></div>
    <!-- CSS part -->
    #welcome-wrapper{width:40%;margin:0 auto;height:0px;text-align:center;}
    /* welcome message widget */
    #Text88, #EPEntryButton, #EPGrab {position:relative;z-index:510;top:100px;}
    #Text88 {background-color:#fff;border:solid 10px orange;color:#222;display:none;padding:15px;}
    #HTML88 {z-index:499;display:none;}
    /* DarkLayer div */
    #EPDarkLayer {background-color:#000;opacity:0.6;filter:alpha(opacity=60);top:0px;left:0px;/*bs-aewp*/z-index:500;position:fixed;}
    /* Entry button */
    #EPEntryButton {background-color:lawngreen;border:solid 2px #fff;color:#333;cursor:pointer;font-size:25px;padding:5px;text-decoration:none;}
    #EPGrab {color:white;padding-top:10px;}
    <!--[if IE 6]>
    #EPDarkLayer {position:absolute;}
    <!-- Javascript part -->
    <script type="text/javascript">
    YourBlogUrl=""; //enter your blog url here; //check come from where
    if (fromInternal == -1)
    { //if visitor comes from external page
    getDarkLayer.width=screen.availWidth+"px"; //set DarkLayer width
    getDarkLayer.height=screen.availHeight*2+"px"; //set DarkLayer height
    getHTML88.display="block"; //show DarkLayer
    getText88.display="block"; //show message
    { //if visitor comes from internal page
    getHTML88.display="none"; //hide HTML gadget
    getText88.display="none"; //hide message
    <!-- Welcome page End -->

Configuring the welcome page

Reminder: When editing code in a HTML/Javascript gadget, never click the Rich Text link. Doing so will add forced line breaks <br/> in your code, thus ruining it.

  1. YourBlogUrl –this is your blog url, replace (in code line 28) with your own blog url.
  2. Below are some CSS properties you can change to suit your preferences.
    • Message window width can be changed in code line 10.
    • The message window can be adjusted vertically by changing top value in code line 12.
    • To adjust the background transparency or color, go to code line 16. For transparency you need to change both values -opacity (scale from 0 to 1), filter:alpha(opacity) (scale from 0 to 100).


189 comments to "Adding an entry or a welcome page"

Man Fashion January 12, 2010 at 11:02 PM    

Cool!! Will definitely consider to put into my Man Fashion blog BTW, thanks for sharing forum feature in blogspot, testing now, hope can configure properly! :)

Ir. hydir January 13, 2010 at 4:19 PM    


DISTRIKMODE January 14, 2010 at 5:13 PM    

Hey Greenlava -- Not sure what I did wrong, it didn't work properly. The text appeared at the top of the site whenever I enter (as normal text), instead of in a lightbox frame. Please advise! Thanks :)

Greenlava January 14, 2010 at 5:46 PM    

@Man Fashion
Good luck

@Ir. hydir
Thanks, jangan lupa datang lagi ye

Could you leave the gadgets on your blog ( or on a test blog) so I can take a look at them?

DISTRIKMODE January 15, 2010 at 10:55 AM    

sure! it's

Greenlava January 15, 2010 at 1:06 PM    

I think I know what the problem is. I see line breaks (br/) inside HTML88 widget code. br/ don't belong in there.

The cause? After you pasted the code, you might've clicked the Rich Text link to see what it looked like on the other "side". When you clicked Edit HTML to return to HTML mode, Blogger replaced the line breaks with br/'s.

Solution? Repaste the code and never click the Rich Text link.

DISTRIKMODE January 18, 2010 at 8:28 AM    

GENIUS! Thanks -- You're THE ultimate blogger guru.

DISTRIKMODE January 19, 2010 at 3:40 PM    

Hmm... this "entry lightbox" keeps appearing every time I refresh the page or click on other tabs on the navigation menu [test page:]. How do I reduce it to appear just once, when visitor first enter the page? Thanks!

Greenlava January 19, 2010 at 4:30 PM    

Read "Configuring the welcome page" second paragraph.

xxx January 24, 2010 at 12:44 PM    

what happen to my welcome page??
it doesn't work..
can you help me out??

Greenlava January 24, 2010 at 10:36 PM    

What's your blog url?

xxx January 25, 2010 at 10:00 AM    

sorry, it's my fault & i already done it..

Eric,  January 28, 2010 at 8:44 PM    

Hi! Thanks for the information! Btw, how to align the text to the left? cause i don't want the text to be at the center. Hope to solve this problem as soon as possible~ Thanks!

Greenlava January 28, 2010 at 9:59 PM    

Add text-align: left; in code line 13.

Ishan .... January 31, 2010 at 5:21 PM    

It doesnot work for me...can you pls tell me what is the problem...
i am using it on my test blog

Greenlava January 31, 2010 at 8:25 PM    

@Ishan ....
I don't see Text88 text widget in your blog. That the problem.

Life of the Night February 2, 2010 at 8:24 PM    

yeah i'm having the same problems as distrikmode.

Greenlava February 2, 2010 at 9:13 PM    

@Life of the Night
Looks okay to me...

Norimaki February 4, 2010 at 4:53 PM    

I'm having the same problem as distrikmode, I checked the html88 widget code, there weren't line breaks and still the message appeared at the top of the site... I had to deleted it, do you have any advise?

Greenlava February 5, 2010 at 1:44 AM    

Try this widget on a test blog, if it still won't work, gimme the test blog url.

Vijayant Katyal February 17, 2010 at 2:18 AM    

Thanks for this useful post....

Ioannis G. February 20, 2010 at 12:51 AM    

Everything looks pretty straight forward ... one question I have ... can we upload images to this splash page?

Greenlava February 20, 2010 at 1:50 AM    

@Vijayant Katyal
My pleasure

@Ioannis G.
Yes you can add images. Go Edit your Text88 gadget in HTML mode. Just add an image code for each image: [img src="ImageUrl"/].
Host your image on Photobucket, Flickr or other image host. Replace ImageUrl with a direct link to the image.

Ioannis G. February 20, 2010 at 6:13 PM    

OK ... will give a go ... Thnx for the advice. Cheers!!!

Ioannis G. February 21, 2010 at 7:35 PM    

One more little problem I have ... the enter button is aligned to the left instead of center ... how do I realign this?

Ioannis G. February 22, 2010 at 3:58 AM    

That's ok man ... I figured it out!!! Thnx for all the infor ... this is a great blog!!!

Ioannis G. February 22, 2010 at 4:01 AM    

By the way ... I removed the make your link at the bottom ... let's face it I didn't want people clicking on this before entering my site ... however as recompense I plan to promote your site on mine some time soon ... check it out if you want...

Greenlava February 22, 2010 at 4:52 PM    

@Ioannis G
Hey... I must say the splash page looks great!

Ioannis G. February 23, 2010 at 3:27 AM    

Once again I call on your advice... After re-editing the slash page the read more thingy is no longer working properly in that it only shows 2 posts rather than all ... which it was doing before ... and for which I used your hacks ... when I click onto older posts they appear with read more ... can you please tell me what the #@%@# is going on here because I am stressed out to he max?

Greenlava February 23, 2010 at 1:57 PM    

@Ioannis G
Can you do one thing to make sure the trouble is indeed caused by the splash page? Copy the HTML contents of Text88 and HTML88 gadget and keep them in Notepad.
Then go to Layout>Page Elements and remove the gadgets.
See if the problem goes away.

Ioannis G. February 23, 2010 at 4:36 PM    

Yes I deleted the splash gadget but problem still persisted. Then I deleted the read more in the html and set the template back to the way it was. After that I repasted in the code but the same thing happened... only two posts were shown on home page with read more ... when I clicked on older posts, each post came up summarized with read more!!! Strange behaviour to say the least. Also, my adwords in side bar fail to load!!! Have since reset the blog to the way it was. The thing is everything was working perfectly until I decided to reedit the text on the splash page ... don't know what happened!!!

Ioannis G. February 23, 2010 at 4:43 PM    

One more issue ... Now when I try to add summary posts gadget on my side bar nothing shows up ... Also the page now seems to take much longer to load!!!

Ioannis G. February 23, 2010 at 4:52 PM    

Have since restored the backup template & will give it a go one more time

Greenlava February 23, 2010 at 5:00 PM    

@Ioannis G
Maybe it might have something to do with Auto Pagination on Blogger

Ioannis G. February 23, 2010 at 7:32 PM    

Hi Greenlava ... the problem persists ... even if I set number of posts to display to e.g. 8 only 2 come up ... no matter what ... also the blogger static pages gadget no longer allows me to reposition them under the header!!! The weird thing is that my test blog is working perfectly ... loading page, read more & static pages are all as they should be!!! I am truly stumped ...

Greenlava February 23, 2010 at 7:57 PM    

@Ioannis G
I think Auto Pagination on Blogger is the culprit here. Lots of people are experiencing same problem.
Blogger help Forum is doing a problem rollup on this matter. Please go to the forum and state your problem there.

Ioannis G. February 23, 2010 at 9:05 PM    

yes you're are right Greenlava ... google has fucked us with auto pagination ... sorry for the french!!!

Greenlava February 23, 2010 at 11:28 PM    

@Ioannis G
I have a feeling you'll be using a lot more french dealing with Google :)

Ioannis G. February 24, 2010 at 10:56 PM    

Hi there Greenlava ... I have to say I am learning new stuff on a day by day basis reading your tutorials ... they have been a tremendous help for a newbie like myself. I do have a couple of questions regarding the static pages however:

1. How do I get rid of the google in-line ads? I cant find the widget/section id...

2. How do I go about changing background colours etc to the static pages so that they look completely different to the main posts?

3. How can I incorporate an image as a background over which I can write stuff?

Any advice would be greatly appreciated here ... and yes the french is pretty full on now!!!

Ioannis G. February 24, 2010 at 11:02 PM    

PS. Can I use live writer to populate/format a static page?

Ioannis G. February 24, 2010 at 11:09 PM    

Oh yes ... and one more issue ... how do I remove the title from the static page without affecting the nav heading?

Greenlava February 25, 2010 at 12:06 AM    

@Ioannis G
1. Go to Layout>Page Elements and click the Edit link inside Blog Posts box. Then in the pop up find Show Ads Between Posts checkbox, untick the box.
2. Read this post Apply different layout/styling to static pages
3. Read Using image as background
4. Static page with WLW? I haven't tried it myself but I think it can't be done.
5. You can try unticking "Automatically add new pages when they are published" checkbox in Pages gadget before removing the title.

Ioannis G. February 25, 2010 at 2:13 AM    

OK ... thanks for all the advice will give it a try ... tomorrow ... will let you know how it goes ... cheers!!!

Ioannis G. February 25, 2010 at 7:50 PM    

Sorry man ... I just can't seem to get my head around formatting the static pages ... don't understand how to position or recolor them or how to add background image to these things ... not to mention getting rid of the adwords at the bottom...

Greenlava February 26, 2010 at 1:01 AM    

@Ioannis G
It seems you are using my hack to create "static pages" not the real static pages (Blogger new feature), so the link in no.2 (in my reply #42 above) should be this one: Creating static pages in Blogger
If you have anymore questions, pls post them there.

Ioannis G. February 27, 2010 at 4:34 AM    

Dear Greenlava,
I have another problem ... don't know from whence it came!!! Now when I click on one of the static pages in my nav bar the splash page appears each time!!!! I checked out the code and found this in place of original...

[!-- Welcome page Start --]
[div id='welcome-wrapper']

[b:widget id='Text88' locked='false' title='' type='Text']
[b:includable id='main']
[!-- only display title if it's non-empty --]
[b:if cond='data:title != ""']
[h2 class='title'][data:title/][/h2]
[div class='widget-content']

When I repaste your code there is a problem ... wtf is going on here? Just when I thought I had it perfect!!!!

Greenlava February 27, 2010 at 10:15 AM    

@Ioannis G.
It's working fine from here.

Ioannis G. February 27, 2010 at 5:30 PM    

Hi Greenlava... did you enter the site and click on one of the static pages? When I do this it reloads the splash page each time!!! This morning when I went to my site the photo from the splash page was gone!!! The same thing also happened to my test blog ... does it have anything to do with the marquee I added to the splash page instead of text? Why is the html (as shown above) completely different from yours now? I don't understand!!!

Ioannis G. February 27, 2010 at 6:08 PM    

Everytime I go to re-paste your html for the splash page into the template the code is rewritten as follows:

[div id='welcome-wrapper']
[b:section class='welcome' id='welcome' showaddelement='no']
[b:widget id='Text88' locked='false' title='' type='Text']

[b:if cond='data:title != ""']
[h2 class='title'>
[b:if cond='data:title != ""']
[h2 class='title'>

Ioannis G. February 27, 2010 at 6:51 PM    

Two more strange things have happened. When I view my blog from layout I can no longer edit individual elements ... the function has completely disappeared. Also one of my RSS feeds in the sidebar is no longer loading. Too many gremlins in the works here ... I think that I might have to restore the original template and start from the beginning!!!

Ioannis G. February 27, 2010 at 9:04 PM    

The splash page is now appearing with side bar!!!

Greenlava February 27, 2010 at 9:34 PM    

@Ioannis G.
Don't restore your template. Everything looks okay from my end.
Try clearing your browser cache, maybe it has something to do with what's happening. Also can you view your blog from another computer?

Ioannis G. March 8, 2010 at 1:22 AM    

Hi there Greenlava, Sorry to bother you again but since our last communication things seem to have gotten much worse with my blog. I have since deleted the splash page because it was loading every time I opened another post, whether it was from a static page or just clicking on older posts. Another problem which manifested itself since putting in other hacks in your blog (viz. the static pages hack) is the disappearance of the edit function (via the hammer icons) from within the blog itself. Now another weird thing is happening ... for no apparent reason I might add!!! ... when I try to add a gadget to the sidebar and try to reposition it the thing fails to move down the sidebar and instead attaches itself to the gadget function beneath the header!!!! According to the html Tidy program the blog contains some 723 warnings of which one is an error reading o[Hb] is not a function which relates to the
Clearly something is messed-up here but I can't figure it out!!! Could you perhaps help? Otherwise I will have to scrap the entire blog since it has essentially shit itself!!!

Greenlava March 9, 2010 at 12:04 AM    

@Ioannis G.
You can undo the hack by clicking the "Revert widget templates to default" at bottom left of the HTML window in Layout>Edit HTML tab. It will return your widgets to its original state.

Robinhood Softwares March 9, 2010 at 10:42 AM    

Hello, I just applied this trick on my blog. Its working and I am happy with it. I would like to change two thing in this hack

1. The border color of ENTER Button. Now it is black. My friends are saying that it is difficult to point out the ENTER button with this opacity. So I decided to change the color of ENTER button to yellow or lawngreen. Please give me the code for that

2. Also as you know that this welcome page remains fixed on the top of the page and when we scroll down, it wont come with that. So how can I make this welcome page to scroll down with cursor.

Can you please help me.

Robinhood Softwares March 9, 2010 at 11:39 AM    

Also say your feedback on my blog. How is the design....

Greenlava March 9, 2010 at 11:59 AM    

@Robinhood Softwares
1. The border code in line 18:
border:outset 3px #000; change #000 to lawngreen.
2. You want it stay onscreen (fixed) just like your back to top button?
Code line 10, replace it with this:
#welcome-wrapper{width:40%;margin:0 auto;height:0px;position:fixed;}
But before you proceed, let me tell you the reason why I made it the way it is.
1. Computer screen resolutions differ from user to user. Maybe you can see the whole message window on your screen, but on my laptop I can't, I have to scroll to see the Entry button. If you fix the window, then I won't be able to enter your blog.
2. Position: fixed won't work with IE.
3. To center the message you will have to manually adjust the margin using margin-left and margin-right. But then again in if you tweak to center it on your screen, it may not center in my screen.

Robinhood Softwares March 9, 2010 at 12:18 PM worked.

I cannot understand what you mean in the third point brother. Can you pls explain if you dont mind...I need to adjust the message board to center. But now its showing on left. I tested.

Consider me as your brother. Let we be friends :)

Robinhood Softwares March 9, 2010 at 12:25 PM    

One more doubt brother

As you can see that the ENTER button is outside the message box. Right? I mean just below the message box.

What is the code inorder to bring the ENTER button inside the message screen and must be at center as it is right now.....

Greenlava March 9, 2010 at 11:31 PM    

@Robinhood Softwares
The third point -in this hack I center the message box using "margin:0 auto;". This code will center the box in any computer screen, no matter what is the screen resolution. If you were to "position:fixed" the box, the auto centering no longer applicable. To center the box you have to use margin-left:VALUEpx to push the box to the center. You need to experiment with different values until it centers.
The problem with this method is let say you finally got the box centered at "margin-left:200px" setting. But when you blog readers see it on their computer screen, the box is not centered, due to different screen resolutions.

To move the Enter button into message box, try add "top:0px;" in #EPEntryButton in line 18. Increasing the value will lower the button.

microsnitch March 11, 2010 at 1:55 AM    

HI! nice tutorial you got here. I have some questions.

1. The 'Enter' button is at the left. How do I make it appear at the center? Or if possible, I want the button to appear at the upper right portion of the 'message box' (within the message box).

2. I want the message (box) to disappear whenever I click anywhere outside the box.

Thanks =)

Greenlava March 12, 2010 at 2:53 AM    

1. Add "text-align:center;" in #welcome -wrapper (line10). To raise the button, add "top:VALUEpx" in #EPEntryButton, you can even use negative number for VALUE.
2. No answer for that just yet.

RHS May 7, 2010 at 8:14 PM    

Hi, greenlava. how r u. If I need to add an "ENTER" Button instead of the button mentioned here, I mean adding a third party image "ENTER" button, what should I do with the code above. Can you help me in that?

Greenlava May 7, 2010 at 9:19 PM    

To use an image, just replace the word "ENTER" with an image tag:
After that, you may also need to modify the code in line 18 to fine tune the styling.

RHS May 8, 2010 at 12:21 AM

Here is the button link, that i need to use as button in the entry page. Also as you told,
I dont know how to modify the code in line 18 to fine tune the styling.

What I need is, just replace the entry button now you can see in my blog with the image shown above. I also need a border for the image button with thickness 5px and yellow in color. Also note that this image button should
be in the exact place of the current button provided by you (as you can see in my blog now).

I am asking so many help from you. If you feel this as a disturbance, sorry Brother.

Also I am planning to add a blog of month ad on the home page of my blog and I selected your blog first for that. I will display it on the home page, so I need a banner of your blog. I will mention the size later. It will be there on my blog for one month or more for free. Your website link will be provided there so that your blog will get lot of visitor as I hope.

Thank you

Greenlava May 8, 2010 at 1:11 PM    

Replace your existing code with these (replace [] with <>).
line 4:
[center][a id="EPEntryButton" onclick="document.getElementById("HTML88").
style.display="none";document.getElementById("Text88").style.display="none""][img src=''/][/a][/center]

line 18:
#EPEntryButton img {border:5px solid yellow;}

RHS May 8, 2010 at 1:30 PM    

Hi Brother, I can't enter into my website after clicking on the button

Greenlava May 8, 2010 at 2:41 PM    

Use this one in line 4:
[center][a id="EPEntryButton" onclick="document.getElementById("HTML88").style.display="none";document.getElementById("Text88").style.display="none""][img src=''/][/a][/center]

RHS May 8, 2010 at 2:51 PM    

No change. Same problem, not getting entered. I can't find any difference in both the codes that you provided now and before. Pls check. I just applied it. Not entering

Greenlava May 8, 2010 at 3:52 PM    

The code I gave in reply 68 was different (I escaped the quotes) but somehow Blogger interpreted as you see it now.
Okay here's whet you do, just use the original code in line 4 (in this article) and add in
[img src=''/]
replacing the word "ENTER".

Gurpreet Singh May 18, 2010 at 7:49 PM    

Thanks for this great widget but I want to add email subscription instead of welcome note so that when some come enter their email address and click on subscribe than welcome window disappear so how it will be possible. So please write up a solution for the same. Thanks

Afiliate Store May 19, 2010 at 5:04 PM    

Thank you.

Greenlava May 20, 2010 at 12:16 PM    

@Gurpreet Singh
Sorry I don't have a solution for you, but I think it is possible though.

@Afiliate Store
You're welcome.

Robin Hood Softwares June 21, 2010 at 11:36 AM    

Hi, greenlava, I am using this script in my blog. It worked perfectly till yesterday. Today when I changed the info in the entry page and saved, it is showing error like : The title should not be blank. As you know if we add title in that page element, it won't be good. what to do. Please help. i think blogger is now strict with titles for each gadgets using.

Greenlava June 21, 2010 at 11:40 PM    

@Robin Hood Softwares
Yup Blogger apparently did change something. Anyway some people suggested a workaround, by entering [h2][/h2] tag in the title text box. However I think you can enter just about any empty tag. Try [b][/b] tag, see if that work.
Remember to replace [] with <>.

Robin Hood Softwares June 22, 2010 at 12:20 AM    

Yeah it worked. Thanks a lot. There is also another way. But it is little bit complex than this simple one. It is none other than removing [h2 class='title'][data:title/][/h2] tag from that particular widget. Not from all as you know, only for one we don't need title. I tried this too and worked. But your suggestion is more simple than this. Anyway thanks Greenlava.

Sarah July 2, 2010 at 8:47 AM    

GreenLava: My welcome message, on my blog home page, no longer works (I broke it). Some time ago, you fixed this for me. If you have time can you please look at I have my welcome message on HTML99 and the code looks correct, but it does not appear on my home page.

I invited you to be an author.

Thanks for any assistance and/or advice.


Greenlava July 3, 2010 at 1:24 PM    

Invitation accepted.

Battousai July 6, 2010 at 11:25 PM    

its not working. [head] doesnt exist in edit and even if u go to [head... and paste the code below ( u get the ability to make gadget above title/header ) , the code here at step 3 isnt working. Maybe blogger made some changes that require you to make changes to ur code too. can someone check it plz?

Greenlava July 7, 2010 at 11:10 AM    

What do you need the [head] for? The HTML [head][/head] section does not correspond to blog header. Blog header is actually lies inside [body][/body] section in your HTML.
If you see the page elements screenshot, the added widgets do lie on top of blog header already.

First Aid Greece July 14, 2010 at 5:51 AM    

Hello Greenlava,

I have applied your amazing widget and it works great! Thank you very much for your time and effort, your site is a wonder of knowledge for me.

I only want to ask one thing: Why doesn't IE 7 show my enter button and the different opacity around the message box? Have I done something wrong? The blog is

Greenlava July 14, 2010 at 11:47 AM    

@First Aid Greece
I see this in your source code (code line 23):
#EPDarkLayer {position:absolute;}javascript:void(0)

this "javascript:void(0)" does not belong there. I don't know how does it look in your actual code, but you want check code line 23 again. Make sure you only have
#EPDarkLayer {position:absolute;}
in that line.

First Aid Greece July 15, 2010 at 7:37 AM    

Greenlava, thank you.

I removed the part you told me but still no ENTER button is shown in IE.
Any other ideas?

Thank you again

Greenlava July 15, 2010 at 11:13 AM    

@First Aid Greece
Apparently this hack didn't work with Designer Template due to IE z-index bug.
Anyway I've fix it, it's good now (I hope so). I revised code line 14 and 21. Please update yours accordingly.

Sarah July 16, 2010 at 10:49 AM    

I tried every step. however my template did not have[body] it had [/body] so I copied the code below. followed remaing steps . when I looked at the blog I had it at the bottom left hand corner. all in text lined.. It was weird and not what i was wanting. Dont know what to do next ? I really want to add a landing page

Greenlava July 16, 2010 at 1:07 PM    

For Template Designer's template look for this (instead of [body]):
[body expr:class='"loading" + data:blog.mobileClass']

First Aid Greece July 16, 2010 at 2:53 PM    

Greenlava thank you, it works great now!

Sushila Chamling August 5, 2010 at 1:06 AM    

I tried everything possible but the entry page seem to be showing up in every page. Please help.

Greenlava August 5, 2010 at 8:35 AM    

@Sushila Chamling
Have you entered your blog url in code line 28?

Edwin August 23, 2010 at 4:26 AM    

Its all working perfectly except it loads every time u visit my page or other pages on it. How do you make it so that it only loads once like something that has to do with cookies i guess.

Any help?

Greenlava August 23, 2010 at 5:11 PM    

Yes you'll need cookies for that, but sorry can't help you on that. I need some learning myself.

a good catch August 24, 2010 at 11:36 AM    

Thank you so much.. I made it in my blog..

thank you

Grapiglia Arquitetura August 28, 2010 at 3:25 AM    

Super cool!
I changed the colours a bit, but you won't mind, will you? I also changed the button "ENTER" text to "ENTRAR", in portuguese... cuz I'm from Brazil... blah blah blah XD
Also, is there a way to change the white background of the message into a picture?
Thanks a lot!


Greenlava August 28, 2010 at 7:02 PM    

@Grapiglia Arquitetura
In code line 13, replace
background-color:#fff url(PUT DIRECT LINK TO YOUR PICTURE HERE) no-repeat.
(for details of background coding refer to Using image as background)

tunteja August 29, 2010 at 4:18 AM    

worked perfectly. tweaked with the colors a bit. works like a charm. thanks. do drop by

Greenlava August 29, 2010 at 12:33 PM    

You're welcome.

Adrian Vieni September 6, 2010 at 6:55 AM    

is there any way I can add a video to the 'splash page' and then the enter button underneath? thank you so much for your help!

Adrian Vieni September 6, 2010 at 10:02 AM    

nevermind. I got the video in but when I go click enter and it goes to my blog, the video keeps playing. How do I make it stop?

Greenlava September 6, 2010 at 7:13 PM    

@Adrian Vieni
It seems pressing the stop button is the only way to go (to stop the video) :(

Adrian Vieni September 6, 2010 at 10:56 PM    

someone told me to add this. But I don't know where I am supposed to add it?

[a id="EPEntryButton" onclick="document.getElementById("HTML88").style.display="none";document.getElementById("Text88").style.display="none"foo=document.getElementById('EPDarkLayer');foo.parentNode.removeChild(foo)"]

Adrian Vieni September 6, 2010 at 11:23 PM    

Also Greenlava, would any of these functions work if I embed the vimeo video through the old code instead of the iframe one? Thanks a lot for your help!

haeki September 7, 2010 at 12:05 AM    

hi! after many trials and error i finally got it right.
i have one concern though, i added a pic in the welcome text but it is not placed in the center of the box >_<

Greenlava September 8, 2010 at 1:37 PM    

@Adrian Vieni
1. I don't know what the code does. Most probably it's intended to replace line 4.
2. I don't think I would make any difference.

Greenlava September 8, 2010 at 1:54 PM    

You have lots of unnecessary contents in your Text88 gadget.
Replace them (in HTML mode) with this:
[a href="" target="_blank"][img src="" border="0" alt="Image and video hosting by TinyPic" /][/a][br/]Welcome to H134![br /]

replace [ and ] with < and > respectively.

haeki September 8, 2010 at 7:46 PM    

thank you! ^_^your tutorials have really been of great help :)
oh yeah, i deleted the 'Make your own'... but I'll put a link back to here ^_^

Joe,  October 6, 2010 at 10:51 AM    

Kind of an annoying feature when you have pages. Every page you click on this pop up comes up. Can't see readers appreciating this. I removed it.

Isn't there a way so it will only work when you initially arrive to the site, the home page. Not every single page you click on?

Greenlava October 6, 2010 at 11:07 AM    

Have you replaced YourBlogUrl in code line 28 with your own blog URL?

माझी दुनिया October 19, 2010 at 10:41 PM    

i am able to put text but how to put image there i mean what should be there ? just check this image i wish to be seen there below the text.

Greenlava October 19, 2010 at 11:11 PM    

@माझी दुनिया
This what you have right now:
[img src=""/]
To make it work, replace [ with < and ] with >.

माझी दुनिया October 20, 2010 at 1:04 PM    

oh ! lovely, it works, thans a lot !

fussy,  October 27, 2010 at 2:21 AM    


i have added a pic to my splash page but i couldnt get it to align to the left.
and 1 more thing, when i click on the pic, it goes to my photobucket url intead of my blog. how do i fix this?

Please advice!


fussy,  October 27, 2010 at 2:24 AM    

oh ya.
i inserted the pic in the text gadget instead of the html gadget

Greenlava October 27, 2010 at 2:41 PM    

Use this code for the image:
[a style="text-align:right;" href="PUT YOUR BLOG URL HERE"><img src="PUT IMAGE URL HERE" ][/a]

the IndoorOutdoor November 11, 2010 at 10:56 AM    

In comment to post #106
I am running into the same problem.
The welcome page I have added (thanx to you !! ) appears every time I click on a new page from my static page. I only need that welcome page to appear on my static page.
And what line changes text size?
thank you.

the IndoorOutdoor November 11, 2010 at 11:10 AM    

and pardon me that was text size for " the IndoorOutdoor "
titling the the welcome page.. thank for your help.

Greenlava November 11, 2010 at 3:07 PM    

@the IndoorOutdoor
1. Don't use capital letters in your URL. Need to replace "" with ""
2. Change the value of font-size in code line 18.

Greenlava November 11, 2010 at 3:14 PM    

@the IndoorOutdoor is for the button.
To change the font-size for the title, add this after line 13:
#Text88 h2 {font-size: 20px;}

the IndoorOutdoor November 12, 2010 at 7:20 AM    

Thank you.... Because of individuals like yourself that take the time to share your knowledge you make it enjoyable for people like mylself to actually try and get a handle on some html..

Greenlava November 12, 2010 at 8:13 PM    

@the IndoorOutdoor
Thanks for the nice words, I appreciate it :)

charis,  November 13, 2010 at 6:41 PM    

is this working on you???? it does not work on mine

charis0926 November 13, 2010 at 7:06 PM    

thanks ^^ it worked!!!!!

admin November 15, 2010 at 2:29 AM    

Greenlava, you're great. this feature is just what I needed for my company's website! thanks so so so much :)
I'm a newbie in html and your tutorials are so easy to follow that I almost believe I'm a good programmer :)))

admin November 15, 2010 at 5:07 AM    

Houston, we have a problem :)
The code works. I have a welcome message now, but there is a problem.
The links in related posts (that I installed as per instructions from here: take me to the welcome page again :(
Can we change that? Please?

Greenlava November 15, 2010 at 4:17 PM    

This might work:
1. Include a second referrer search, by adding this after line 29:"");
2. Put the search result in the conditional (using logical OR), by replacing line 33 with this:
if (fromInternal==-1 || fromInternal2==-1)

Good luck

admin November 16, 2010 at 8:13 AM    

still not working :(
check it out on my blog

here's html code changed just as you said:;"");//check come from where
if (fromInternal==-1 || fromInternal2==-1)
{ //if visitor comes from external page

admin November 16, 2010 at 8:20 AM    

P.S. with this added code, even changing from one static page to another makes the welcome page appear :(

Greenlava November 16, 2010 at 10:05 PM    

On second thought, I think logical AND would be more appropriate, like this:
if (fromInternal==-1 && fromInternal2==-1)

admin November 17, 2010 at 2:43 AM    

sorry, still not workig :)
well, I guess I have to forget the welcome page or the related posts. they don't like each other

elmyra November 21, 2010 at 4:44 AM    

thanks man! its work! :)

Greenlava November 21, 2010 at 3:50 PM    

You're welcome.

Abhisek November 24, 2010 at 5:34 AM    

Thanks for the code visit and see it in action.

Beben December 2, 2010 at 4:16 AM    


Greenlava December 2, 2010 at 9:52 PM    

Thanks guys. Do come back...

pooja,  December 4, 2010 at 5:39 PM    

hai unale to do this hack please help me out and i done wht as u said but it not works

avnrurfriend December 4, 2010 at 5:41 PM    

help me im unable to get it i done wht u had prescribed even though it not worked out

Greenlava December 5, 2010 at 1:11 AM    

Could you be more specific?

Anonymous,  December 6, 2010 at 4:30 PM    

There's a problem that you can't close the box after you're finished. How do you fix that?

Pure Bliss Bridal & Beauty House December 18, 2010 at 11:39 PM    

Hi Greenlava, i tried your tutorial but it doesn't work on my side. Can u help me?

Greenlava December 19, 2010 at 10:09 AM    

@Pure Bliss Bridal & Beauty House
I can see the box/message. What's the problem?

SV December 20, 2010 at 3:05 PM    

Nice tutorial,I have a problem, expr:class='"loading" + data:blog.mobileClass' this code is appearing on my blog Can you please help me to get rid of it from my blogs header.

Thanks in advance

Greenlava December 20, 2010 at 11:42 PM    

Did the problem start after you added the "prevent right click" code? Anyway
1. Go to Dashboard > Design > Edit HTML.
2. Find and delete this line of code:
expr:class='"loading" + data:blog.mobileClass'>

SV December 21, 2010 at 2:54 AM    

Hey Greenlava,

Thanks a ton.I deleted the above code.Your solution for my problem worked. Now that code is not showing up in my blog.
Thanks for your immediate reply.
May God bless you!

SV December 21, 2010 at 3:10 AM    

Yes this code started to appear after I added prevent right click.I followed your instruction.It worked for me.
Thanks a million.May God bless you!

SV December 21, 2010 at 3:14 AM    

I have question.Is there any ways to disable printscreen so that I can protect my images in my blog.
Thanks in advance!

aqeyLs December 27, 2010 at 5:30 PM    

hye.. how can i change the layout of the box? i dun wan it to be dull & white by adding sum picture as background..

tqvm.. very much appreciated:)

aqeyLs December 27, 2010 at 7:41 PM    

hey btw, is there any code not to let this welcome box appear everytime we refresh it??

it's bothering me, a lot^^


Greenlava December 27, 2010 at 9:34 PM    

I'm afraid there's none :(

roni ayoung January 5, 2011 at 11:01 AM    

thanks for your tip
salam kenal, brow

Rocco Abazia - ITALY January 22, 2011 at 6:11 AM    

Thanks so much, i live in italy, but here all know about welcome page , but it repeat every time when you read a post.

Now is wonderful , thank you so much.

Manoj February 20, 2011 at 10:23 PM    

s "entry lightbox" keeps appearing every time I refresh the page or click on other tabs on the navigation menu [test page:]. How do I reduce it to appear just once, when visitor first enter the page? Thanks!

Srivathsan March 27, 2011 at 7:27 PM    

Hello Green Lava.

This is a great widget for a blogger blog. And it is working for.

But I want it to be floating. Can you please make this widget as a floating one.

Greenlava March 27, 2011 at 9:58 PM    

Use this code in line 10:
#welcome-wrapper{width:40%;margin:0 auto;height:0px;text-align:center;position:fixed;}

You can move it horizontally by changing the margin.

MastiMagic April 13, 2011 at 4:35 PM    

its not done dude.....whats wrong ???

enimerwsi April 14, 2011 at 4:26 PM    

Hello. I am having a problem. The message appears in every pageview.Help?

Greenlava April 15, 2011 at 10:23 PM    

Have you replaced in code line 28 with your own blog url?

A friend,  April 25, 2011 at 2:13 AM    

I had many troubles trying to make this nifty script/gadget work with a template made by Artisteer..
Got it figured out, does not work as it should be, but it should do its' job!

My (your) gadgets would not seem to respond after i added them on top of the welcome wrapper, they froze and could not be configured/moved..
Of course i wouldn't bother going to Bloggers template builder, because it's a brainmist.

Using Artisteer i removed the NavBar (unnecessary bandwidth :P ) and after that, i thought i could replace the "navbar section" class and replace it inside your script.

This should do the job:
[!-- Welcome page Start --]
[div id='navbar']
[b:section class='navbar section' id='Navbar1' showaddelement='no']
[b:widget id='Text88' locked='false' title='' type='Text'/]
[b:widget id='HTML88' locked='false' title='' type='HTML'/]
[!-- Welcome page End --]

Would this work for you? Dunno!
Did it work for me? - Yes, with some minus errors (buttons went to the left, but with CSS you can fix that)!

I also added a [LEAVE] button, next to [ENTER], here it is:
[a id="EPEntryButton" onclick="window.close()"]LEAVE[/a]

Just replace [] with <>

Will bookmark, if i could be of any use!

Anonymous,  April 25, 2011 at 2:24 AM    

OK i just figured out why the buttons moved to the left and the block was all side-to-side on all blog,
i forgot to change the CSS from this:

#welcome-wrapper{width:40%;margin:0 auto;height:0px;text-align:center;}

Into this:

#navbar{width:40%;margin:0 auto;height:0px;text-align:center;}

This here, fixed all my problems and works now like a charm.. Although i'm brain dead and haven't slept for straight 29 hours, hopefully my mind is still functional :P

Cheers if i helped anybody!

Greenlava April 25, 2011 at 2:45 PM    

@A friend
Thanks for sharing.
As for you my friend, go get some sleep before you hurt yourself :)

Chris Bester April 27, 2011 at 3:19 AM    

Thanks for assistance.How can I get something like your email updates link above?

Greenlava April 30, 2011 at 2:08 PM    

@Chris Bester
Which one is that?

sam May 6, 2011 at 5:33 PM    

This is really a nice trick and I will implement this in my blog. Thanks

Mohammad,  June 18, 2011 at 7:17 AM    

Thx a lot i don't understand why people have many problems
it's work awesome.

University News Bangladesh July 4, 2011 at 2:00 AM    

Thanks. I will try it.

B Giridharan July 22, 2011 at 8:11 PM    

Thanks for the widget, I have implemented in two of my blogs, whether this will decrease my page ranking is what I want to know because from whatever traffic we come searching from we land up in this one page.

Greenlava July 26, 2011 at 11:36 PM    

@B Giridharan
You don't need to woory about that because this "welcome page" is not a page at all, it's a widget. We just style it to appear as a page, to human.
To the search engine the "Welcome page" is just a another widget as such it's just a small portion of the page you landed on.

Alexander Bartleet October 27, 2011 at 5:54 PM    

Someone please answer the problem in regards to making the splash page only appear when typing the main URL not everytime you click a page. PLEEAAASSSEE!

Greenlava October 27, 2011 at 7:50 PM    

@Alexander Bartleet
You can do that by adding a conditional tag.
Wrap the entire code in step 6 in this conditional tag:
[b:if cond='data:blog.url == data:blog.homepageUrl']

Anonymous,  November 3, 2011 at 6:31 AM    

My entry button doesn't really work; it doesn't do anything when you click on it.
Can anyone help?

Know A Brand December 20, 2011 at 11:20 PM    

how to add picture into background of this page?

Greenlava December 21, 2011 at 9:45 PM    

@Know A Brand
Apply the background code to line 13, like so:
#Text88 {background: url("PUT THE PIC'S URL HERE") #fff; border:solid 10px orange;color:#222; display:none; padding:15px;}

Fashionteam Bangladesh December 26, 2011 at 2:30 PM    

how to create blank "entry" page?

DVD Replication December 28, 2011 at 9:26 PM    

Thanks for providing that coding its really very helpful for me when i will try it.

MarkevMarketing January 6, 2012 at 12:56 PM    

Comment 141: expr:class='"loading" + data:blog.mobileClass'>
I have opened the HTML and Expanded it many times. Used Ctrl+F and I can not find the code to delete for the life of me! Any ideas? (Top Left) thanks in advance.

Greenlava January 7, 2012 at 3:01 AM    

In you case, it's located right above
[div class='body-fauxcolumns']

MarkevMarketing January 8, 2012 at 12:11 AM    

@Greenlava!! Thank you so much!! It's Gone!

Sandra,  January 18, 2012 at 6:29 PM    

Thanks for this, it worked perfectly!

Robert,  February 6, 2012 at 8:00 PM    

Thank You for the great widget, but I have a problem, it is always appearing on every page instead only one time on the first page.
I have followed Your instructions , but with no success. Please look at my test blog

my site is

I've followed the steps but the landing page never appears. I type in my url (as above) but it just goes to my site proper.

In place of my blog url (within the widget html) I've put my domain name which is pointed to the blog. Is the issue?

Any help much appreciated. Thank you :)

Problem fixed... no worries. Thanks again for the great code :)

Bernard May 17, 2012 at 4:56 PM    

Is this OK for Adsense TOS?

Bernard May 18, 2012 at 9:19 AM    

I already commented 2 questions and yet it's not been posted here. unlucky

Greenlava May 18, 2012 at 4:33 PM    

Now that you mention it, it does block the page (ads included) before you click the Enter button. So technically it may not comply with Adsense TOS.

Bernard May 22, 2012 at 12:26 PM    


Evandro Junqueira Ramos July 11, 2012 at 1:54 AM    


dark alexander August 14, 2012 at 2:23 PM    

Nice job, thanks!

Guidance ✰ August 25, 2012 at 8:27 AM    

Thank you so much!!!
I've been looking for a welcome page that isn't annoying and looks good for hours.. You saved me! Finally I can go to sleep.

Tips Trik Blogging December 26, 2012 at 8:17 AM    

thans for the great tuts

Sonny Ellar January 16, 2013 at 6:37 PM    

wow this is really great! :) Thanks!

PhilippineProperties101 March 2, 2013 at 9:23 AM    

Cool! Very nice while site is loading.

Click to go to top Click to comment