Advertisements
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.
Method 2:
<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'>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: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>
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>If you are still confused about using the conditional tags to show/ hide the blogger gadgets/widgets on specific pages then follow this guide.
<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>
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.
This post have 0 Comments
If you have any questions, please feel free to ask.
EmoticonEmoticon