How to Change Blog Main Page from Post Body to Post Snippet plus Thumbnail

After creating a responsive Blogger default template , the next thing we have to do is change the main page views, labels and archives (Index Pages) from post bodybeing post snippet plus thumbnail. Because if left unchecked, the main page of the blog becomes very long, and certainly less effective and efficient. Imagine if the main page of your blog contains 10 articles, surely it would be very tiring for Blog users.

In addition to making the main page into a post snippet plus thumbnail can reduce the burden of kilobite when visitors to the blog open the main page of our blog, so light and frugal of course (again-again user friendly).

There are several ways to change the blog's main page from post body to post snippet.

The first way is to change the scheme at <b:includable id='post' var='post'>⋯</b:includable>. But this is hhhhhhhhhh, just wisely muyeng.

The second way is to switch the blog's main page to the main page of the mobile version. This is the easiest way to change the appearance of the index / main page to post snippet plus thumbnail. please follow the steps below.

1. Look for the code <b:includable id='main' var='top'>⋯</b:includable>, then open ... it, you look for a code similar to the one below.

<div class='post-outer'>
    <b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;item&quot;,&quot;error_page&quot;}'>
        <b:include data='post' name='mobile-index-post'/>
        <b:else/>
        <b:include data='post' name='post'/>
    </b:if>
  
  <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
</div>

Pay attention to the red code, it is a transfer code that you must copy and paste according to the pattern above (don't forget to attach the cover).

2. Eliminating the display date of the article.

Actually after the first stage, the main page of the blog has changed to post snippet plus thumbnail. It's just that there is still a block between the post snippet, the date of the article (if you activate the display date of the article / post). Here's how to remove it specifically for the main page, labels and archives, so when opening the date posting still appears.

Still inside <b:includable id='main' var='top'>⋯</b:includable>, look for the code below, note the red code, it is the code that you have to copy and paste according to the pattern below (don't forget to attach the cover).

<b:if cond='data:post.dateHeader'>
      <b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;item&quot;}'>
          <b:else/>
          <h2 class='date-header'>
            <span>
              <data:post.dateHeader/>
            </span>
          </h2>
      </b:if>
</b:if>

Last save the template. 

Update : Sunday 08 January 2017 

If you want the main page look more attractive (similar to the picture above). Please follow the next steps. 

UPDATE : JUM'AT 01 SEPTMBER 2017 

For the main page views of other models, please see HERE

3. Delete all the code inside <b: includable id='mobile-index-post' var='post'>...</b:includable>(just delete the contents, do not frame it), then replace it with the code below.

<div class='mobile-post-outer'>

  <a expr:href='data:post.url'>

    <h3 class='mobile-index-title entry-title' itemprop='name'>

      <data:post.title/>

    </h3>

    <div class='mobile-index-contents'>

    <b:if cond='data:post.thumbnailUrl'>

      <div class='mobile-index-thumbnail'>

        <div class='ImageR'>

          <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>

        </div>

        <span>

          <div class='post-body'>

            <data:post.snippet/>

          </div>

        </span>

      </div>

      <b:else/>

        <div class='post-body'>

          <b:if cond='data:post.snippet'>

            <data:post.snippet/>

          </b:if>

        </div>

      </b:if>

    </div>

    <div style='clear:both;'/>

  </a>

  <div class='jump-link'>

    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>

      <data:post.jumpText/>

    </a>

    <div style='clear:both;'/>

  </div>

  <div class='post-footer post-footer-line'>

    <span class='post-author vcard'>

      <b:if cond='data:top.showAuthor'>

        <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>

          <span itemprop='name'>

            <data:post.author/>

          </span>

        </span>

      </b:if>

    </span>

    <span class='date-header'>

      <b:if cond='data:post.dateHeader'>

        <data:post.dateHeader/>

      </b:if>

    </span>

    <span class='post-labels'>

      <b:if cond='data:top.showPostLabels and data:post.labels'>

        <data:postLabelsLabel/>

        <b:loop values='data:post.labels' var='label'>

          <a expr:href='data:label.url' rel='tag'>

            <data:label.name/>

          </a>

          <b:if cond='not data:label.isLast'>

            ,

          </b:if>

        </b:loop>

      </b:if>

    </span>

    <span class='post-comment-link'>

      <b:include cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;}                                  and data:post.allowComments' data='post' name='comment_count_picker'/>

    </span>

  </div>

</div>

4. To have the snippet next to the thumbnail image, add the css below, just place it above ]]></b:skin>

.ImageR {float: left; padding:5px 10px 5px 0;}

.jump-link {padding:5px 0;}

Click Format Template, then Save Template.