We talked about a way of implementing selective excerpt ("Read More") for Blogger blogs (or expandable post summaries) and today I am going to present you another way of doing it, but this time by using image thumbnails (which can be turned off if you like).
This Blogger hack has 3 advantages:
1. You can set it to automatically cut off a post after a certain number or words or manually do this.
2. You can chose if you want to display a thumbnail image or not.
3. It is the first blogspot.com hack which allows you to use the <!-- more --> tag just like Wordpress.
Let's proceed to implementing the code. There are only a few simple steps you need to follow:
1. Log in to your Blogger Dashboard and go to Layout > Edit HTML and check the "Expand Widget Templates" box.
2. Search for the following piece of code in your template: <data:post.body/> and replace it with:
In this code, edit the "Read More" text with something else if you want to.
3. Search for the <body> tag in your Blogger template and paste the following code above it:
Again, if you receive an error when saving your changes, use the code from here instead of the one above.
In the script above you see some variables (bolded):
The thumbnail_mode variable determines whatever or not you want the image to be displayed to the left or the text. If you choose 'no-float', the image will not be displayed and if you choose 'float', the image thumbnail will be displayed on the left side of your posts when on the homepage (not post page).
classicMode sets if the posts should be cut off at the same point or not. It is advisable to change it to 'true' if you selected the 'float' mode for "thumbnail_mode"
summary_noimg and summary_img values are the number of words of the excerpts when your posts have or don't have an image attached. For instance, a value of '50' means "50 words".
img_thumb_height and img_thumb_width - the height and width the image thumbnails should have.
The really new thing with this script is that it works just like Wordpress does which means that you can use the <-- more --> tag to manually enter the post cut off point. Example:
Altough this script is better than the one I mentioned before (using selective posts cut off), it still has one disadvantage: setting it to automatically cut off posts, all of your posts will have an "Read More" link, even if they are shorter than the number of words you set it to cut the posts in your blog.
Don't forget to visit our list of Blogger (blogspot.com) hacks and gadgets.
[Credits: ChicaBlogger]
This Blogger hack has 3 advantages:
1. You can set it to automatically cut off a post after a certain number or words or manually do this.
2. You can chose if you want to display a thumbnail image or not.
3. It is the first blogspot.com hack which allows you to use the <!-- more --> tag just like Wordpress.
Let's proceed to implementing the code. There are only a few simple steps you need to follow:
1. Log in to your Blogger Dashboard and go to Layout > Edit HTML and check the "Expand Widget Templates" box.
2. Search for the following piece of code in your template: <data:post.body/> and replace it with:
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>-->Read More</a></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>In this code, edit the "Read More" text with something else if you want to.
3. Search for the <body> tag in your Blogger template and paste the following code above it:
<script type='text/javascript'>
var thumbnail_mode = 'no-float' ;
var classicMode = false ;
var summary_noimg = 60;
var summary_img = 50;
var img_thumb_height = 150;
var img_thumb_width = 220;
var indent = 3;
</script>
<script type="text/javascript">
//<![CDATA[
/******************************************
Auto-readmore link script, version 4.0 (for blogspot)
(C)2009 by Anhvo
Homepage: http://vietwebguide.com
Please dont remove this copyright or change it into your own
******************************************************/
/*******************************************
CONFIG (extenal code)
-------------------------------
var thumbnail_mode = "float" ; //(or "no-float")
var classicMode = false ;
var summary_noimg = 60;
var summary_img = 50;
var img_thumb_height = 100;
var img_thumb_width = 120;
var indent = 3;
*********************************************/
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}
function getSummaryLikeWP(id) {
return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}
function getSummaryImproved(post,max){
var re = /<.*?>/gi
var re2 = /<br.*?>/gi
var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|()|()/gi
post = post.replace(re4,'')
post = post.replace(re3,'<br /> ').split(re2)
for(var i=0; i<post.length; i++){
post[i] = post[i].replace(re,'');
}
var post2 = new Array();
for(var i in post) {
//if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;
}
var s = "";
var indentBlank = "";
for(var i=0;i<indent;i++){
indentBlank += " ";
}
if(post2.join('<br/>').split(' ').length < max-1 ){
s = post2.join(indentBlank +' <br/>');
} else {
var i = 0;
while(s.split(' ').length < max){
s += indentBlank + ' ' + post2[i]+'<br/>';
i++;
}
}
return s;
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var content = div.innerHTML;
if (/<!--\s*more\s*-->/.test(content)) {
div.innerHTML = getSummaryLikeWP(pID);
div.style.display = "block";
}
else {
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
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;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}
}
var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';
div.innerHTML = summary;
div.style.display = "block";
}
}
//]]>
</script>
Again, if you receive an error when saving your changes, use the code from here instead of the one above.
4. Configuring the code above:
In the script above you see some variables (bolded):
var thumbnail_mode= 'no-float';
var classicMode = false;
var summary_noimg = 60;
var summary_img = 50;
var img_thumb_height = 150;
var img_thumb_width = 220;
The thumbnail_mode variable determines whatever or not you want the image to be displayed to the left or the text. If you choose 'no-float', the image will not be displayed and if you choose 'float', the image thumbnail will be displayed on the left side of your posts when on the homepage (not post page).
classicMode sets if the posts should be cut off at the same point or not. It is advisable to change it to 'true' if you selected the 'float' mode for "thumbnail_mode"
summary_noimg and summary_img values are the number of words of the excerpts when your posts have or don't have an image attached. For instance, a value of '50' means "50 words".
img_thumb_height and img_thumb_width - the height and width the image thumbnails should have.
The really new thing with this script is that it works just like Wordpress does which means that you can use the <-- more --> tag to manually enter the post cut off point. Example:
The excerpt. This part of the post will be displayed on the home page. <!-- more --> The rest of the post. This part of the post will only be displayed once the user click on the "Read More" link or the post title.Altough this script is better than the one I mentioned before (using selective posts cut off), it still has one disadvantage: setting it to automatically cut off posts, all of your posts will have an "Read More" link, even if they are shorter than the number of words you set it to cut the posts in your blog.
Don't forget to visit our list of Blogger (blogspot.com) hacks and gadgets.
[Credits: ChicaBlogger]
