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.

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

52 comments

Write comments
September 28, 2009 5:59 AM delete

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.

Reply
avatar
September 28, 2009 6:04 AM delete

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.

Reply
avatar
$@!
September 28, 2009 7:47 AM delete

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 other any way of contacting blogger via phone or e-mail personally ...


Please help !

Reply
avatar
September 28, 2009 10:43 AM delete

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~ ^^

Reply
avatar
September 28, 2009 10:43 AM delete

And so the Picture cannot make it full screen?

Reply
avatar
September 28, 2009 12:00 PM delete

@ 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.

Reply
avatar
September 28, 2009 12:15 PM delete

@$@!

Complain to Blogger and Adsense immediately about this...

Reply
avatar
$@!
September 28, 2009 1:35 PM delete

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

where can i find them ...

please help !

Reply
avatar
September 28, 2009 1:54 PM delete

@$@!

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.

Reply
avatar
September 28, 2009 11:46 PM delete

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

Reply
avatar
September 29, 2009 3:10 AM delete

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.

Reply
avatar
September 29, 2009 8:46 AM delete

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.

@Reza
The 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 loads first and the image later.

@Rakero
Use any image you want. So first change the image url in the code. Then change the width and height settings acc. to the image. Save the template. You may see that the new image is slightly displaced (if you are using an image of width and height other than 750 and 400)
Then adjust the margins, the values in the code above (-280 0 0 -350) are the pixels distance from top, right, bottom and left extremes of the screen, so adjust the values accordingly.

Reply
avatar
September 29, 2009 8:50 AM delete

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

Reply
avatar
September 29, 2009 9:14 AM delete

@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...

Reply
avatar
September 29, 2009 10:46 AM delete

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

Reply
avatar
September 29, 2009 11:43 AM delete

@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.

Reply
avatar
September 29, 2009 12:03 PM delete

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

Reply
avatar
September 29, 2009 12:13 PM delete

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

Reply
avatar
September 30, 2009 7:36 AM delete

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

Reply
avatar
September 30, 2009 8:03 AM delete

May be...ur complete region (IP range) is blocked by them. In that case use picasa. Do not use Gigaimage, as it is frequently going down.

Reply
avatar
October 01, 2009 8:31 AM delete

Great resource and list, will certainly be bookmarking this page.I am thinking on using it on my professional blog Thank For Post.......

Reply
avatar
October 01, 2009 9:33 AM delete

Hey, Do you have other upload picture's web?
I Do not know how to use Picasa or could you teach me?

Reply
avatar
October 01, 2009 12:45 PM delete

@Rakero
If you are unable to use picasa, then do this:
create a new blog, just to host your images.
Create a new post, upload an image in the post. copy the link to that image (from "src" and not from "href").

PS: all images uploaded to blogger are stored in picasa.

Reply
avatar
October 09, 2009 8:03 PM delete

@$@!
Which link that steal your blog?

Reply
avatar
October 11, 2009 4:31 PM delete

Hi,this is so cool.I try to test in on some test blog i just made.But i need some modification.

First with your method anything doesnt show up us you write to upload 3 thing wrong and in code is leihgtbox.css.So in post you must change extract it to BG_Like_BING.css and write to download from codebook proper thing and thats it leightbox.css.When i notice and done it start to work.But i didnt see yet why picture shows on this way like on this my test blog http://testruff.blogspot.com/.

What i need is something similar to this page http://www.tvgolo.com/ but not exatcly like that i need very similar on home page only and to show only when it comes to blog,as i use from notice 2 to show widget on home page only.But i dont want when it for example someone click on home button on menu bar to show again that.I hope you understand because english isnt my better side.

