Create Real Homepage for Blogger Blog

Saturday, October 06, 2018 | By
A homepage or a landing page, or a page loaded when reader visit your main url of the blog, can help your blog to get more visitor. The idea is making your blog load faster, get more subscriber, introduce your blog headline or making your blog look more professional.

If you visit at someone Blogspot blog, usually it have some numbered post in it, sidebar, also the design its look same on every page or article you visited. Your blog will look more cooler if  the homepage or main url on your blog have different design.

We are about to make a Real Homepage not a Static Page with custom redirect!
We will make a landing page look like picture below.


First, go to Theme - Edit HTML and go to Blog1 widget by clicking "Jump to Widget" an choose Blog1, then expand "Main" part of the widget.

Inside, we will find code <b:loop> attribute like this
<b:loop values='data:posts' var='post' >
  <!-- ITEM -->
</b:loop>

In above code, 'data:posts' which mean our article will be taken to show in that page and repeated 'X' times from the number of post we set in the Blog settings. As example if we set 7 post, it will show 7 article in main page.

In landing page or homepage we want to make like picture above, as you see it doesnt have any post or article. So we will give some condition to make our post does not show in homepage, after we give some condition, the code look like below
<b:if cond='!data:view.isHomepage'>
<b:loop values='data:posts' var='post' >
  <!-- Other Code -->
</b:loop>
</b:if>
That code have condition '!data:view.isHomepage' it has Inequality operator which mean condition is true when view is not a homepage.

Our modified homepage does not have navigation like default homepage do. So, move other <b:include> part inside Blog1 widget that we want do hide from our modified homepage. Page navigation for example code will look like 
<b:if cond='!data:view.isHomepage'>
<b:loop values='data:posts' var='post' >
  <!-- Other Code -->
</b:loop>
<b:include name='nextprev'/>
</b:if>
And now for page that appear only in homepage, we give other condition
<b:if cond='data:view.isHomepage'>
  <!-- ITEM -->
</b:if>
This time, the condition does not have ! (exclamation mark) which mean, the result will true if view is a homepage. For <!-- ITEM -->" part, copy and replace source code below to its place.
So our modified Blog1 will look like 
<b:if cond='!data:view.isHomepage'>
    <b:loop values='data:posts' var='post' >
      <!-- Other Code -->
    </b:loop>
    <b:include name='nextprev'/>
</b:if>
<b:if cond='data:view.isHomepage'>
    <!-- ITEM -->
</b:if>

Show Source Code

For newer default blogger blog themes like Soho, Emporio, Contempo, etc it not have looping code, replaced by <b:include name='super.main'/> and after we give condition will look like
<b:if cond='!data:view.isHomepage'>
<b:include name='super.main'/> 
</b:if>
Maybe someone will ask, if we modified our blogger blog homepage, how we can show our default homepage? In the source code, if you look closely when we hit button it will go to https://BLOG_NAME.blogspot.com/search and the view is like our default homepage.

And what about sidebar section? our modified homepage does not have Sidebar. We will give sidebar section with inequal condition too '!data:view.isHomepage', look at post How to Hide Sidebar for detail.

Share This

WhatsApp LINE Google Bookmark

8 comments:

About
My photo
Blak Rush
BloggerBasics101 is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License.
Misc