In a world with full of arts and beauties. It is remarkable when we look at something new which is convincing. In this tutorial, I would like to modify your read more with thumbnails in your blog posts which sometimes you find it difficult on how to adjust the texts and the size of the image thumbnail. And to clean up any difficulty regarding this matter, I made another version of a read more with thumbnails where you can customize the number of words or texts and the thumbnail size.
Adding Read More To Blogger in Updated Version!
Step 1. Log-in to your Blogger Account (if you have not).
Step 2. Proceed to Blogger Dashboard and click Template button (back-up your template and store it an a safe place for your reference).
Step 3. Hit and click the Edit HTML button.
Step 4. In the Blogger Template Editor's page, look for the tag below
</head>
Step 5. Just above the tag in step 4., paste the following code
<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150;
</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>
Customization of the above code
The number in red color (250) signifies the number of characters to display when there is no image.
The number in orange color (200) designates the number of characters to show when there is an image.
The number in light blue color (150) denotes the height of the image being displayed.
And the number in dark blue color (150) implies the width of the image.
Note: You may increase or lower the above numerical value as you want!
Step 6. Now look for the next tag below and delete it
<data:post.body/>
Note: Choose the second occurrence of the code.
Step 7. Replace the tag in step 6 with 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>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin- right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>
The bold texts above are conditional tags in order to hide this widget in your static pages and post pages.
Change the texts Read More with any other word or phrase like 'Continue Reading' or 'Show More>>'.
Change the position of the text Read More from right to left by simply replacing the texts 'right' in the fifth line from the bottom of the above codes.
Step 8. Click Preview to see the initial effect then hit the Save button. See your home page now with its new appearance.
God Bless Folks!
