Adding an entry or a welcome page
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:
<!-- 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 -->
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:
<!-- 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. --> <!-- 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://www.bloggersentral.com/2010/01/adding-entry-or-welcome-page.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://bloggersentral.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> <!-- 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
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).
- Message window
Enjoy!
187 comments to "Adding an entry or a welcome page"
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! :)
nice
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 :)
@Man Fashion
Good luck
@Ir. hydir
Thanks, jangan lupa datang lagi ye
@DISTRIKMODE
Could you leave the gadgets on your blog ( or on a test blog) so I can take a look at them?
sure! it's http://distrikmode5.blogspot.com/
@DISTRIKMODE
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.
GENIUS! Thanks -- You're THE ultimate blogger guru.
Hmm... this "entry lightbox" keeps appearing every time I refresh the page or click on other tabs on the navigation menu [test page: www.distrikmode5.blogspot.com]. How do I reduce it to appear just once, when visitor first enter the page? Thanks!
@DISTRIKMODE
Read "Configuring the welcome page" second paragraph.
what happen to my welcome page??
it doesn't work..
can you help me out??
@xxx
What's your blog url?
sorry, it's my fault & i already done it..
thnx..
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!
@Eric
Add text-align: left; in code line 13.
It doesnot work for me...can you pls tell me what is the problem...
i am using it on my test blog
http://duplicatemyfundoo.blogspot.com/
@Ishan ....
I don't see Text88 text widget in your blog. That the problem.
yeah i'm having the same problems as distrikmode.
@Life of the Night
Looks okay to me...
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?
@Norimaki
Try this widget on a test blog, if it still won't work, gimme the test blog url.
Thanks for this useful post....
Everything looks pretty straight forward ... one question I have ... can we upload images to this splash page?
@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.
OK ... will give a go ... Thnx for the advice. Cheers!!!
One more little problem I have ... the enter button is aligned to the left instead of center ... how do I realign this?
That's ok man ... I figured it out!!! Thnx for all the infor ... this is a great blog!!!
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...
http://ancientemporium.blogspot.com/
@Ioannis G
Hey... I must say the splash page looks great!
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?
@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.
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!!!
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!!!
Have since restored the backup template & will give it a go one more time
@Ioannis G
Maybe it might have something to do with Auto Pagination on Blogger
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 ...
@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.
yes you're are right Greenlava ... google has fucked us with auto pagination ... sorry for the french!!!
@Ioannis G
I have a feeling you'll be using a lot more french dealing with Google :)
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!!!
PS. Can I use live writer to populate/format a static page?
Oh yes ... and one more issue ... how do I remove the title from the static page without affecting the nav heading?
@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.
OK ... thanks for all the advice will give it a try ... tomorrow ... will let you know how it goes ... cheers!!!
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...
@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.
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]
[/b:if]
[div class='widget-content']
[data:content/]
[/div]
When I repaste your code there is a problem ... wtf is going on here? Just when I thought I had it perfect!!!!
@Ioannis G.
It's working fine from here.
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!!!
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'>
[/b:widget]
[/b:section]
[/div]
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!!!
The splash page is now appearing with side bar!!!
@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?
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 blogger.com/static/v1/widgets/3604811677-widgets.is
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!!!
@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.
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.
Also say your feedback on my blog. How is the design....
@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.
Wow..it 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 :)
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.....
@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.
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 =)
@microsnitch
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.
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?
@RHS
To use an image, just replace the word "ENTER" with an image tag:
[img src="YOUR_TITLE_IMAGE_URL"/]
After that, you may also need to modify the code in line 18 to fine tune the styling.
http://i303.photobucket.com/albums/nn132/aivo12/__ENT5.gif
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
@RHS
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='http://i303.photobucket.com/albums/nn132/aivo12/__ENT5.gif'/][/a][/center]
line 18:
#EPEntryButton img {border:5px solid yellow;}
Hi Brother, I can't enter into my website after clicking on the button
@RHS
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='http://i303.photobucket.com/albums/nn132/aivo12/__ENT5.gif'/][/a][/center]
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
@RHS
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='http://i303.photobucket.com/albums/nn132/aivo12/__ENT5.gif'/]
replacing the word "ENTER".
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
Thank you.
@Gurpreet Singh
Sorry I don't have a solution for you, but I think it is possible though.
@Afiliate Store
You're welcome.
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.
@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 <>.
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.
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 www.msporch.blogspot.com. 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.
Sarah
@Sarah
Invitation accepted.
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?
@Battousai
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.
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 http://firstaidgreece.blogspot.com
@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.
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
@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.
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
@Sarah
For Template Designer's template look for this (instead of [body]):
[body expr:class='"loading" + data:blog.mobileClass']
Greenlava thank you, it works great now!
I tried everything possible but the entry page seem to be showing up in every page. Please help.
@Sushila Chamling
Have you entered your blog url in code line 28?
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?
@Edwin
Yes you'll need cookies for that, but sorry can't help you on that. I need some learning myself.
Thank you so much.. I made it in my blog.. http://agoodcatch101.blogspot.com/
thank you
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?
http://grapigliaarquitetura.blogspot.com/
Thanks a lot!
Ambie
@Grapiglia Arquitetura
In code line 13, replace
background-color:#fff
with
background-color:#fff url(PUT DIRECT LINK TO YOUR PICTURE HERE) no-repeat.
(for details of background coding refer to Using image as background)
worked perfectly. tweaked with the colors a bit. works like a charm. thanks. do drop by http://www.farahharith.com
@tunteja
You're welcome.
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!
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?
http://brennygee.blogspot.com
@Adrian Vieni
It seems pressing the stop button is the only way to go (to stop the video) :(
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)"]
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!
http://vimeo.com/api/docs/moogaloop
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 >_<
@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.
@haeki
You have lots of unnecessary contents in your Text88 gadget.
Replace them (in HTML mode) with this:
[a href="http://tinypic.com?ref=110ysjk" target="_blank"][img src="http://i55.tinypic.com/110ysjk.jpg" border="0" alt="Image and video hosting by TinyPic" /][/a][br/]Welcome to H134![br /]
replace [ and ] with < and > respectively.
@Greenlava
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 ^_^
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?
@Joe
Have you replaced YourBlogUrl in code line 28 with your own blog URL?
i am able to put text but how to put image there i mean what should be there ? just check http://memajhich.blogspot.com/
http://lh6.ggpht.com/_p-9NLOrJ_d0/TKlUXKPISUI/AAAAAAAAFOg/gZ3D4rY5mWM/s800/DSCN0012.JPG this image i wish to be seen there below the text.
@माझी दुनिया
This what you have right now:
[img src="http://lh6.ggpht.com/_p-9NLOrJ_d0/TKlUXKPISUI/AAAAAAAAFOg/gZ3D4rY5mWM/s800/DSCN0012.JPG"/]
To make it work, replace [ with < and ] with >.
oh ! lovely, it works, thans a lot !
hi,
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!
Thanx!
oh ya.
i inserted the pic in the text gadget instead of the html gadget
@fussy
Use this code for the image:
[a style="text-align:right;" href="PUT YOUR BLOG URL HERE"><img src="PUT IMAGE URL HERE" ][/a]
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.
theIndoorOutdoor.blogspot.com
and pardon me that was text size for " the IndoorOutdoor "
titling the the welcome page.. thank for your help.
@the IndoorOutdoor
1. Don't use capital letters in your URL. Need to replace "http://theIndoorOutdoor.blogspot.com/" with "http://theindooroutdoor.blogspot.com/"
2. Change the value of font-size in code line 18.
@the IndoorOutdoor
oops...no.2 is for the button.
To change the font-size for the title, add this after line 13:
#Text88 h2 {font-size: 20px;}
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..
@the IndoorOutdoor
Thanks for the nice words, I appreciate it :)
is this working on you???? it does not work on mine
thanks ^^ it worked!!!!!
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 :)))
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: http://www.bloggersentral.com/2010/08/install-linkwithin-related-posts-with.html) take me to the welcome page again :(
Can we change that? Please?
@admin
This might work:
1. Include a second referrer search, by adding this after line 29:
fromInternal2=document.referrer.search("http://www.linkwithin.com/");
2. Put the search result in the conditional (using logical OR), by replacing line 33 with this:
if (fromInternal==-1 || fromInternal2==-1)
Good luck
still not working :(
check it out on my blog http://miraoutlet.blogspot.com
here's html code changed just as you said:
fromInternal=document.referrer.search(YourBlogUrl);
fromInternal2=document.referrer.search("http://www.linkwithin.com");//check come from where
...
if (fromInternal==-1 || fromInternal2==-1)
{ //if visitor comes from external page
P.S. with this added code, even changing from one static page to another makes the welcome page appear :(
@admin
On second thought, I think logical AND would be more appropriate, like this:
if (fromInternal==-1 && fromInternal2==-1)
sorry, still not workig :)
well, I guess I have to forget the welcome page or the related posts. they don't like each other
thanks man! its work! :)
@elmyra
You're welcome.
Thanks for the code visit http://cgmagiic.blogspot.com/ and see it in action.
@Abhisek
@Beben
Thanks guys. Do come back...
hai unale to do this hack please help me out and i done wht as u said but it not works
help me im unable to get it i done wht u had prescribed even though it not worked out
@pooja
@avnrurfriend
Could you be more specific?
There's a problem that you can't close the box after you're finished. How do you fix that?
Hi Greenlava, i tried your tutorial but it doesn't work on my side. Can u help me?
@Pure Bliss Bridal & Beauty House
I can see the box/message. What's the problem?
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
@SV
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'>
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!
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!
I have question.Is there any ways to disable printscreen so that I can protect my images in my blog.
Thanks in advance!
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:)
hey btw, is there any code not to let this welcome box appear everytime we refresh it??
it's bothering me, a lot^^
tqvm
@aqeyLs
I'm afraid there's none :(
thanks for your tip
salam kenal, brow
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.
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.
@Srivathsan
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.
its not done dude.....whats wrong ???
Hello. I am having a problem. The message appears in every pageview.Help?
@enimerwsi
Have you replaced http://bloggersentral.blogspot.com/ in code line 28 with your own blog url?
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'/]
[/b:section]
[/div]
[!-- 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!
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:
[style]
#welcome-wrapper{width:40%;margin:0 auto;height:0px;text-align:center;}
Into this:
[style]
#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!
@A friend
Thanks for sharing.
As for you my friend, go get some sleep before you hurt yourself :)
Thanks for assistance.How can I get something like your email updates link above?
@Chris Bester
Which one is that?
This is really a nice trick and I will implement this in my blog. Thanks
Thx a lot i don't understand why people have many problems
it's work awesome.
Thanks. I will try it.
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.
@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.
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!
@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']
PUT CODE IN STEP 6 HERE
[/b:if]
Hi,
My entry button doesn't really work; it doesn't do anything when you click on it.
Can anyone help?
http://tomhillsonmusic.blogspot.com/
how to add picture into background of this page?
@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;}
how to create blank "entry" page?
Thanks for providing that coding its really very helpful for me when i will try it.
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? http://Teamultamex.com (Top Left) thanks in advance.
@MarkevMarketing
In you case, it's located right above
[div class='body-fauxcolumns']
@Greenlava!! Thank you so much!! It's Gone!
Thanks for this, it worked perfectly!
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 http://celebrityphotocenter.blogspot.com/
my site is www.theredrabbit.com
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 :)
Is this OK for Adsense TOS?
I already commented 2 questions and yet it's not been posted here. unlucky
@Bernard
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.
Thanks
Thanks!
Nice job, thanks!
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.
thans for the great tuts
wow this is really great! :) Thanks!
Cool! Very nice while site is loading.
Comments on this post are closed.