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:

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:

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.

Log in to Blogger, go to “Layout” -> “Edit HTML
and find (CTRL+F) this code in your blog template


Immediately ABOVE/BEFORE it, paste these lines of code:

<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;

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

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>
<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();

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.

52 thoughts on “Display Your HomePage Like BING

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

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

  3. 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 !

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

  5. @$@!

    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.

  6. 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?


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

    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.

    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.

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

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

  10. 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 …)

  11. @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:
    to this:
    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.

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

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

    -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)

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

  15. 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?

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







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

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

  20. 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 🙁

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *