How to display Post Excerpt and Thumbnail on the Homepage of the blog

As a consequence of disabling mobile display features, after following a tutorial how to create a responsive template blogger. The homepage of the blog became so heavy for a mobile version, because it displays the entire contents of the article. Imagine, if on the homepage of your blog contains 10 post and that the whole post / article to appear, it would be so long and very inefficient. For that we need a change in view the homepage into a post excerpt (snippets) and thumbnail,in order to be concise, making it easier for visitors to make choices. In addition, making the homepage into a post excerpt and thumbnail can reduce the burden of bytes when a visitor open your blog homepage, so lightly and more efficient.

Many ways to create a post excerpts on the homepage, label and archive.

1. using a script

This method has many posted, but this is problematic on a blog load. this is only my opinion.

2. By changing the structure in the <b:includable id='post' var='post'>...</b:includable>

This method is too complicated to be explained by the writing.

3. Switch to mobile version

I think, this is the easiest way to change the look of the homepage into a post snippets and thumbnail. If you are interested, let's follow the tutorial how to display post snippets and thumbnails on the homepage, label and archive of blog.

1. Find a similar code below in <b:includable id='main' var='top'>⋯</b:includable>

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

Note the red code, it is a redirect code that you need to copy and paste in accordance with the above patterns.

2. Eliminate the appearance of the post date, specifically on the homepage, label and archive blog.

Still in<b:includable id='main' var='top'>⋯</b:includable>. Find a similar code below.

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

Note the red code, it is a redirect code that you need to copy and paste in accordance with the above patterns

If you wish to view homepages similar to the picture above. Please follow the next steps.

UPDATE : For More Results, Click Here!!!

3. Remove all the code in the <b: includable id='mobile-index-post' var='post'>...</b:includable>, 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. Add css code below, place on top ]]></b:skin>

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

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

Click Format Template and then Save Template.

Next :
How to change Pages widget (Pagelist Menu) into a responsive dropdown menu.