Create Home Page for Your Blogger Blog

This blogger hack is for those who wish to have an actual homepage for their blog, which is going to be on the main domain (you.blogspot.com) or your custom purchased one and then you can use a custom redirect of (you.blogspot.com/blog/) to the new url for the blog.

Demo

Live View

It's going to be easy, we will just replace some codes, and do simple tricks to make it, you can see live demonstration at our blogger hacks blog (iSmoothic) which is linked to the demo button up there.

Please backup your template just in case you screw up, it is very important to do, never ignore this so you just restore it back up when ever you need.

If you install this hack then the blog post preview feature of blogger is not going to work, it somehow conflicts with hiding the blog posts widget from homepage. However, I do not think anybody cares for this because you will already be previewing it in editor.

Remove Blog Posts from Home Page

Obviously, we need to remove the blog posts widget from the current blog home page so we can add another widget in its place to hold content as an actual new homepage. To do that, please open you blogger dashboard then navigate to the template designed (Dashboard > Template > Edit HTML) and search for <div class='blog-posts hfeed'> then add above it this code:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

Well, now we added an if condition tag and we need to close it at some point, please search again for <b:include name='nextprev'/> then add below it:

</b:if>

Great, we are done with hiding the blog posts from our homepage, now we need to unlock the main blog widget so we can add a holder widget for the new homepage.

Unlock Main Blog Widget to Add New One

It's very simple, just search for <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'> then change lock to locked='true' instead of false. So, you just make it possible for the new widget to be added to the main blog section, now lets do it.

In your dashboard go to the Layout tab, create a new (HTML/Javascript) widget on your sidebar or anywhere, then drag upon the main blog section which contains(Blog Posts) widget already.

After that, click "Edit" on that widget and put anything you want to appear in your homepage, and make sure it's written in HTML & Javascript, or anything similar (use code below for now).

<h3 class="post-title entry-title" itemprop="name">Welcome!</h3>
This is an example for a blogger website that has an actual home page and you can go to the the link for the blog <a href="/blog/">here</a> or from the navigation menu up there.<br />
<br />
<div class="about-me">
<h3 class="post-title entry-title" itemprop="name">About Me</h3>
You can write any thing about yourself here (or change the whole code if you want).
</div>

We also need to hide this homepage content from any page that is not supposed to have it, search for <b:section class='main' id='main' showaddelement='no'> then add this code under the <b:includable id='main'> of the newly added widget:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Again, we added an if condition tag and we need to close it at some point, please look for the </b:includable> underneath then add above it:

</b:if>

Cool, now we are almost done, don't worry about the homepage code because you can change it later, we just need to make a custom redirect for the new blog URL which I will explain for you below.

Create Custom Redirect to Blog URL

We will redirect this link you.blogspot.com/blog/ to the home page hack link which is you.blogspot.com/search?&max-results=5, please navigate to (Settings > Search Preferences > Custom Redirects > Edit) then paste these links accordingly to the dialog boxes.

Please create two redirects according to these information:

First Redirect:

Dialog (1): /blog
Dialog (2): /search?&max-results=5

Second Redirect:

Dialog (1): /blog/
Dialog (2): /search?&max-results=5

Please change the red colored (5) numbers to how much posts you want to be shown at your blog for each page, and then save changes. Okay, from now your blog link is going to be you.blogspot.com/blog/ so you have to do necessary changes.

Create Custom Robots.txt File

Just for sake of SEO, you have to change your default robots file settings to adapt with the new changes of making a home page by changing the default blog url. So, go to (Dashboard > Settings > Search Preferences > Custom robots.txt > Edit) then paste this robots configurations:

User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /search/label
Allow: /search
Allow: /

Sitemap: http://YOUR-BLOG-NAME.blogspot.com/sitemap.xml

Please make sure to change (YOUR-BLOG-NAME) in the code above to your actual blogger URL then proceed to the next and final step.

Add Blog URL to Navigation

Of course, now you must add a your blog link which is http://you.blogspot.com/blog/ to the main navigation of your website, or anywhere you should depending on your site, and you will be done.

So what do you think about our homepage hack for blogger? Do not hesitate to post your thoughts and questions about this in the section below, I am ready to help!

iSmooth Blog