Soho Theme Data Post Snippet

On the newer Soho Blogger themes, the post snippets is unavailable & not displayed for homepage (isHomepage) & index pages (isMultipleItems). Users are required to add additional markup inside Theme > Edit HTML & there is no easy way around this. Soho Blogger Theme : Add Post Snippet at Homepage & Index Pages

Here's how:-

• Go to Theme > Edit HTML 
• Select Blog1 widget.
• Scroll, find  & expand <b:includable id='post' var='post'> (#!)
• Scoll a bit & find this code <div class='snippet-thumbnail'> (#2)
• Further down below this, you will reach this code <b:include data='post' name='postTitle'/> (#3)
• Now add this Blogger snippet operator tags below the above target:-

<p class='post-body-snippet'>
  <b:eval expr='snippet( data:post.body, { length: 300 })' />
</p>

• Now your codes will roughly will look like so:-

... {{ codes }} ...


  <b:else/>
    <b:include name='headerByline'/>
  </b:if>
  <b:include data='post' name='postTitle'/> <!-- #3 -->
  <p class='post-body-snippet'>
    <b:eval expr='snippet( data:post.body, { length: 300 })' />
  </p>
</b:if>
<b:include data='post' name='postFooter'/>


... {{ codes }} ...

• Highlighted yellow is the added HTML & data snippet operator.
• Click Save Theme
• Preview you changes. 

You can set the amount of text to display at highligjted green. Currently the post snippet displays 300 character counts.

Use image above as your reference on how it should look like for your newly added codes.

You can also style your new snippets by using Theme > Customize > Advanced > Add CSS & add below CSS markup

.post-body-snippet {

  /* your CSS styles */

}