Adding a lading page or a welcome page for blogger ~ My Geeks

Monday, January 9, 2012

Adding a lading page or a welcome page for blogger

Have a look at this demo,
http://bswidgetshowcase.blogspot.com/

if that's what you want, here is the tutorial:
http://bloggersentral.blogspot.com/2010/01/adding-entry-or-welcome-page.html

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:

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.

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:

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:
- <body> -if you are using Layout templates, or
- <body expr:class='"loading" + data:blog.mobileClass'> -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:

01<!--
 Welcome page Start (c) 2010 Blogger Sentral. Original code by 
http://www.bloggersentral.com/. Please do not remove this credit and the
 “Get this widget” link at the bottom of the widget. -->

02<!-- HTML part -->

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

04<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>

05</div>

06<div id="EPGrab"><a href="http://www.bloggersentral.com/2010/01/adding-entry-or-welcome-page.html" target="_blank">Get this widget</a></div>

07<div id="EPDarkLayer"></div>

08<!-- CSS part -->

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;/*bs-aewp*/z-index:500;position:fixed;}

17/* Entry button */

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

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

20</style>

21<!--[if IE 6]>

22<style>

23#EPDarkLayer {position:absolute;}

24</style>

25<![endif]-->

26<!-- Javascript part -->

27<script type="text/javascript">

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

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

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

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

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

33if (fromInternal == -1)

34{ //if visitor comes from external page

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

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

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

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

39}

40else

41{ //if visitor comes from internal page

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

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

44}

45</script>

46<!-- 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.

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).

Enjoy!

My Geeks

Monday, January 9, 2012