Add A Welcome or Under-Construction Page To Blogger Blogs

This tutorial is requested by Rakero from CrakerLo Blog

Add a Welcome Page To Your Blogger/BlogSpot Blog.

See this hack live at Disqus In BlogSpot blog

Follow the instructions given below to add a similar page to your blog:

STEP #1
Log in to Blogger, go to "Layout" -> "Edit HTML"
and find (CTRL+F) this code in your blog template
</head>
Immediately ABOVE/BEFORE it, paste these lines of code:
<!--Welcome-UnderConstuction-Page-Starts-->
<link rel="stylesheet" type="text/css" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/leightbox.css"/>
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/prototype.js"></script>
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/leightbox.js"></script>
<!--Welcome-UnderConstuction-Page-Stops-HELP-http://bloggerstop.net-->

STEP #2
Go to "Layout" -> "Page Elements" and click on "Add a Gadget" and select it as "HTML/JavaScript"
And paste this code into it:
<!----------// POPUP (AUTOLOAD) //---------->
<div id="pop01" class="leightbox">

<div class="scrollbox">
<h1>Welcome To My Blog</h1>
<p>A blog by <a href="http://bloggerstop.net">BloggerStop.Net</a></p></div>
<a href="#" class="lbAction" rel="deactivate">Enter The Blog</a></div>

<!----------// POPUP (AUTOLOAD script: add AFTER the autoload popup div) //---------->
<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script>
Change the code highlighted in Purple and RED, and save the widget.

NOTE 1: Remember to place this widget somewhere in the top region of your blog (above "blog posts" widget if possible), to make sure that this widget loads before other widgets.

NOTE 2: Under Construction page is often required in all the pages, but as welcome page is required only in the "HomePage", so use this tutorial to show the widget only in the homepage.

You can change the background overlay color and transparency by editing the leightbox.css file before uploading it.
Here's the code you have to change in the leightbox.css file.
div#overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color:#000; //color default - back
-moz-opacity: 0.8; //opacity default at 80%
opacity: 0.8; //opacity default at 80%
filter: alpha(opacity=80); //opacity default at 80% for IE
}

NOTE: To display this page as entirely different web page, set opacity and -moz-opacity at 1.0 (fully opaque)

Add an UnderConstruction Page to Your Blogger/BlogSpot blog

You may sometimes want to hide your blog partially (or make it inaccessible). Especially when editing any important part of your template, like sidebar or any widget.
So to hide your blog partially temporarily, use the same method as described above, but remove the option to enter the blog. You can do this by using this code in STEP #2
<!----------// POPUP (AUTOLOAD) //---------->
<div id="pop01" class="leightbox">
<div class="scrollbox">
<h1>Welcome To My Blog</h1>
<p>A blog by <a href="http://bloggerstop.net">BloggerStop.Net</a></p>
<p>This Page Is Under Construction</p>
<p>Sorry For The Inconvenience</p>
<p>Come Back Within An Hour :)</p>
</div>

<!----------// POPUP (AUTOLOAD script: add AFTER the autoload popup div) //---------->
<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script>

See a working example at Blogger Blogs UnderConstruction

You may download Under Construction images from AnimatedGif.net or WebWeaver

Credits
The original creators of Leightbox, a lightweight inline div solution to the popular Lightbox ajax solution, from the people at eight.nl.
Paul van Iterson from Quaint Tech for his article on his Leightbox ‘onLoad hack’.
Richard from pixelcised for fixing the script.

And CodeBook for the OnLoad functionality

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

45 comments

Write comments
September 22, 2009 11:56 AM delete

vey usefull hack Divya, like always ...

50mn until blogger birthday, how are you going to celebrate it expect ?????

Reply
avatar
September 23, 2009 6:28 AM delete

Aw~~ Arigato~!!!
Now i can start my story~
Thanks Sai, and all your hardworking!

Reply
avatar
September 23, 2009 9:06 AM delete

*Sorry i missed the birthday >.<* anyway, late happy birthday~
And,
Questions
How to put own background?
The -moz-opacity-1.00 is not working to full screen,
How to put the 'Enter' bottom?

