Skip to main content
FANCYBLOGGERTRICKS

follow us

Automatically Add Article Summary Below Blog post on Blogger


Today I'm going to share another tutorial on how to beautify a blog and add more value by showing post summary below a blog post on blogger. This is very common on WordPress blogs using plugins, this can also be done on blogger too by using some few HTML codes. With this little trick, you can easily showcase article summary in the post footer.

What is Post Summary? 

Like the name implies, it's a code that summarize website articles by extracting the important details of an article (like the Publishers name, Post description, Main post image and Categories/Labels) to the blog post footer

How Article Summary Widget Works.

This widget automatically fetches a summary of an article by showing a short image snippet of the featured image in the article using data:post.thumbnailUrl and the article name using the <data:post.title/> tag, also the name of the post publisher using Google Plus profile. Lastly, it also adds a unique post description by fetching the custom post search description added through the post editor using <data:blog.metaDescription/> and also the labels used with <data:label.name/>.

How to Add Article Summary Below Blog post


1. Login to your blogger blog
2. Goto Template, the select Edit HTML
3. Search for <data:post.body/> (the second occurence works best in some template)
4. Place the below HTML codes just above/before <data:post.body/>

<table class='tablepress tablepress-id-46' id='tablepress-46'>
<tbody class='row-hover'>
<br/><center><img alt='post-summary-thumb' expr:src='data:post.thumbnailUrl' height='100' width='150'/></center>
<tr class='row-1 odd'><td class='column-1'><b>Article Name</b><br/><br/></td><td class='column-2'><data:post.title/><br/><br/></td></tr>
<tr class='row-2 even'><td class='column-1'><b>Description</b><br/><br/></td><td class='column-2'><data:blog.metaDescription/><br/><br/></td></tr>
<tr class='row-3 odd'><td class='column-1'><b>Author Name</b><br/><br/></td><td class='column-2'><div itemprop='author'><data:post.author/></div><br/><br/></td></tr><tr class='row-6 even'><td class='column-1'><b>Published On</b><br/><br/></td><td class='column-2'><div itemprop='dateModified'><div itemprop='datePublished'><data:post.timestamp/></div></div>
&#160;<br/><br/></td></tr><tr class='row-6 even'><td class='column-1'><b>Post Category</b><br/><br/></td><td class='column-2'><b:if cond='data:top.showPostLabels and data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:label.isLast'>               <data:label.name/>
        </b:if>
    </b:loop>
</b:if>
<br/><br/></td></tr><hr/>
</tbody></table><hr/><br/><br/>

5. Save Template and view any of your blog posts to see the article summary live.

Note:

If the description on your article summary widget shows blank, it means you haven't enable search description for each post. Read how to enable search description on blogger post section

Conclusion.

Adding article summary to a blog post add more beauty to a blogger blog and can also improve SEO, because more targeted keywords appear in the summary description and post title. Are you finding it hard to automatically add article summary below a blog post on blogger? Comment through the comment section and ill try to help you out.

You Might Also Like:

Comment Policy: Please write your comments in accordance with the topic of this page post. Comments that contain links will not show up before they are approved
Open Comment