Blogger Ever

How to create auto post summary using layout data tags in Blogger? [No Javascript]

How to create auto post summary using layout data tags in Blogger? [No Javascript]

Many bloggers do not add jump link (Read More) in their blog post and they want the script to make the summary of the post automatically.For this purpose designers use Javascript to abstract the post content and then trim the part but for Blogger users this is not the deal.However,Javascript is an option but the suggested way in to use data layout tags because they are more faster then Javascript.So lets have a look:
I've shared Blogger template editing stuff in which I'd described the layout data tags and a few more stuff for Blogger template editing.Same in this post I'm going to share how to take out some of the post part using these data layout tags.

The data tags list is not updated by Blogger staff as there are some are still absent from the data layout tags given by Blogger.Therefore,the new tag that is <data:post.firstImageUrl/> is going to use which gives the URL of the first image of the post.It is better to use this instead of <data:post.thumbnail/> because that gives URL of first image either it is hosted on Blogger or no and secondly it provideds src not the image means it have a good quality image.

So lets have a look at the code I'm trying to show.
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <img expr:src='data:post.firstImageUrl' class='thumb' />
<data:post.snippet/> <a class='jumplink' expr:href='data:post.url'>Continue Reading</a>
    <b:else/>
    <data:post.body/>
</b:if>
The above script will be replaced by <data:post.body/> and it will produce summary.

But what if you want to set default image for those post who do not have any image? For them you have to add condition.Like this one:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <b:if cond='data:post.firstImageUrl'>
        <img class='thumb' expr:src='data:post.firstImageUrl' /><b:else/>
        <img class='thumb' src='IMAGE_SRC_GOES_HERE' />
    </b:if>
    <data:post.snippet/> <a class='jumplink' expr:href='data:post.url'>Continue Reading</a>
    <b:else/>
    <data:post.body/>
</b:if>
Replace the image source and it will show the default image if their is no image. 
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.