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.
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 = "no-float" ;
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 == "static_page"'><br/><b:if cond='data:blog.pageType != "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzviSXR1dAl2BPgiEi9WJOGSqZBy-a3x8J1l69-ViSDBcQf5bXAmAO0OEYPAgb87UpoadWPXfGtTR7Ik_KW_oXlXhwcKuj651szjdh6bLtkhLsxQ1CzLEEl40s56z7NN1Yks2TY5syQpw/s400/read_more.jpg'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>Step 4: Save the template by clicking save button
You might like these:
Subscribe to:
Post Comments (Atom)
Post a Comment