Adding Read More To Blogger Updated Version!

As you read my previous tutorial on adding read more with thumbnails to blogger you found it difficult how to adjust the texts and the size of the image thumbnail. Now in order to answer that question, I made another version of it wherein you can customize the number of words or texts and the thumbnail size.

Adding Read More To Blogger Updated Version!

Step 1.  Log-in to your Blogger Account (if you have not).
Step 2.  Go to Blogger Dashboard and click Template button (back-up your template and store it an a safe place for your reference).
Step 3.  Hit the Edit HTML button.
Step 4. In the Blogger Template Editor's page, look for the tag below

</head>

Step 5. Just above the tag in step 4., paste the following code

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150;
</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>

Customization of the above code

•  The number in red color (250) signifies the number of characters to display when there is no image.
• The number in orange color (200) designates the number of characters to show when there is an image.
• The number in light blue color (150) denotes the height of the image being displayed. 
• And the  number in dark blue color (150) implies the  width of the image.

You may increase or lower the above numerical value as you want!

Step 6. Now look for the next tag below and delete it

<data:post.body/>

Note: Choose the second occurrence of the code.

Step 7.  Replace the tag in step 6 with code below

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>

• The bold texts above are condiotional tags in order to hide this widget in your static pages and post pages.  Click here  for the tutorial if you want to hide this widget  in your archives.


• Change the texts Read More with any other word or phrase like 'Continue Reading' or 'Show More>>'.
• Change the position of the text Read More from right to left by simply replacing the texts 'right' in the fifth line from the buttom of the above codes.

Step 8. Click Preview to see the initial effect then hit the Save button. See your home page now with its new appearrance.
Have a Blissful Day and Enjoy!