How to display post snippets in feed view of Blogger's Emporio Template
witten2022/9/11
The Emporio template is beautifully designed with article images highlighted on the home page screen. Have you ever wanted to display article snippets to be appeared in each articles in the home page view ? This article explains how to display snippets for each article on the home page of the Emporio template.
Show Snippets in Emporio Theme Method
Go to your blogger.com dashboard -> Theme tab -> Edit HTML -> jump to the Blog1 and find <b:includable id='postTitle' var='post'>
Then you will see the lines show bellow
<b:includable id='postTitle' var='post'>
<div class='post-title-container'>
<a expr:name='data:post.id'/>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
<a expr:href='data:post.link ?: data:post.url'>
<div class='snippet-container r-snippet-container'>
<div class='r-snippetized'>
<data:post.title/>
</div>
<b:if cond='data:post.title != ""'>
<div class='snippet-fade r-snippet-fade hidden'/>
</b:if>
</div>
</a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</div>
</b:includable>
Press Enter Key just before the last line. Then you have one line of space directly above it. In that Space copy paste <b:include cond='data:view.isMultipleItems' data='post' name='postSnippet'/>
So now the codes should look like this hereunder
<b:includable id='postTitle' var='post'>
<div class='post-title-container'>
<a expr:name='data:post.id'/>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
<a expr:href='data:post.link ?: data:post.url'>
<div class='snippet-container r-snippet-container'>
<div class='r-snippetized'>
<data:post.title/>
</div>
<b:if cond='data:post.title != ""'>
<div class='snippet-fade r-snippet-fade hidden'/>
</b:if>
</div>
</a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</div>
<b:include cond='data:view.isMultipleItems' data='post' name='postSnippet'/>
</b:includable>
The yellow line in the code above is the newly added line. Save it. Now you have a beautiful snippet with a fade effect.