<a href="http://www.bloglovin.com/blog/3824361/sciencezen?claim=ntsax8ztjq9">Follow my blog with Bloglovin</a>
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. Sort of like an alert box, but looks nicer and comes without the annoying sound. 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.
The page comes with these features:
How To Add An Entry Or A Welcome Page To Blogger?
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 Template > Edit HTML.
4. Make sure the Expand Widget Templates check box is unticked.
5. Find this code in your template HTML:
6. Copy the code below and paste it immediately after the code in step 5:
1. Go to Layout. You should see the newly added widgets above the header.
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.
4. Then proceed with the HTML/Javascript gadget (HTML88). Add the code below in the content box:
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. Sort of like an alert box, but looks nicer and comes without the annoying sound. 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.
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.
How To Add An Entry Or A Welcome Page To Blogger?
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 Template > Edit HTML.
4. Make sure the Expand Widget Templates check box is unticked.
5. Find this code in your template HTML:
<body><body expr:class='"loading" + data:blog.mobileClass'>
6. Copy the code below and paste it immediately after the code in step 5:
Adding contents to the gadgets<!-- 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'/> </b:section> </div> <!-- Welcome Page End -->
1. Go to Layout. You should see the newly added widgets above the header.
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.
4. Then proceed with the HTML/Javascript gadget (HTML88). Add the code below in the content box:
<!-- Welcome Page Start. 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("HTML88").style.display="none";document.getElementById("Text88").style.display="none"">ENTER</a> </div> <div id="EPGrab"><a href="http://beautifulbloggerwidgets.blogspot.com/2012/06/add-entry-or-welcome-page-to-blogger.html" target="_blank">Get this widget</a></div> <div id="EPDarkLayer"></div> <!-- CSS part --> <style> #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;} </style> <!--[if IE 6]> <style> #EPDarkLayer {position:absolute;} </style> <![endif]--> <!-- Javascript part --> <script type="text/javascript"> YourBlogUrl="http://beautifulbloggerwidgets.blogspot.com/"; //enter your blog url here fromInternal=document.referrer.search(YourBlogUrl); //check come from where getDarkLayer=document.getElementById("EPDarkLayer").style; getText88=document.getElementById("Text88").style; getHTML88=document.getElementById("HTML88").style; 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 } else { //if visitor comes from internal page getHTML88.display="none"; //hide HTML gadget getText88.display="none"; //hide message } </script> <p style="display:none;">Add An Entry Or A Welcome Page To Blogger by <a href="http://beautifulbloggerwidgets.blogspot.com/">Beautiful Blogger Widgets</a></p> <!-- Welcome Page End -->
onfiguring 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).
Happy Blogging =)
3 comments:
Very very helpful. I am so thankful that you have shared this wonderful stuff to us. Thanks a lot my marketing agencies phoenix likes this so much. Have a nice day!
Please you help me, I only want it the first visit.
ie: If a visitor visit my site he will have to see the welcome page only once, Just as in Forbes.com.
There you notice you only the page just once then you can browse other pages and post without encountering it again.
Thanks
not working
Post a Comment