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.

Display Your HomePage Like BING

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(https://i36.tinypic.com/2w4n40k.jpg) no-repeat;
z-index: 101;
overflow: none;
}
</style>
<!–Welcome-UnderConstuction-Page-Stops-HELP-https://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=”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.
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.

Leave a Reply

52 Comments on "Display Your HomePage Like BING"

Notify of
avatar
Sort by:   newest | oldest | most voted
All blog tools blog
Guest

hi, great trick but there is some problems, i hope you'll fix it. the intro screen not appearing only on index or first screen. but on posts and all pages as well.
i think i should be displayed on first page only.
max.

View Comment
Divya Sai
Guest

Thanks for metioning it buddy, but being a demo blog, I left the widget working in all pages.
But in the post above (in NOTE 2), I have mentioned the hack required to restrict this hack to homepage.

View Comment
$@!
Guest
Hey DS, I hope you know me…I'm hack-genius.blogspot.com owner But now some guy has hacked my id and transferred all my blog posts to his blog and deleted my blog and he has created another blog in the same domain and pasted all my content…he has all his ads and all my hardwork of 1 year has been washed away in seconds.he gets all my traffic and i don't have any control over it…. Is there any way to stop this from happening and can i find his profile….. please do it for me and send the profile link …is… Read more »
CrakerLo_Rakero
Guest

Hey, Thanks for this post, im like it, and these day were quite busy, and so busy that can't even take some time to make (except for chatting xD) Thanks anyway~ ^^

View Comment
CrakerLo_Rakero
Guest

And so the Picture cannot make it full screen?

View Comment
Divya Sai
Guest

@ Rakero
I will not suggest you to use a full screen image….rather use a small image so that any reader with a smaller screen resolution can also view the image properly, what even BING does. So at max. use images of width 950/1000px.
Modify the code in STEP 3(highligted in blue) as per the image you are planning to use.

View Comment
Divya Sai
Guest

@$@!

Complain to Blogger and Adsense immediately about this…

View Comment
$@!
Guest

I Can't find their customer care number and their personal email ids

where can i find them …

please help !

View Comment
Divya Sai
Guest

@$@!

Yeah reporting to Blogger is quite diff. but I think adsense will take it seriously. I don't use adsense, but then using pub-id you can recognise any member of adsense, so why don't you try reporting adsense team with the new pub-id found on your blog.

View Comment
sinarhairan
Guest

Hi Divya,
This is Brian, Great widget and I have a chance to try it. Yes it works beatifully on google chrome but not on Firefox or even lunascape5.
Pls visit and tell me please why isn't working on firefox?

TQ

View Comment
Reza Winandar
Guest

Does this make the blog loads slower? Cause I don't need this in my blog but I must say that this is very creative and you guys must keep blogging.

View Comment
CrakerLo_Rakero
Guest

Erm… What's is margin 0.0?

View Comment
Divya Sai
Guest
Thanks Brian…The problem is not with the browser….you have to edit the properties of the folder at your MyDataNest.com account. (set the permission to "hidden") and the hack will start working. @RezaThe CSS file is smaller than 1KB, and all the files including in the hack doesn't even sum up to 60kb, so it may not have significant effect on the blog. But you have to be careful about the image you select to display, try to use an image smaller than 100kb, or you can use any image resizer tool too. The same problem is with BING too…..the page… Read more »
CrakerLo_Rakero
Guest

Hey Sai, There's a problem, Once I Click On the ENTER, It Remains STUCK… in main page, only let out some widget and those post and other cannot see, and Google Chrome and FireFox Won't Work too

View Comment
Divya Sai
Guest

@Rakero
There's some problem in the link you used for the file leightbox.js (http://mydatanest.com/files/CrakerLo/13172_6s4ed/leightbox.js)
Re-download, upload and link it.
Tell me if it works now…

View Comment
CrakerLo_Rakero
Guest

nope, downloaded, uploaded, linked, still wont work in Google Chrome and FireFox, and same, still stucked

View Comment
Divya Sai
Guest

@Rakero
Just checked your blog…I found the code working properly, but you need to adjust the margins, and also do not use gigaimage to upload the image, instead of that use tinypic.

View Comment
Shankar
Guest

we have to host only in mydata nest???not in boxstr and all??

View Comment
Divya Sai
Guest

Well don't use boxstr(it no longer provides direct links to .js files) but you may use hotlinkfiles or sigmirror too.

View Comment
CrakerLo_Rakero
Guest

Hey, I can't use TinyPic, It said My IP was banned after upload~!? I Didn't Even Use it Before!!

View Comment
wpDiscuz