Whenever I visit an interesting blog that is new to me, I always look for an About page. Unfortunately, too many newer food blogs lack this critical feature.
A well written and organized About page is like a one-page resume for your blog. It acts as a welcome mat that leads them comfortably into the rest of your site. New visitors to your site may click through to it to find out more about you and your blog -- if they like what they see there, they are more likely to come back again. I believe that the more a person is a regular reader of blogs, the more likely they are to click through to an About page. Potential advertisers or clients will most likely look for an About page too.
A well written and organized About page is like a one-page resume for your blog. It acts as a welcome mat that leads them comfortably into the rest of your site. New visitors to your site may click through to it to find out more about you and your blog -- if they like what they see there, they are more likely to come back again. I believe that the more a person is a regular reader of blogs, the more likely they are to click through to an About page. Potential advertisers or clients will most likely look for an About page too.
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.
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:
1<!-- Welcome page Start -->2<divid='welcome-wrapper'>3<b:sectionclass='welcome'id='welcome'showaddelement='no'>4<b:widgetid='Text88'locked='false'title=''type='Text'/>5<b:widgetid='HTML88'locked='false'title=''type='HTML'/>6</b:section>7</div>8<!-- Welcome page End -->
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 THE HACKERS CLAN Original code by http://thehackersclan.blogspot.com/. Please do not remove this credit and the “Get this widget” link at the bottom of the widget. -->02<!-- HTML part -->03<divstyle="padding-top:15px;">04<aid="EPEntryButton"onclick="document.getElementById("HTML88").style.display="none";document.getElementById("Text88").style.display="none"">ENTER</a>05</div>06<divid="EPGrab"><ahref="http://thehackersclan.blogspot.com/2011/11/adding-entry-or-welcome-page.html"target="_blank">Get this widget</a></div>07<divid="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<scripttype="text/javascript">28YourBlogUrl="http://thehackersclan.blogspot.com/"; //enter your blog url here29fromInternal=document.referrer.search(YourBlogUrl); //check come from where30getDarkLayer=document.getElementById("EPDarkLayer").style;31getText88=document.getElementById("Text88").style;32getHTML88=document.getElementById("HTML88").style;33if (fromInternal == -1)34{ //if visitor comes from external page35getDarkLayer.width=screen.availWidth+"px"; //set DarkLayer width36getDarkLayer.height=screen.availHeight*2+"px"; //set DarkLayer height37getHTML88.display="block"; //show DarkLayer38getText88.display="block"; //show message39}40else41{ //if visitor comes from internal page42getHTML88.display="none"; //hide HTML gadget43getText88.display="none"; //hide message44}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://thehackersclan.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
widthcan be changed in code line 10. - The message window can be adjusted vertically by changing
topvalue 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). - THIS IS MY POST ON Adding An Entry Or A Welcome Page.IF U LIKE IT MENTION IT IN COMMENTS.
No comments:
Post a Comment