Reply
avatar
September 23, 2009 11:44 PM delete

If you add the "under construction" page, how can you edit or modify the template without seeing it?

Reply
avatar
September 24, 2009 12:19 AM delete

Thank you Soufiane and Rakero...

@Rakero
Do you want to use any image as background, or color?

@Reza
Haha nice point, keep the opacity low(0.3/0.4) and edit the template, the blog still remains inaccessible

Reply
avatar
September 24, 2009 12:28 AM delete

@Rakero,

To shift the "Enter The Blog" to bottom, you have to edit and save the file "leightbox.css" before uploading it.

Presently the code in that file will be this:

a.lbAction {
padding: 0 3px;
text-decoration: none;
float: right;
position: absolute;
top: -20px;
right: -20px;
color: #000000;
border: 5px solid #000000;
background: #CCCCCC;
z-index: 102;
}


change it to this:

a.lbAction {
padding: 0 3px;
text-decoration: none;
float: right;
position: absolute;
bottom: -20px;
right: -20px;
color: #000000;
border: 5px solid #000000;
background: #CCCCCC;
z-index: 102;
}


you may also change float to left/center, i.e.

float: center;

Regards
Sai

Reply
avatar
September 24, 2009 1:19 AM delete

Thanks for the answer of the "bottom"
and, How to fit it to full screen? it not work when im put it to 1.0, is it All Opacity?
And I wanted to put my own picture as background, but how to put that?

Reply
avatar
September 24, 2009 9:12 AM delete

There are two different things Rakero...a central text box, and an overlay background, so tell me what exact combination you want?

If you want a full screen text box then background(color/image) will not be visible, and if you want to use a background image, then DO NOT go for full screen text box.

Reply
avatar
September 24, 2009 11:21 AM delete

thx fr a good hack sai!!!
-cp

Reply
avatar
September 25, 2009 4:04 AM delete

NT ABLE TO DOWNLOAD FILES :(

Reply
avatar
September 25, 2009 5:10 AM delete

Once you visit the download page(CodeBook), right-click on the files and click on "Save target As"

Reply
avatar
September 25, 2009 11:54 PM delete

Sai, your blog has been a fantastic help!

I've got an award for you! It's a little "feminine", but Your Blog is Over the Top!

Thank you for sharing all of these great Blogger tips!

Faye @ GreenOrganicMama.com

Reply
avatar
September 25, 2009 11:58 PM delete

dude
i wanna ask
tht y thw "BOX APPEARED" is very simple .. can v make it stylish or add sum colours or pics in it ?

Reply
avatar
September 26, 2009 2:38 AM delete

Yes you can edit the box....edit "scrollbox" element in the .css file.
Check out the example demos, I have added images in the box, and in the under-construction example, I have even added a contact form.

Reply
avatar
September 26, 2009 8:08 AM delete

@Faye

haha...thanks for the award Faye :)
am I supposed to blog it again, (with new list of winners ofcourse)?

Reply
avatar
October 13, 2009 10:00 AM delete

cool but it's asking every time,
it's incompertable for site visitors ..
if it display when open home page or first time only then it's going to rock...


http://techtasks.blogspot.com A blog for multi purpose

Reply
avatar
October 13, 2009 10:54 AM delete

@ Rajesh,

not sure, but you may try this method:
http://highslide.com/forum/viewtopic.php?f=1&t=2017

Reply
avatar
November 18, 2009 2:33 AM delete This comment has been removed by the author.
avatar
November 18, 2009 3:07 AM delete

People this actually works!!

Thnx a ton Divya...
I customized the HTML part a bit and got an awesome welcome screen!

Check out the preview at
abijahangelicdelight.blogspot.com

Thnx again.
-Abijah :)

Reply
avatar
March 10, 2010 12:14 AM delete

How do I get a box that fills the whole screen (so that it looks like a page instead of a widget)? I do not need images (it would be nice) but only text. Small images in the middle could work for me.

Also, could I put a video on the welcome page?

Reply
avatar
March 10, 2010 8:04 AM delete

Just change the dimensions of the box, presently it is:

width: 100%;
height: 100%;

write it in in pixels, recommended dimensions:

width: 1024px;
height: 768px;

you can add anything in to this widget, including videos, grab the video code from youtube and paste it in to the box (in STEP #2).

Reply
avatar
March 27, 2010 1:18 PM delete

thanks but how do we edit the css code

Reply
avatar
March 27, 2010 2:02 PM delete

Well, you can edit the code in step #1 too, but that is not recommended, you can do all your editing work in the step #2 itself, as it should be enough to most of your needs. BTW, what exactly do you want to change in the widget?

Reply
avatar
April 04, 2010 3:18 PM delete

This hack doesn't owrk on my website www.anims101.blogspot.com for some reason. Can you please tell me why?

Reply
avatar
April 08, 2010 3:38 PM delete

How can I change "about me" from defaulting to every blog I create; as my info different for every blog?

Reply
avatar
April 08, 2010 3:43 PM delete

Instead of the default "About Me" widget provided by Blogger, use a widget of your own. Inside a HTML/JavaScript widget type about yourself, or use this tutorial to create professional badges for all your blogs:
http://bloggerstop.net/2009/01/create-about-me-badge-customize-your.html

Reply
avatar
Anonymous
May 07, 2010 8:51 PM delete

sorry.... this is not spam just I wanna try emoticons above..

Reply
avatar
May 18, 2010 8:33 AM delete

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

Reply
avatar
BSD
June 15, 2010 8:35 AM delete

how can i restrict this widget for my home page only..i am not getting properly from the tutorial you have mentioned

http://bhojpuriallsongdownload.blogspot.com/

Reply
avatar
June 23, 2010 10:42 AM delete

hi there can we make blogger static page a Homepage....?

Reply
avatar
June 27, 2010 3:06 PM delete

Which is better for introduction, this post or this http://bloggerstop.net/2009/09/display-your-homepage-like-bing.html

and if you have time check here http://zeegi-comix.blogspot.com/

Reply
avatar
June 27, 2010 3:30 PM delete

Both the tutorials use the same coding, go for Bing if you like the way Bing homepage has been disgined.

Reply
avatar
January 16, 2011 1:31 PM delete

how to insert animated gif underconstruction? :-/
reply....

Reply
avatar
January 17, 2011 12:21 PM delete

You can use a GIF image too, just make sure the site where you uploaded the pic, doesn't remove the animation and allows you to hotlink/direct-link the picture.

Reply
avatar
January 21, 2011 4:38 AM delete

You can use it just in the home page.

youhave to replace this widget to a new section.

and make a condition to show this section just in the home page.

Reply
avatar
January 21, 2011 4:41 AM delete

i forgot to post my blog , to see the example.

i used it in all the site.

Moustafa Amar Blog

Reply
avatar
January 21, 2011 7:37 AM delete

Great work buddy, but did you intentionally put an under-construction page or was it supposed to be a welcome page?

Reply
avatar
March 07, 2011 8:58 PM delete

Outstanding!

This is exactly what I've been looking for to implement into my new blog that is of course in the creation stage. I can tweek the html code, but was curious; you mentioned editing the css file but there was no link to upload this file. Did I miss something in your post somewhere?

Any advice is much appreciated.

Thanks.
Busdadude~

Reply
avatar
March 07, 2011 11:47 PM delete

The first link highlighted in red in the tutorial is the link to the css file used here. Download it:
http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/leightbox.css

Edit it and upload it to www.mdn.fm, and finally use the DIRECT LINK of your newly edited file instead of the one I'm using in the tutorial above.

Reply
avatar
August 25, 2011 4:11 PM delete

I done what you said, yeah, it works, but, I can enter into my blog by clicking the enter box. why?

~x(

Reply
avatar
February 20, 2012 10:26 AM delete

It doesn't happen as what I'm expected. Why??? hm..

Reply
avatar
August 21, 2012 1:17 AM delete

I don't get it. How to use this template? I upload the whole file and I get "We were unable to save your template.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message:
Content is not allowed in prolog." Help!

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon