Display Your HomePage Like BING

The previous tutorial on this blog explains, how to add an overlay welcome/under construction page to your blog.
Now this post is exactly based on the same method, but with some simple modifications.

Click on the image

Or check out the Live Demo

Follow these instructions to add a BING like homepage to your blog...

Step #1
Download these two files:
leightbox.js
prototype.js

from CodeBook
and save the files on to your computer.

And download BG_Like_BING.rar (extract it to BG_Like_BING.css) from Ziddu:
BG_Like_BING.rar

STEP #2
Upload all three files to your MyDataNest account (registration required)
NOTE: Remember to edit the 'Access permission' properties of the folder (at MyDataNest) as Hidden (It should not be set as 'Private')
And then copy the DIRECT LINKS to these files.

STEP #3
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://mydatanest.com/files/*****/BG_Like_BING.css"/>
<script type="text/javascript" src="http://mydatanest.com/files/*****/prototype.js"></script>
<script type="text/javascript" src="http://mydatanest.com/files/*****/leightbox.js"></script>
<style type='text/css'>
div.leightbox {
color: #fff;
display: none;
position: absolute;
top: 50%;
left: 50%;
margin: -240px 0 0 -380px;
width: 745px; //Keep the WIDTH 5px LESS than the actual width of the image you are planning to use...
height: 400px;
padding: 0 0 0 5px;
border: 1px solid #FFFFFF;
background: url(http://i36.tinypic.com/2w4n40k.jpg) no-repeat;
z-index: 101;
overflow: none;
}
</style>
<!--Welcome-UnderConstuction-Page-Stops-HELP-http://bloggerstop.net-->

NOTE: Replace the links highlighted in RED with the DIRECT LINKS you got in STEP #2
Change code in blue to change the displayed image, its width, height and margin (margin: top right bottom left)

You may download more attractive images from GraphicBazaar

STEP #4
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.
Do not place the widget in the sidebar, rather drag and place the widget either ABOVE/BELOW the main "Blog Posts" 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 (including posts).
NOTE 2: Use this tutorial to restrict this widget to only HomePage.

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts