Tuesday, February 14

How to set Static homepage Template in blogger without Post

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.