how to use read more in blogger

How To Add Auto Read More With Thumbnail in Blogger Blog:

In Blog spot when you create a blog and populate your blog with different articles. Your articles are shown in home page and the latest post were shown first, but you see it will show the complete posts in the home page. here we write a very useful method to make your post more specific in the home page. it will shows title of the post then a short summary of your post and a thumbnail ( picture ), the thumbnail is the first image of your post. just after summary a Read more... link is shown and when any one click this link, they will show the complete post. As shown the figure given below:

Here are step by step guide for using automatic read more feature in blogger posts. one thing we must mention here we post the method in which we edit the template to make read more option, we write another method in which we use read more feature in blogger posts without editing the template.

Step 1:

First of all login your blogger account and from your Blogger Dashboard, Select your blog, go to the Template and  then click on Edit HTML button as shown the figure below: 

Step 2:

Now you have display the HTML code. click any where in the code and  press Ctrl + F button from your keyboard. and search the code  

<data:post.body/>

you will find this code more than once, you need to stop at the second one you find.

Step 3:

Now replace the code with below code. must remember replace the code.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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='readmore' style='float:right'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

 

Step 4:

Now again search the following tag:

</head>

Step 5:

After finding the above tag, you just copy the below code and paste it just above the </head> tag, mean before the </head> tag that you just find.

 

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
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 = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Important Note:  To change the number of characters that shown as summary (see the first figure) when there is no thumbnail, just modify the value 490 in  red that write in the above code ( starting form line number 2). for number of characters shown with thumbnail modify the value 400.

and you can also adjust the height and width of the thumbnails to modify the values 120 in blue.

At last Click on  Save Template button to save the changes and now view the blog, your new look will ready to watch.

your can also use read more feature in blogger posts without editing the template.