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:
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>
<script
type='text/javascript'>
// 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/AVvXsEgR1mMWq1iX0Ywes_PlRqFBySs6wMDpF80sb0OMnfNjB5qHLA4AJaeRtm_1Tg1vjFZrUL4w60RHTZv7BPChltDZiZvjJ_ALJm4xpCrAaP2gfj5HBqiX3fFrZpy6RwXN28cm_H-3DUWOSucw/s1600/default.png";
</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;
// 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"'>
<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;margin-top:10px'>
<a expr:href='data:post.url'>
Read More »
</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....