How to Hide The Blogger Posts From Homepage, Create Static Homepage and Blog Page in Blogger

Unlike WordPress which has an option, that let you choose a “static page” as your site’s front page or a “blog page” as your site’s front page. Blogger has not this option for their users, which is a drawback. It’s very important feature as site owner may want to show their portfolio so they must want to have a static page as their site’s homepage. While other’s may want to write and share the blog posts.

Today I am going to show you a method which can be useful to overcome this problem. So, let’s begin the tutorial without wasting any time.

In the first step we will hide the blogger posts from the homepage so that the blogger posts will not appear on the homepage now and in future.

Step 1: Hiding the blogger posts from home page

Their are two ways to do this. I am going to share both methods one by one.

Method 1:

Open the blogger dashboard. Go to settings > posts, comments and sharing > show at most > type "0" (posts on the main page) here then save the settings.

How to Hide The Blogger Posts From Homepage: How to Create Static Home Page and Blog Page in Blogger

Method 2:

Go to theme> edit theme > then search for </head> finally add the following code right above </head> and save the settings.

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#Blog1 { display: none; }
</style>
</b:if>
</b:if>

Step 2: Adding the content on the blogger static homepage

To add the content on static homepage you can use the blogger widget i.e image, text, video etc. Go to Layout > add a gadget (add any gadget you want to show on static home page)

Note: Make sure that you add these gadget right above "Blog posts" section in the layout. If there is no "add a gadget" space available then add the gadget in the sidebar or anywhere "add a gadget" option available then drag it right above the "Blog posts" and save arrangements.

Blogger static homepage showing the two gadgets i,e text and a image

Step 3: Showing the blogger static homepage gadgets on homepage only

When we will follow the step 2 by adding the gadgets for static homepage right above "Blog posts" then they will show on all other pages of blogger. To show these gadgets on homepage only and hide them from other blogger pages we will use conditional tags.

Go to theme> edit theme > jump to widget > now jump to the widget which you have just added right above the "Blog posts" in step 2. In my case I have added the image and text gadget. I have jumped to image gadget. A code will appear which will look like this.

<b:widget id='Image1' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Now add the following two lines highlighted in red color below. Make sure you add them on the same places where I have added them.

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

If you are still confused about using the conditional tags to show/ hide the blogger gadgets/widgets on specific pages then follow this guide.

Step 4: How to add the blog page in blogger

Blogger static homepage was created in the first three steps of this tutorial. But if you want to have a blog section as well to show your latest posts then follow these steps.

When you write new blog post then add a label "blog" with each new post you write. We will use this label link to create the blog section.

Now simply add a link (https://getallcodexlab.blogspot.com/search/label/blog) entitled as"Blog" in your site menu.You can also get this link from categories gadget.

Note: change the highlighted red color text with your site address.

That's all!

I hope you have found this tutorial as helpful. If you have any questions regarding this tutorial or need help then please comment below.