Second thinh of what i want is liek on this scrap i just draw for you to see what i want.So when you come to blog it only show that,not like on test blog(link above) tranpsarent backround of blog post and similar,i want like to show like on this site http://www.tvgolo.com/ and then you enter and everything is normal http://www.fhqhosting.com/ui/PHOTOFORMAINPAGE.jpg so just to show that not in background things from blog.Can you help me with this ?
(what i want i very similar to your demo page http://www.bing-like-blogger.blogspot.com/ but if it can be done i want to autoresize to resolution like using 100% and similar or like on your demo page without this height differance under where is write enter the blog it would be cool like difference like form top page to that section where all this start (welcome to my blog ...)
Cheers

Reply
avatar
October 12, 2009 9:17 AM delete

@Ruff

I have made some changes in leightbox.css and so I renamed it as BG_Like_BING.css, you can see that I have used that leightbox.css file in the previous tutorial, but with that the overall UI is very different, and it doesn't look so good as a welcome page.

to show it only on your homepage and not everytime a visitor comes to your homepage through menu bar, use this widget on your "WWW" subdomain, and in the menubar do not link to WWW, instead link to your direct domain (may be not possible in free blogspot-domain blogs)

that transparent overlay is because you are using leightbox.css
that is why I am asking you to use BG_LIKE_BING.css, where i have already made the changes and set the opacity to 1(100%), simply change the background color from blueish-gray to black, that means from this:
background-color:#B2BDC4;
to this:
background-color:#000000;
in the BG_LIKE_BING.css file, before you upload and link it.

go creative and modify the css file, change colors, position picture size etc. Just remember do not use images of more than 800px (max=1000px) width, as for visitors with smaller resolution it wouldn't look good.

Reply
avatar
October 13, 2009 9:40 PM delete

But that wont work for me.I does show up only when i use original leightbox.css file.As i m not familar with coding can you modify it for me .I want like on demo page but with few modification.I want backround blue-your is grey i need it just to know what to chnage on my own.and second i want the same difference in height from bottom border and very bottom of page.I want that difference to be like in top border top bottom of page.That is.Can you do it and send me to email or leave that file here in comments so i can upload it? Please

Reply
avatar
October 14, 2009 2:11 AM delete

okay no problem...use leightbox.css in your template, but before you upload it, make these changes in it:
change this:

background-color:#000000;
-moz-opacity: 0.80;
opacity: .80;
filter: alpha(opacity=80);


to this:

background-color: blue;
-moz-opacity: 1.0;
opacity: 1.0;
filter: alpha(opacity=100);


and delete this in the file:
div.leightbox {
color: #333;
display: none; /* toggle display to show/hide the popups when designing & previewing */
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -200px;
width: 400px;
height: 500px;
padding: 0;
border: 1em solid #000000;
background: #FFFFFF;
z-index: 101;
overflow: none;
}


finally for aligning you have to change the margin in your template code:

margin: -240px 0 0 -380px;

try different values instead of -240 (it'll depend on your image size, just try some diff numbers)

Reply
avatar
October 15, 2009 12:13 PM delete

Hi,

Can you tell me how to add homepage like Bloggerbuster.com ? To add a welcome page like that... In bloggerbuster it automatiaclly redirects to Homepage.. Can u help me?

Thanks for the wonderful tips about blogging.

Reply
avatar
October 15, 2009 2:58 PM delete

Hi Jeevan,

At BloggerBuster, Amanda is not using the css trick, having an own domain, she has two different sites at
bloggerbuster.com, and
www.bloggerbuster.com

so there's a welcome page at bloggerbuster.com and the sub-domain www.bloggerbuster.com redirects to her blogger-blog.

Reply
avatar
October 22, 2009 5:16 AM delete

Hi Sai.I used this tutorials and it worked on firefoks.Then I noticed that it doesn't work on IE8 properly.I made public my folder on mydatanest account.What can I do?How can I fix it?
http://dreamss-at-the-candle-light.blogspot.com

Reply
avatar
October 22, 2009 6:54 AM delete

Yeah, just checked your blog in firfox, opera and ie8
it's perfectly displaying in opera and firefox but inie8 the blog is almost completely hidden. I think some code conflict is there....is your blog displaying normally in ie8 without this hack?

Reply
avatar
October 22, 2009 8:51 AM delete

now I deleted this hack and my blog is displaying normally.you can check.

Reply
avatar
November 13, 2009 11:42 AM delete

This's working good. But it's a bit weird to show it everytime visitor return to the home page. Can this be shown only one when they start the blog?

Reply
avatar
November 18, 2009 3:39 AM delete

m using it ok here: adultloo.info, the problem is just above - it shows everytime ppl load to homepage.

Reply
avatar
Anonymous
January 15, 2010 10:58 AM delete

drawback:
by keeping this homepage,we cannot enter into blog without mouse....[mouse is needed compulsory to enter into blog].
(for example check staus bar by pressing tab)


can anybody remove this bug and give the solution.


thanQ u

Reply
avatar
February 15, 2010 2:29 AM delete

I REALLY APPRECIATE YOU WORK,

EVERY THING IS SAFE ON BLOG BUT IT IS NOT WORKING!

IT STUCK ON THE FIRST CLICK
& NO WAY TO ENTER IN BLOG.

ONE MORE THING I HAVE NOT MADE ANY CHANGE IN THE JPEG FILE I KEPT IT SAME!

CAN ANY ONE TELL ME IS THAT REALLY WORK??

PLEASE HELP ME THAT WAS GREAT IDEA BUT OF NO USE TILL NOW

Reply
avatar
Anonymous
February 19, 2010 12:52 AM delete

its nice blog

iam creating html file for my blog and i upload in mydatanest.
i getthe direct link of my html page and i used in my blog, but my address is redirected to mydatanest page. if i login in mydatanest account means the pages open correctly. why?

Sorry for my poor english

Reply
avatar
February 19, 2010 7:58 AM delete

@Anonymous,

Log in to mydatanest.com, go to the folder where you have uploaded the file. Edit the properties of that FOLDER: change it from "Private" to "Hidden"

PS: Please avoid commenting as Anonymou, to get better and quick response.

Reply
avatar
March 22, 2010 5:08 PM delete

why my page be like this??
i dont know where can i edit it???

cant help me plzzzz :(
about 5 hour i try to change it but cant..

chek my page n help me do :(
pancingmall.blogspot.com

i already do like ur said step by step
put this on html
--->b:if cond='data:blog.url == data:blog.homepageUrl<---

but it wont works.. :(

Reply
avatar
Max
April 15, 2010 4:58 PM delete

How do you extract .rar to .css?

Reply
avatar
April 15, 2010 10:49 PM delete

Download a free software called winrar (similar to winzip). Install it, and then right click on any .rar file anf ou'll see an option to "extract here", click on it and the files will be extracted out in to the same folder/desktop.

Reply
avatar
April 23, 2010 7:30 AM delete

It is not working friend.. it just showing blank light blue screen...

Reply
avatar
April 23, 2010 10:24 AM delete

I need your blog address, and keep the code in your blog to get it checked by me: Leave the code till Step #3 in your blog and do not add the code of step #4, as it may display that blue screen on your blog.

Reply
avatar
June 27, 2010 2:56 PM delete

If this is gonna work I'll be very thankful.
Thanx for this. I might advertise Bloggerstop in the future
here at my blog http://zeegi-comix.blogspot.com/

Reply
avatar
December 04, 2010 12:40 PM delete

Great stuff from you, man. Ive read your stuff before and youre just too awesome. I love what youve got here, love what youre saying and the way you say it. You make it entertaining and you still manage to keep it smart. I cant wait to read more from you. This is really a great blog.

Reply
avatar
ola
January 14, 2011 5:17 PM delete

Is really nice, and work perfect for me..thank you ..
Please take a look at this site...

http://www.hobbyfishing.gr

Can it be somethink like this???

Reply
avatar
January 22, 2011 6:38 PM delete

I found this link http://www.veign.com/blog/2008/05/22/create-a-one-time-popup-using-jquery/

to help you to display the pop just 1 time for every user .. using the cookies ..

Can u test it plz :)

Reply
avatar

Comments are moderated on this blog

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

Comment Like This! and Optimize your blog EmoticonEmoticon