Adding Summary read more with thumbnail in blogger

To adding that our blog looks interesting and certainly easier for visitors, we can add some widgets or anything else, one of them is add a summary and read more with thumbnails on our blog so that when we will show 2 or more pages in the first post or home in it will look more attractive more simple and not too long until down.
Sample images and read more Summaries thumbnail for blogger or blogspot.

Here this step to adding Summary read more with thumbnail :

1. Log in to your account blog.
2. Go to you design and edit html check Expand Widget Templates :

3. Find this code </head> and copy this code below before </head> :

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

Note : the red text above can be changed with the size of the image and text to be displayed to your liking, respectively.

4. Then find this code <data:post.body/> and replace with the following code below :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/> </div><a expr:href='data:post.url'>Read More......</a>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
</b:if>

5. Save template.
See your result.. good luck...!

Description: Adding Summary read more with thumbnail in blogger Rating: 4.5 Reviewer: Zein Okeh - ItemReviewed: Adding Summary read more with thumbnail in blogger

Posted in: Blog Tips,Tips and Trick