Say goodbye to cheap javascript way of summarizing blogger posts - Alternative Serverside method for any blogger template

Published


So, Ho do you Summarize your blog Posts to Show in your blog' homepage or archive page.?
If it i the Same cheap JavaScript method or trick(As you call it) that will trim out the received post, then its the time to change.

It Was Super slow,when i added JavaScript summarize and 4 posts on main page, then i understood that if it is like so, visitors will be running away from my blog because of its slow loading.
after analyzing and  studying about blogger tags in detail, i found that it is possible to summarize blogger posts in server side.
Finally I came up with the solution and i recognized how fast my blogger blog is than before.!

JavaScript method to summarize Blogger posts

You open template editor.
Then you add  below configuration in head to summarize received posts.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 200;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;

function removeHtmlTag(a,b){if(-1!=a.indexOf("<")){for(var c=a.split("<"),d=0;d<c.length;d++)-1!=c[d].indexOf(">")&&(c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length));a=c.join("")}for(b=b<a.length-1?b:a.length-2;" "!=a.charAt(b-1)&&-1!=a.indexOf(" ",b);)b++;a=a.substring(0,b-1);return a+"..."}
function createSummaryAndThumb(a){var a=document.getElementById(a),b="",c=a.getElementsByTagName("img"),d=summary_noimg;1<=c.length&&(b='<span class="summary_img_span" style="float:left; padding:0px 10px 5px 0px;"><img class="summary_img" src="'+c[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>',d=summary_img);b=b+"<div>"+removeHtmlTag(a.innerHTML,d)+"</div>";a.innerHTML=b};

</script>
</b:if>
</b:if>

And then you Find <data:post.body/>  and replace that with below code.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.canonicalUrl' rel='bookmark'><b>Read more &gt;&gt;</b></a></span>
</b:if>
</b:if>


So, It will be summarizing your blogposts in all other pages, except item page and static page.


BUT, Whats happening? [Disadvantages of JavaScript method]


  • your blogger blog takes too much time to load
  • Your blog downloads unwanted images and text blocks or scripts that are in each post.
  • It may show full post before it get trimmed out! thus the beauty of blog goes away.
  • If JavaScript i not enabled in visitor's device,it ill give your blog's homepage an awkward look because no blog post will be summarized.
  • It will throw your visitor away because many hates slow website/blog


Server side trimming / Summarizing of blogger posts.

You open template editor
Search for <data:post.body/>  (If JavaScript summarize already enabled, the whole block).
Replace that with below Code.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div id='&quot;summary&quot;'>

<b:if cond='data:post.thumbnailUrl'>
<span class='summary_img_span' style=''>
  <img class='summary_img' expr:src='data:post.thumbnailUrl' style='width:100%;'/>
</span>
</b:if>

<div class='post-body'>
<b:if cond='data:post.snippet'><data:post.snippet/></b:if>
</div>
</div>

<div style='clear: both;'/>
<span class='readmoreblock'>
  <a class='readmorehref' expr:href='data:post.canonicalUrl' rel='bookmark'>
    <span class='readmorespan'>Read more &#187;</span>
  </a>
</span>
</b:if>
</b:if>

Whats Happening here? [Advantages of This method]

What we do is actually make use of the data:post.snippet tag in blogger.
and we also make use of data:post.thumbnailUrl tag.

  • You blogger blog loads faster because summarizing done on server-side.
  • Doesn't load whole blog post contents if its not the item page/post page.
  • Simple to apply. No coding knowledge required.
  • It will never show full post if it is not an item/post page.
  • Doesn't require JavaScript.

Summary

Make use of this feature and say goodbye to javascript method! you will not regret. ;)

Comments

  1. THANKS . you are a life saver. I wonder how fast your site loads. Good Job!

    ReplyDelete
  2. Hi there,

    Are you using this for your index page? The post snippets there have more than 100 chars and you don't seem to be using any javascript for that.
    I've been trying to make the snippets larger than the default 100 chars, but have no idea how to do it.

    Any help would be appreciated!

    ReplyDelete
    Replies
    1. Hi tukasz.
      Currently, i am not using this method.
      instead i make use of "jump break" thing. so it will show only contents till the jump break arrives (in index pages).
      Hope this helps :)

      Delete
    2. Yeah, eventually I figured it out. But thanks for your help!

      Delete
  3. dear sir like to do this but it is not understood and i put it in my blog but not working says error.

    ReplyDelete