Setting Static Homepage For Blogger Without Any Redirects

Setting Static Homepage For Blogger Without Any Redirects

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 can give your blog a new look. 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 Your homepage for blogger in 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.

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 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.

Done That's All.
how to stretch any image in blog to 100%
Submit Sitemap To Search Engines

1 comment:

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

    ReplyDelete