Monday, 20 December 2010

How to add Automatic Read More with Thumbnail in Blogger BLOG

This article will explain you to how to add the automatic read more for blogger blog with thumbnail.

Step 1: Go to Blogger.com Login with your Email and password, Go to Design and Select Edit HTML Tab and click and then find
Expand Widget Templates and then Click the check box again
Step 2: Press CTRL+F this code
</head>
Add these code before </head>
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 400;
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>
And then next step will be Again press CTRL+F and find

<data:post.body/>
And Replace with below code

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
<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'><img src='http://lh3.ggpht.com/_Kv5tIcZAMKY/S9f0PFy_qDI/AAAAAAAAADw/ZBwUR8G2hxw/s400/read_more.jpg'/></a></span>

</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
</b:if>
Step 4: Save the template by clicking save button

1 Responses to “How to add Automatic Read More with Thumbnail in Blogger BLOG”

Md. Mamun Sarkar said...
3 March 2011 at 19:18

Earn Money -
Bangladeshi Models
- Bangla Books
download
- Forix Trading video -
Technology Tips tricks
- World
Newspaper
 -Video Blog


Post a Comment

Popular Posts