How Adding Auto Readmore by Default Thumbnail Blogger.

How Adding auto readmore by default thumbnail Blogger.

In the first post, I've explained how where I make Auto Read More with thumbnails. But the shortcomings of this script will not display thumbnails on posts that are not accompanied by pictures.

When this script has been enhanced by using the default thumbnail, either with pictures 'no image' or whatever image you like. Screen shoot like this:

How Adding Auto Readmore by Default Thumbnail Blogger

Auto Readmore with Default Thumbnail

To make Auto readmore by default thumbnail, you need to perform two easy steps

1. Add javasript

2. Add HTML

Adding JavaScript

Before doing anything, I suggest backup your template to avoid unwanted things.

To menambahkakan javasript code below, save the following code before the </head>

// Replace the numbers below to set the number of characters

summary_noimg = 350;

summary_img = 280;

// Replace the numbers below to resize thumbnail

img_thumb_height = 200;

img_thumb_width = 200;

// Replace the image according to your taste

img_thumb_nosrc = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlwPoBFfZLyHdcz_LtSPY9-0IcUo_IVm4W3PGG65Oyt8s_doBhiyP33tur87YKiwOw4wHJlXMOm4U6g_YS6wlarezg5nrsGk6IdWJbgLeb23e1dSbmgQdn9Jqs9WZFW894ZWLEEMDOlozl/s1600/default.png";

</script>

//<![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;

// this block of code is used to add default thumbnail to post without images

if(img.length<=1) {

imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';

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>

Adding HTML Code

Find <data: post.body /> and replace it with the code below

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.pageType != "item"'>

createSummaryAndThumb("summary<data:post.id/>");

</script>

</a>

</span>

<b:else/>

<data:post.body/>

</b:if>

<b:else/>

<data:post.body/>

</b:if>

Save your template, and congratulations .... You have successfully added auto readmore by default thumbnail.

FAQ

I'm already using auto Radmore first, how to change the default auto readmore with thumbnails? If you are using Auto Readmore with old Thumbnail (V.1) simply replace JavaScript in step 1.

May be useful....