Making Read more function at blog.

Sometimes difficult and we are too busy even when we want to cut the articles we write too long. Moreover, when we used template-shaped magazine. Need more time to manage them. Now there are solutions that can improve your writing in the article on your blog.

Here I will explain step by step how to do:

1. Login to blogger with your ID.
2. Click Layout
3. Click Edit HTML
4. Click Download Full Template and backup your template to anticipate if error occurs.
5. Tick the small box beside the words Expand Widget Templates. expand-widget-templates
6. Copy and paste the JavaScript below exactly above the code </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 350; summary_img = 250; img_thumb_height = 100; img_thumb_width = 120; </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(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>

7. Find the code <data:post.body/> on your template (tips: press Ctrl + F on your keyboard then write <data:post.body/> and hit Enter).

8. Remove the code and change with the code below:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

9. Click SAVE TEMPLATE.
10. Done

With this technique, the read more function will be automatically created each time you post an article. In additional, you can adjust the value of the code below to fit your posts height.

summary noimg= 350 (the height of article’s cutting without image)
summary img=250 (the height of article’s cutting with image)


If you have made a previous Readmore in your blog, then the steps to change are as follows:

1. Click Layout
2. Click Edit HTML
3. Click Download Full Template and backup your template to anticipate if error occurs.
4. Tick the small box beside the words Expand Widget Templates. expand-widget-templates
5. Find the code on your template (tips: press Ctrl + F on your keyboard then write <div class='post-header-line-1'/> and hit Enter).

of the code, you can see the order code as follows:

<div class='post-header-line-1'/>

<div class='post-body entry-content'>
<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Replace the red code with new code on the eighth point
Or if you are having difficulties, please return to the original position of the start of the code ...

<div class='post-header-line-1'/>

Up to code:

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Replace with this code

<div class='post-header-line-1'/>

<div class='post-body entry-content'>
<data:post.body/>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Then do the steps of the seventh to ninth.
Hopefully this solution can help.