How to change blogger post snippet Length Perfect?

In Home page, the blog provide a list of post, the best way is to ensure snippet and thumbnail instead of full post. In this article you will find out how to remove most problem face many bloggers when develop post snippet. 

If your use blogger, there are different themes templates, some have snippet for both mobile and desktop version but other they have only for mobile. 

However, the themes have a default setting which sometime not preferred by blogger. The following are some changes that you can make to ensure post snippet are perfect.

How to increase character length in blogger snippet instead of using limited length, 'data:post.snippet'?

Take example the following code

<div class='post-body' 

    style='color:black;'

>cond='data:post.snippet'>

<data:post.snippet/></b:if></div>

The above code 

"data:post.snippet'

have character length (140) which is too low, and it doesn't give a line break between the headings and paragraphs. When there's a heading at the very start line break is necessary.

Solution

Open blogger edit HTML find the above code and replace with the following code

<div class='post-body' style='color:black;'>

<b:eval expr='snippet(data:post.body, {length: 400, 

links: false})' /></div>

snippet(string, options)

options: Object specifying the snippeting options, which are:

links: boolean for whether to preserve anchors/links in the snippet. Defaults to true.

linebreaks: boolean for whether to preserve linebreaks (tags) in the snippet. Defaults to true.

ellipsis: boolean for whether to append an ellipsis (…) to the end of the snippet. Defaults to true.

length: Number specifying the maximum length of the snippet.

 

How to change blogger post snippet length without affecting other widget text?

 

<data:post.snippet/> with <b:eval expr='snippet(data:post.body, {length: 400, linebreaks: false, links: false})' /> 

If  replaced the above code to try and increase character length on post snippet. It worked, but you may see the  text in other widgets are in bold or in italics. How to correct that?

This issue happen because "data:post.body" data tag contains the whole content of the post including the HTML unlike the data:post.snippet or "data:post.longSnippet" data tags which strip these away internally.

 

Even though the snippet operator only counts text content when determining the length but it doesn't explicitly strip away the HTML tags associated with that content (It only provides options for stripping away anchor (<a>) tags via the links option and <br> tags via linebreaks option but no options for other tags like bold or italics).

 

In this particular case, there is an HTML tag present for italicizing the text which couldn't be closed properly because of the character length limit of the snippet (In the screenshot, we can observe that the bold text from the post content is displaying correctly as the opening and closing tags were included within the snippet length itself). 

Due to the missing closing tag used for italicizing the text, the browser italicized all the text after the snippet (as it couldn't figure out where the italicizing should be stopped)

If the requirement for snippet length is not more than 850 characters, then using 

data:post.longSnippet

 would be a better choice than data:post.body.

Previously data:post.longSnippet was limited to 300-400 characters but that limit has now been increased. Coupling it with the snippet operator would give you more control over the character length. The new code snippet would look like –

<b:eval expr='snippet(data:post.longSnippet, {length: 400, linebreaks: false, links: false}

 The result will be as plate below

 If you like, our article please share like and comment Thanks a lot