How To Create One Page Blogger Template

I have noticed many places on the Internet during my work, many people are interested in working with one page blogger template, like this blog. It may look like a website, that's why many will like it So in this post I will mention a post about the way to create one page Blogger template.

One Page Blogger Template Different Issues

While creating one page blogger template, keep in mind the user experience aspect. In simple sentences, give your visitor an environment so that he/she can easily visit through links to other post/pages of your blog or website. Considering such aspects, I have mentioned some things that you can do -

1. Be careful when pasting various CSS code, so don't delete other code or mix it with other codes.
2. Of course, increase Click Through Rate (CTR), using the recent post, popular post, etc.
3. You can use a few outside links and make it as easy as possible to read the blog site.

One Page Blogger Template Making Steps

As an example, here I used the Blogger's default "Contempo Template" for creating One Page Blogger Template.

First, we will use the following code to create a new section called "homepage", in which the widgets will show only at home. This means that after visiting your domain, this page will appear, which is your home page. I hope you want to do this. If so, let's start creating one Page Blogger Template.

STEP1: Go to Blogger Dashboard > Themes > Edit Html 
STEP2: Click anywhere in the code, then press Ctrl + F
STEP3: A new search box will open in the code box, where you search for this code using </ head>.

STEP4: Then, copy the following code and paste it just below </ head>

<div id='frontpage'>
<b:section class='homepage' id='homepage' maxwidgets='15' preferred='yes' showaddelement='yes'/>
</div>
<div style='clear: both;'/>

STEP5: Now you will search for this ]]></ b:skin> codes, like the previous STEP3.

]]></b:skin>

STEP6: Then, after copying the following CSS codes, paste it right below ]]></ b:skin>, which will be used to hide or visible some of the sections currently showing on the blogger home page.

<style>
<b:if cond='data:blog.canonicalUrl == data:blog.canonicalHomepageUrl'>
.sidebar-container{
display:none;
visibility:hidden;
}
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
.post-outer-container {
display:none !important;
visibility:hidden !important;
}

.bg-photo-container {
display:none !important;
visibility:hidden !important;
}
.bg-photo-overlay {
display:none !important;
visibility:hidden !important;
}

.centered-top-container {
visibility:visible !important;
}

.main {
display:none !important;
visibility:hidden !important;
}
</b:if>
</style>


<!--Start Hide Home Page Section in Blog Post Page -->
<style>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
#frontpage {
display:none;
visibility:hidden;
}
</b:if>
</style>

STEP7: Save Template

For Your Different Template

For your different template, just change these CSS codes above. That is, the section IDs will be different in your template. For example, section ID might be different for your "sidebar", which is now showing in your home page.

So, What are the Different Section IDs For Your Home Page?

First, open your blog's home page on a tab of Chrome browser and press F12 button on your keyboard.

Next, click on the pointer icon that will appear and move your mouse pointer to the portion of the home page of your blog that you do not want to show during the creation of One Page Blogger Template. For example, if you move your mouse pointer to the sidebar, the code that will appear in the right pane will show the section ID for your sidebar between those codes. That means you have to use this section ID instead of the mentioned Section ID in the above code.

Which Part Will Change:

In the above code, you can see the code shown below. Here you'll just change the yellow part only.

.sidebar-container{

display:none;

visibility:hidden;

}

Similarly, post-outer-container, bg-photo-container, bg-photo-overlay, main, centered-top-container, also need to change these section IDs according to your different template.

Another Way:
If you have previous experience, just type " b: section " in the search box inside your template code and see all the section ID and apply one by one.

Again I Would Like To Tell You 

Here I used Blogger's default "Contempo Template". It is not possible for me to provide code differently for different templates, which differentiates between people.

At The End Of All

So, keep doing some brainstorming this way to create one page Blogger template, I hope you can understand since you have come to this end.