Blogger Tips: Setting Up Homepage

By default your index page, which is the page that you'd get when you type in a domain, is the page where your main post body is located. Thus, when you visit a blog, you'd see posts in your index page. Whereas in a website, usually an index page is an introductory page, and you'd be able to click a tab from the menu to bring you to the blog/posts page. This is what we are trying to achieve in this tutorial.

Test Blog


In this tutorial, you'd be able to have a homepage, with no posts on it, and you can click on a tab to bring your reader to your posts. On the downside, this method is not so straight forward, and it involves some hardcoding. Something not so suitable for beginners, but feel free to try it out.

I'd suggest you to use firefox while trying this. with FireBug add on installed.

Step 1: Compose your welcome page

Go create a new post, and start composing your welcome page. This is how the welcome page would look like, so don't compose anything overly complicated.. When you're done, switch over to HTML view (as opposed to Compose), and copy the HTML of your welcome page.. You don't have to publish this post..

Next, we wanna add this code to the main page. Go to Dashboard - Layout - Add a gadget - HTML/Javascript - Paste your code there. Place your Gadget above the Blog Post box.

Step 2: Display homepage only in the main page and remove posts from main page.

It's time to get your gadget out - Firebug! Inspect what is the id/class of the html gadget and the main post.  Click here to learn how you can find your gadget's ID. My main post's id is Blog1 and the HTML gadget's id is HTML2. Your post's ID is gonna be Blog1 most probably, but your HTML gadget's ID may vary.

Now that we have known our IDs, it's coding time. Go Dashboard - Template - Edit HTML - Proceed - find for </b:skin> - Place the following below </b:skin>

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style>
#HTML2{
display:none;
}
</style>
<b:else/>
<style>
#Blog1{
display:none;
}
</style>
</b:if> 

Step 3: Customize Menu/Navigation Bar.

Using the new Blogger interface, go to Dashboard - Pages - New Page - Web Address. Paste the the address of your blog in the following format: http://yourblog.blogspot.com/search.html

The address must end with '/search.html'. Click on save then. The newly added page would have been added to your Pages gadget, thus it goes without saying that you must have a Pages gadget as well. You might wanna rearrange its position to appear at top.

You're basically done. You now have a link in your pages gadget that links to your posts!

Step 4 (Optional): Margin fix.

When you visit your blog, you'll be greeted with your homepage now. You have a lovely set of menu at top, in which you can click on it to show your blog posts. But you might notice that the boxes for all the posts (except for your homepage) are a little bit down.

There's a quick fix for it. Use Firebug to see what's the id or class of the box. As in my case, it is known as column-center-inner. I want to pull it a little upward for all my pages except for my homepage, so this is the code that i'll use:

<b:if cond='data:blog.url != &quot;http://qwertyyyyyyy.blogspot.com/&quot;'>
<style>
.column-center-inner{
margin-top: -20px;
}
</style>
</b:if> 

Place it below </b:skin>, similar to step 2. Voila, it's done!!

Update: Have Homepage enabled on a custom mobile template

If you'd like to have a custom landing page while using a custom template for your desktop and mobile site, checkout Baby in Heels' tutorial here.