Add A Welcome or Under-Construction Page To Blogger Blogs

This tutorial is requested by Rakero from CrakerLo Blog

Add A Welcome or Under-Construction Page To Blogger Blogs

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-https://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=”https://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=”https://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

Leave a Reply

44 Comments on "Add A Welcome or Under-Construction Page To Blogger Blogs"

Notify of
avatar
Sort by:   newest | oldest | most voted
Soufiane LeBlogger
Guest

vey usefull hack Divya, like always …

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

View Comment
CrakerLo_Rakero
Guest

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

View Comment
CrakerLo_Rakero
Guest

*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?

View Comment
Reza Winandar
Guest

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

View Comment
Divya Sai
Guest

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

View Comment
Divya Sai
Guest

@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

View Comment
CrakerLo_Rakero
Guest

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?

View Comment
Sai @ Blogger Widgets
Guest

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.

View Comment
imran
Guest

thx fr a good hack sai!!!
-cp

View Comment
Arham
Guest

NT ABLE TO DOWNLOAD FILES ๐Ÿ™

View Comment
Divya Sai
Guest

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

View Comment
Arham
Guest

oh k thanx a lot dude

View Comment
Faye @ "GreenOrganicMama.com"
Guest

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

View Comment
Arham
Guest

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 ?

View Comment
Divya Sai
Guest

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.

View Comment
Divya Sai
Guest

@Faye

haha…thanks for the award Faye ๐Ÿ™‚
am I supposed to blog it again, (with new list of winners ofcourse)?

View Comment
asep canda
Guest

good post friends

View Comment
Rajesh Kumar.Chekuri
Guest

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

View Comment
Divya Sai
Guest

@ Rajesh,

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

View Comment
Abijah Gupta
Guest

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 ๐Ÿ™‚

View Comment
wpDiscuz