"Read More" Button For The Old Blogger Post Editor

As you know, Blogger has finally added the "Read More" functionality for the main page of Blogger Blogs which works just like on Wordpress: by inserting the <!-- more --> tag where you want the "Read more" text to be displayed (if it doesn't work for your template, read here on how to fix it). But the "Insert Read More" button is only available to either the new Blogger post editor which I hate or to Blogger in Draft. So I looked up for a solution to insert this tag through the old Blogger post editor and didn't find any, so I built one myself, through a simple Greasemonkey script.

The script is called "Blogger Insert Read More Button For The Old Editor" and it uses just a few lines of code which add a "Insert 'More'" button at the bottom of your old post editor, which simply inserts the <!-- more --> tag:

To use it, you will be needing Firefox + Greasemonkey.

How To Implement (Fix) The New, Default "Read More" For Your Custom Blogger Template

Like I told you yesterday, Blogger has finally implemented (it took them 10 years) the "Read more" - post summaries on the main page - by default. But if you have a custom Blogger template, this won't be activated for you as there is some code missing from your template and this needs to be fixed manually. If you have an older Blogger hack for achieving this "Read More", don't worry, you can keep the old Blogger hack and still use the new one.

Here is what you need to do to activate (fix) this new Blogger feature for your custom template:

Go to your Blogger Dasboard > Layout > Edit HTML and check the "Expand Widget Templates" box. Then search for something like:

  <p><data:post.body/></p>

Exactly under it, paste the following code:

    <b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>

Here is how it looks in an original blogger template (non-customized) so you can see where exactly you need to implement the code above:

    <div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
<div class='post-footer'>

So you can post it either directly under data:post.body, or under the div wrapping data:post.body, do as you wish :)

You can then customize the text for the "Read more", by going to Layout > and on the "Blog Posts" widget, click on "Edit" and you'll then find the option to change this text.

If you want to style this 'read more', like making it show up to the right instead of left, change it's color or add an image, you can do this with CSS. I will give you the CSS code for my 'read more' which you can use to modify to fit your own blog. So to implement the CSS for this, go to your blog template and paste the following code above the ]]></b:skin> tag:

.jump-link {
display : block;
background : url(http://www.netupd8.com/w8img/5dlzs8.jpg) no-repeat right top;
padding-right : 20px;
text-align : right;
clear : both;
}
.jump-link a {
text-decoration : underline;
font-weight : bold;
}
.jump-link a:hover {
color : #ff0000;
font-weight : bold;
text-decoration : underline;
text-shadow: 2px 2px 2px #BFBFBF;
}

You can see this in action right here, on Web Upd8. I've styled it exactly as the old hack so it looks exactly the same, but if you go to the main page and hoover over the "Read More!" link for this post, you'll notice the URL has a #more at the end, while if hoovering the "Read More!" link on any older post from our blog, this #more won't show up, because those posts use the old, unofficial hack!


Important! When publishing posts using this new, default Blogger method, don't put the

"Read More" Comes To Blogger By Default

One of the most asked for feature in Blogger has always been the "Read more" post splitter - to show just a snippet of your post on your blog's index page. Bloggers have been trying to implement this in lots of different ways (we actually covered quite a few) but now Blogger has finally got this by default (without tweaking the template).

There are a couple of ways to insert a "Read more" jump to your posts. If you use the new post editor (available on Blogger in Draft, or by enabling it via the Settings tab), you'll notice the "Insert jump break" icon in the editor's toolbar. Click this icon and the "jump break" will be inserted into your blog post at your cursor's position.

If you don't use the new post editor, you can still insert a jump break in Edit HTML mode by adding !-- more --> where you want to position the jump break.

You can also edit this "Read more" tex by going to Layout > Edit and edit the Blog Posts widget.

P.s.: we're still using a template hack for the "read more", here, on WebUpd8 and probably won't switch because we got really fond of this nifty Blogger trick :)

Update: Please note that if you are using a custom Blogger template, you need to manually enter the new code so you can use this. We wrote how to fix this, here.

[via blogger buzz]

Automatic Post Summaries for Blogger, With Image Thumbnails

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:

<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&lt;data:post.id/&gt;");</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>

If Blogger displays an error when saving the template, this code instead of the above.

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">
//&lt;![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(/&lt;.*?&gt;/ig, '').split(/\s+/).slice(0,max-1).join(' ')}

function getSummaryLikeWP(id) {
return document.getElementById(id).innerHTML.split(/&lt;!--\s*more\s*--&gt;/)[0];
}

function getSummaryImproved(post,max){
var re = /&lt;.*?&gt;/gi
var re2 = /&lt;br.*?&gt;/gi
var re3 = /(&lt;\/{1}p&gt;)|(&lt;\/{1}div&gt;)/gi
var re4 = /(&lt;style.*?\/{1}style&gt;)|(&lt;script.*?\/{1}script&gt;)|(&lt;table.*?\/{1}table&gt;)|(&lt;form.*?\/{1}form&gt;)|()|()/gi

post = post.replace(re4,'')
post = post.replace(re3,'&lt;br /&gt; ').split(re2)

for(var i=0; i&lt;post.length; i++){
post[i] = post[i].replace(re,'');
}
var post2 = new Array();
for(var i in post) {
//if(post[i]!='' &amp;&amp; post[i]!=' ' &amp;&amp; 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&lt;indent;i++){
indentBlank += " ";
}
if(post2.join('&lt;br/&gt;').split(' ').length &lt; max-1 ){
s = post2.join(indentBlank +' &lt;br/&gt;');
} else {
var i = 0;
while(s.split(' ').length &lt; max){
s += indentBlank + ' ' + post2[i]+'&lt;br/&gt;';
i++;
}
}
return s;
}


function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var content = div.innerHTML;
if (/&lt;!--\s*more\s*--&gt;/.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&gt;=1) {
if(thumbnail_mode == "float") {
imgtag = '&lt;span style="float:left; padding:0px 10px 5px 0px;"&gt;&lt;img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/&gt;&lt;/span&gt;';
summ = summary_img;
} else {
imgtag = '&lt;div style="padding:5px" align="center"&gt;&lt;img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /&gt;&lt;/div&gt;';
summ = summary_img;
}
}

var summary = (classicMode) ? imgtag + '&lt;div&gt;' + stripHtmlTags(content,summ) + '&lt;/div&gt;' : imgtag + '&lt;div&gt;' + getSummaryImproved(content,summ) + '&lt;/div&gt;';

div.innerHTML = summary;
div.style.display = "block";
}
}
//]]&gt;
</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]