ADDING AN ENTRY OR A WELCOME PAGE ~ The Origin for Screamers

ADDING AN ENTRY OR A WELCOME PAGE

Do you like this story?

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 the visitor “enters” the blog. Sort of like an alert box, but looks nicer and comes without the annoying sound.

The page comes with these features:

Lightbox type message window.
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.
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.
Only external visitors will go through the welcome page. Readers coming from any one of your blog pages will bypass this page.

Live: 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:

Login to your to your Blogger account.
Back up your template.
At Dashboard go to Design > Edit HTML.
Make sure the Expand Widget Templates check box on top right of the HTML window is unticked.
Find this code in your template HTML:
- -if you are using Layout templates, or
- -if you are using Template Designer’s template.
Copy the code below and paste it immediately after the code in step 5:

view source print ?

1

2 <div id='welcome-wrapper'>

3 <b:section class='welcome' id='welcome' showaddelement='no'>

4 <b:widget id='Text88' locked='false' title='' type='Text'/>

5 <b:widget id='HTML88' locked='false' title='' type='HTML'/>

6 b:section>

7 div>

8

Adding contents to the gadgets

Go to Design > Page Elements. You should see the newly added widgets above the header.
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.
Then proceed with the HTML/Javascript gadget (HTML88). Add the code below in the content box:

view sourcent?

01

02

03 <div style="padding-top:15px;">

04 <a id="EPEntryButton"onclick="document.getElementById("HTML88").style.display="none";document.getElementById("Text88").style.display="none"">ENTERa>

05 div>

06 <div id="EPGrab"><ahref="http://www.bloggersentral.com/2010/01/adding-entry-or-welcome-page.html" target="_blank">Make your owna>div>

07 <div id="EPDarkLayer">div>

08

09 <style>

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

11 /* welcome message widget */

12 #Text88, #EPEntryButton, #EPGrab {position:relative;z-index:510;top:100px;}

13 #Text88 {background-color:#fff;border:solid 10px orange;color:#222;display:none;padding:15px;}

14 #HTML88 {z-index:499;display:none;}

15 /* DarkLayer div */

16 #EPDarkLayer {background-color:#000;opacity:0.6;filter:alpha(opacity=60);top:0px;left:0px;z-index:500;position:fixed;}

17 /* Entry button */

18 #EPEntryButton {background-color:lawngreen;border:outset 3px #000;color:#333;cursor:pointer;font-size:25px;padding:5px;text-decoration:none;}

19 #EPGrab {color:white;padding-top:10px;}

20 style>

21

26

27 <script type="text/javascript">

28 YourBlogUrl="http://bloggersentral.blogspot.com/"; //enter your blog url here

29 fromInternal=document.referrer.search(YourBlogUrl); //check come from where

30 getDarkLayer=document.getElementById("EPDarkLayer").style;

31 getText88=document.getElementById("Text88").style;

32 getHTML88=document.getElementById("HTML88").style;

33 if (fromInternal == -1)

34 { //if visitor comes from external page

35 getDarkLayer.width=screen.availWidth+"px"; //set DarkLayer width

36 getDarkLayer.height=screen.availHeight*2+"px"; //set DarkLayer height

37 getHTML88.display="block"; //show DarkLayer

38 getText88.display="block"; //show message

39 }

40 else

41 { //if visitor comes from internal page

42 getHTML88.display="none"; //hide HTML gadget

43 getText88.display="none"; //hide message

44 }

45 script>

46

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

in your code, thus ruining it.

YourBlogUrl –this is your blog url, replace http://bloggersentral.blogspot.com/ (in code line 28) with your own blog url.
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).