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:
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.
I'd suggest you to use firefox while trying this. with FireBug add on installed.
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. While you are at it, create one dummy page for later use.
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.
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.
It's time to get your gadget out - Firebug! Inspect what is the id/class of the html gadget and the main post. My main post's id is Blog1 and the HTML gadget's id is HTML2. See the image attached below.
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.
Update: Some may find this step hard, so I've prepared another tutorial on how you can customize your Menu Bar using Link List instead of Pages Bar. It's much easier to use Link List to customize your Menu Bar, but you wont have your tabs highlighted when they are clicked. Check out the tutorial here.
First, view your blog using firefox. Right click on the page, and click on and view source. CTRL + Ffind for PageList1 . Scroll down and copy everything from <ul> to </ul> . Mine looks something like this:
Next, open your notepad, and redesign the above code into the following form (refer to the attached image on what goes where. It aint hard, it sure looks confusing, but it is just a matter of copy and pasting):
Function of the code? To highlight the current tab that has been selected from the menu. If you couldnt care less about it, just keep it as it is (the original form like how you have copied from the page source). Don't change the sequence. Note that for my second tab AKA Post tab AKA Dummy Page Tab from step 1, I have changed the links from http://qwertyyyyyyy.blogspot.com/p/post.html to http://qwertyyyyyyy.blogspot.com/search.html . Do the same in your blog, the format is something.blogspot.com/search.html .
Why do this? Well, since we have removed the index page from showing the blog's posts, we have to find someway to display the blog's posts. And we need an address that can be linked to the tab. The above link works just fine, though I am sure there are more than one way to do it.
Next, copy the code that you have generated, go to Dashboard - Design - Edit HTML - Check Expand Widget Template - Find for the following lines:
Delete these lines and replace with your custom made codes. Save your templates.
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.
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.
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. While you are at it, create one dummy page for later use.
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.
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.
Step 4:
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. My main post's id is Blog1 and the HTML gadget's id is HTML2. See the image attached below.
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>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <b:if cond='data:blog.url != "http://qwertyyyyyyy.blogspot.com/"'><style>#HTML2{display:none;}</style></b:if><b:if cond='data:blog.url == "http://qwertyyyyyyy.blogspot.com/"'><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.
Update: Some may find this step hard, so I've prepared another tutorial on how you can customize your Menu Bar using Link List instead of Pages Bar. It's much easier to use Link List to customize your Menu Bar, but you wont have your tabs highlighted when they are clicked. Check out the tutorial here.
First, view your blog using firefox. Right click on the page, and click on and view source. CTRL + Ffind for PageList1 . Scroll down and copy everything from <ul> to </ul> . Mine looks something like this:
1 2 3 4 5 | <li class='selected'><a href='http://qwertyyyyyyy.blogspot.com/'>Welcome</a></li><li><a href='http://qwertyyyyyyy.blogspot.com/p/post.html'>Post</a></li><li><a href='http://qwertyyyyyyy.blogspot.com/p/links.html'>Links</a></li><li><a href='http://qwertyyyyyyy.blogspot.com/p/contact-me.html'>Contact Me</a></li><li><a href='http://qwertyyyyyyy.blogspot.com/p/archive.html'>Archive</a></li> |
Next, open your notepad, and redesign the above code into the following form (refer to the attached image on what goes where. It aint hard, it sure looks confusing, but it is just a matter of copy and pasting):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <b:if cond='data:blog.url == "http://qwertyyyyyyy.blogspot.com/"'><li class='selected'><a href='http://qwertyyyyyyy.blogspot.com/'>Welcome</a></li><b:else/><li><a href='http://qwertyyyyyyy.blogspot.com/'>Welcome</a></li></b:if><b:if cond='data:blog.url == "http://qwertyyyyyyy.blogspot.com/search.html"'><li class='selected'><a href='http://qwertyyyyyyy.blogspot.com/search.html'>Post</a></li><b:else/><li><a href='http://qwertyyyyyyy.blogspot.com/search.html'>Post</a></li></b:if><b:if cond='data:blog.url == "http://qwertyyyyyyy.blogspot.com/p/links.html"'><li class='selected'><a href='http://qwertyyyyyyy.blogspot.com/p/links.html'>Links</a></li><b:else/><li><a href='http://qwertyyyyyyy.blogspot.com/p/links.html'>Links</a></li></b:if><b:if cond='data:blog.url == "http://qwertyyyyyyy.blogspot.com/p/contact-me.html"'><li class='selected'><a href='http://qwertyyyyyyy.blogspot.com/p/contact-me.html'>Contact Me</a></li><b:else/><li><a href='http://qwertyyyyyyy.blogspot.com/p/contact-me.html'>Contact Me</a></li></b:if><b:if cond='data:blog.url == "http://qwertyyyyyyy.blogspot.com/p/archive.html"'><li class='selected'><a href='http://qwertyyyyyyy.blogspot.com/p/archive.html'>Archive</a></li><b:else/><li><a href='http://qwertyyyyyyy.blogspot.com/p/archive.html'>Archive</a></li></b:if> |
Function of the code? To highlight the current tab that has been selected from the menu. If you couldnt care less about it, just keep it as it is (the original form like how you have copied from the page source). Don't change the sequence. Note that for my second tab AKA Post tab AKA Dummy Page Tab from step 1, I have changed the links from http://qwertyyyyyyy.blogspot.com/p/post.html to http://qwertyyyyyyy.blogspot.com/search.html . Do the same in your blog, the format is something.blogspot.com/search.html .
Why do this? Well, since we have removed the index page from showing the blog's posts, we have to find someway to display the blog's posts. And we need an address that can be linked to the tab. The above link works just fine, though I am sure there are more than one way to do it.
Next, copy the code that you have generated, go to Dashboard - Design - Edit HTML - Check Expand Widget Template - Find for the following lines:
1 2 3 4 5 6 7 | <b:loop values='data:links' var='link'><b:if cond='data:link.isCurrentPage'><li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li><b:else/><li><a expr:href='data:link.href'><data:link.title/></a></li></b:if></b:loop> |
Delete these lines and replace with your custom made codes. Save your templates.
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:
1 2 3 4 5 6 7 | <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.
No comments:
Post a Comment