About

Labels

slider

Recent

Navigation

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. 
Share
Banner

Muhammad Hamza

Themelet provides the best in market today. We work hard to make the clean, modern and SEO friendly blogger templates.

Post A Comment:

0 comments: