Blogger Tips: Setting Up Homepage
I went through lots of articles on how to give your blogger (blogspot) a website look. By website look I mean a navigation bar (menu) and a homepage when you type in your domain, like the one I have here in my test blog:
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.
One usual way is to publish a homepage post with it's date set far out in the future, so that it'd always be at top. Then the number of posts to be displayed on the main page is set to 1. This way, the homepage post will always be the first, and you'd have to click older post each time you want to read a post. That aint cool I thought.
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. Like I said, less blog-like, more website-like. That's the advantage of this method. 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.
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.
One usual way is to publish a homepage post with it's date set far out in the future, so that it'd always be at top. Then the number of posts to be displayed on the main page is set to 1. This way, the homepage post will always be the first, and you'd have to click older post each time you want to read a post. That aint cool I thought.
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. Like I said, less blog-like, more website-like. That's the advantage of this method. 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: Create static pages.
Few static pages to be exact. Be sure to finalize all your pages and stuffs before trying out this tutorial. To create static pages:
Dashboard - New Post - Edit Pages - New page - and design whatever you want.
Usually static pages are Homepage, Archive, Links, Contact Me, Photos, etc. You can have up to 10 static pages.
Few static pages to be exact. Be sure to finalize all your pages and stuffs before trying out this tutorial. To create static pages:
Dashboard - New Post - Edit Pages - New page - and design whatever you want.
Usually static pages are Homepage, Archive, Links, Contact Me, Photos, etc. You can have up to 10 static pages.
Step 2: Create your menu bar.
To do this: Dashboard - Design - Page Elements - Add gadget - Pages - just click ok and place it below the header.
Next, you wanna click on edit, and rename your main page to Welcome or Homepage or anything you like. Also, include the dummy page (which I have named Post) and unthick the actual welcome page.
To do this: Dashboard - Design - Page Elements - Add gadget - Pages - just click ok and place it below the header.
Next, you wanna click on edit, and rename your main page to Welcome or Homepage or anything you like. Also, include the dummy page (which I have named Post) and unthick the actual welcome page.
Step 3: Place welcome page on the main page.
First go get the HTML code from your static welcome page. To do this, Dashboard - Posting - Edit Pages - and click edit on your welcome/homepage. Click on 'Edit HTML' view and copy the entire code there.
Next, we wanna add this code to the main page. To do this, Dashboard - Design - Page Elements - Add a gadget - HTML/Javascript - Paste your code there.
Place your Gadget above the Blog Post box. Now, you can see your homepage in all the pages.
First go get the HTML code from your static welcome page. To do this, Dashboard - Posting - Edit Pages - and click edit on your welcome/homepage. Click on 'Edit HTML' view and copy the entire code there.
Next, we wanna add this code to the main page. To do this, Dashboard - Design - Page Elements - Add a gadget - HTML/Javascript - Paste your code there.
Place your Gadget above the Blog Post box. Now, you can see your homepage in all the pages.
Step 4: Display homepage only in the main page and remove posts from main page.
Now that we have known our IDs, it's coding time. Go Dashboard - Design - Edit HTML - find for </b:skin> - Place the following below </b:skin>
Code explanation:
The first portion of the code is used to hide HTML gadget from all pages except mainpage. To use this in your blog, change the URL and the HTML gadget ID. The second portion of the code is used to hide posts from the mainpage. Again, customize this code by changing the URL and blog post's ID.
As of now, when you visit your blog's URL, you'll be greeted with your homepage, and none of your post will be visible on the front page. However, you've also noticed that there is no way for you to access your posts. Well, time for the next step.
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 - Design - Edit HTML - find for </b:skin> - Place the following below </b:skin>
<b:if cond='data:blog.url != "http://qwertyyyyyyy.blogspot.com/"'>
<style>
#HTML2{
display:none;
}
</style>
<b:else/>
<style>
#Blog1{
display:none;
}
</style>
</b:if>
Code explanation:
The first portion of the code is used to hide HTML gadget from all pages except mainpage. To use this in your blog, change the URL and the HTML gadget ID. The second portion of the code is used to hide posts from the mainpage. Again, customize this code by changing the URL and blog post's ID.
As of now, when you visit your blog's URL, you'll be greeted with your homepage, and none of your post will be visible on the front page. However, you've also noticed that there is no way for you to access your posts. Well, time for the next step.
Step 5: Customize Menu/Navigation Bar.
Use the new Blogger interface for this part, if you're not already using it. 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. 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!
Use the new Blogger interface for this part, if you're not already using it. 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. 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 6 (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:
Place it below </b:skin>, similar to step 4. Voila, it's done!!
All these steps and what you achieve? A homepage with no posts to greet you and a menu which you can click on to bring to your posts. Worth it? For cosmetic purposes no, for hacking purposes yes. Happy trying.
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 != "http://qwertyyyyyyy.blogspot.com/"'>
<style>
.column-center-inner{
margin-top: -20px;
}
</style>
</b:if>
Place it below </b:skin>, similar to step 4. Voila, it's done!!
All these steps and what you achieve? A homepage with no posts to greet you and a menu which you can click on to bring to your posts. Worth it? For cosmetic purposes no, for hacking purposes yes. Happy trying.
Category Article Tutorial
