Adding Auto Read More Link With Thumbnail

Before some days I had published a post regarding blogger jump break feature. But many people had problems so I thought to provide my visitors with a more flexible auto read more link.

But first of all I would like to distinguish it from blogger page break. As we know that blogger jump break requires to be included in each post but auto read more link doesn't requires to place any code while editing your post.

And the most important feature which it has is that it also displays thumbnail which the default jump break doesn't. You just have to add a one time code in your template and you are done.

Just follow the steps below;

• Go to dashboard>Template>Edit Html.
• Click on Expand Widget's Template.
• Then search for </head> tag in your template.
• After finding this tag, you should copy the below code and paste it just after </head>;

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }
 }
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->

• Now search for this piece of code; <data:post.body/>
• After finding <data:post.body/> replace it with the below code;

<!-- Auto read more code Start -->
<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>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more code End -->

• Finally save your template and you are done.

Some Tweaks;

Here are some tweaks that you can perform in the code;

1. You may find <data:post.body/> twice or thrice. If it is the case than i strongly recommend you to choose the first one.
2. You can change the value of "img_thumb_height" and "img_thumb_width" to change the height and width of the thumbnail in pixels respectively.
3. You can edit the value of "summary_noimg" and "summary_img" to change the number of characters to appear when there is no image and when there is image respectively.
4. Change "Read more ..." with the text to appear as read more link. For eg:see more>>,get more>>,show more..,etc.

Now, you can see your auto read more link working perfectly in your site. I expect that you will get more improvements. BYE!

Author : Anonymous

Share this

Related Posts