How to set Static homepage Template in blogger without Post

Are you looking for a complete guide to create or edit homepage in blogger ? We can do it very easily without post in home page. In this guide we showing to set home page very easily.

Blogs don't have a "home page"or "main page"  in the same way that regular web-sites do.  Instead, they show the newest post first, since, most readers will be return visitors, coming back to see what's new.

Homepage template can give your blog a new look for your blog in blogger. You can show something eye-catching at the startup.

As Known one way is to redirect your static page to show it as a homepage. But it also has its Disadvantages including Slow loading time, Home page URL and indexing problems.

Now, by consuming no time i will start step by step guide to set a custom homepage for blogger.

Step.1 : First of all, Design a template for your homepage in blogger via new post or new page.
Static Homepage For Blogger Without static page



Step.2
: After Designing your Homepage, Click on HTML of your designed page and copy all HTML codes. On next step we need to place this HTML codes into blogger HTML Page.





Step.3 : Go to Template > Edit HTML > Jump to Widget(ON TOP) > Blog1 and Change locked='true' With locked='false' , Save Template.


Static Homepage For Blogger Without static page


Step.4 : Go to layout then click on Add a Gadget in any place on the layout.



homepage in blogger without any redirects


Step.5 : Select HTML/JavaScript Gadget from the list and Paste all Codes From Step2, Click Save.

homepage in blogger without any redirects


Step.6 : Now Click on Your Gadget, Pick and Place it in the MAIN part of the Layout, Save Arrangement.


homepage in blogger without any redirects


Step.7 : Now You have successfully Created Homepage Template but now you have to hide Blog posts from the Homepage And also You Have to Hide Homepage Gadget from the Other Pages.



a. Hide Blog Posts From The Homepage: 

Template>Edit HTML > Click on 'Jump to Widget' and Select Blog Post Gadget.
setup custom homepage on blogger

            <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' version='1' visible='true'>
              <b:includable id='main' var='top'>
              <b:if cond='data:blog.url != &quot;http://www.livthreads.com/&quot;'>

<b:if cond='data:blog.url != &quot;http://www.livthreads.com/?m=1&quot;'>
  <b:if cond='!data:mobile'>
    <!-- posts -->
    <div class='blog-posts hfeed'>
      <b:include data='top' name='status-message'/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
          &lt;/div&gt;&lt;/div&gt;
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
          <b:include data='post' name='post'/>
          <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
        </div>
        <!-- Ad -->
        <b:if cond='data:post.includeAd'>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </div>
    <!-- navigation -->
    <b:include name='nextprev'/>
    <!-- feed links -->
    <b:include name='feedLinks'/>
  <b:else/>
    <b:include name='mobile-main'/>
  </b:if>
<b:if cond='data:top.showPlusOne'>
    <data:top.googlePlusBootstrap/>
  </b:if>
</b:if>
</b:if>
</b:includable>

Include The highlighted Code in the Blog1 Widget Codes and change 'http://www.livthreads.com' to Your URL.

b. Hide Homepage From The Other Pages: 
Template>Edit HTML > Click on 'Jump to Widget' and Select Homepage (HTML) Gadget.
hide gadget from homepage

      <b:widget id='HTML1' locked='false' title='' type='HTML' version='1' visible='true'>
              <b:includable id='main'>
  <!-- only display title if it's non-empty -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>

</b:includable>

Include The highlighted Code in the Homepage Widget Codes.

Post a comment

13 Comments

  1. After going through many tutorials I only found this guide to be helpful and simple.

    ReplyDelete
  2. Thanks admin, for sharing such a great insight guide. This is the exact tutorial I was searching for. Worked like a boom. And bro your theme was like wwooooooow. Today first time reached in your blog. And now am using mobile and your blog looks fantastic in Mobile device. I fall in love your blogger theme. Seriously saying I would like ri have this theme. So awesome.

    And thankyou I finally able to resolve my issue on one of my theme. Thanks :)

    ReplyDelete
  3. Static stretching includes coming to forward to a point of strain and holding the stretch. static stretching

    ReplyDelete
  4. Thanks.. but I would like to show my blog post to a different URL like example.com/p/blogs.html..
    What do I do?
    Please.

    ReplyDelete
  5. is it works on custom templates... i am using custom template. can you help you how to use on my template.

    ReplyDelete
  6. i am using fletro template. how to use this tech on my website .. please giude me.

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. But does that apply to this site as well
    https://www.top5cricket.com/

    ReplyDelete
  9. I just build my own static template, its free to use....

    demo:https://templategurublogger.blogspot.com/
    how to use it: https://www.gurublogger.id/p/seo-aggressive-blogger-template.html

    Acessibility, Speed, and SEO Score : 100 %

    Just maybe the author want to ake a look and try my template :D

    ReplyDelete