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

Method 1:

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 == &quot;index&quot;’>
        <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

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

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

<b:widget id=’Image1′ locked=’false’ title=” type=’HTML’>
<b:includable id=’main’>
<!– only display title if it’s non-empty –>
<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’>
<!– only display title if it’s non-empty –>
<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