See this hack live at Disqus In BlogSpot blog
Log in to Blogger, go to “Layout” -> “Edit HTML“
and find (CTRL+F) this code in your blog template
Follow the instructions given below to add a similar page to your blog:
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=”https://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/leightbox.css“/>
<script type=”text/javascript” src=”https://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/prototype.js“></script>
<script type=”text/javascript” src=”https://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/leightbox.js“></script>
<!–Welcome-UnderConstuction-Page-Stops-HELP-https://bloggerstop.net–>
<link rel=”stylesheet” type=”text/css” href=”https://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/leightbox.css“/>
<script type=”text/javascript” src=”https://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/prototype.js“></script>
<script type=”text/javascript” src=”https://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 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>
<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.
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
}
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
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”>
<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>
<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
Leave a Reply