Tips Tutorial How To Display Post Excerpt And Thumbnail On The Homepage Of The Blog

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.