Add "Read more" Link under your Blogger Post

Posted by Alex on Tuesday, January 22, 2008

It really makes sense if your posts are too long and you would like to shorten it. From the reader's  point of view, they would feel more comfortable to read your blog if you shorten your post and provide a "Read more..." link under each post . However, Blogger with default does not provide a way to shorten your post.  But now we can do it by using this blogger hack provided by Ramani.


STEP 1
Goto Template -> Edit HTML, tick the "Expand Widget Template"
(Note: Please remember to backup your template!)


STEP 2
Find this tag


</head>


STEP 3
Copy the following code and paste it before </head> <b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>


STEP 4
Find this div for the post-body and add the portion of code in red color.


<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


STEP 5
Goto Settings -> Formatting , Copy and paste these lines into "Post Template" text box and save the settings.


Type your summary here
<span id="fullpost">
Type rest of the post here
</span>


save




Related Posts


10 comments:

Paulo said...
12:15 PM
 

Is there any way to customize the place where the link "Read More" should appear?

It gets glued at the line of the footer... I have tried to put a "br" code after de code for the link but blogger don't accept it...

Hey, Paulo!
I'm so sorry for the late reply.
(Just came back from travel..)

Have you solve your problem already?
Anyway, for your question, you can customize the place of "Read more" link by placing the <span id="fullpost"> where you want the link appear.

Have I answered your question?

im using sand dollar template
i've tried the steps but it doesnt seems working.. nothing happens

oh, in my template there's only post body entry content is it any different with post body?

hmm any clue on what happen?
thanks

Hi Irma,

Your code is no problem, but i think you should be forgot to put
<span id="fullpost"> </span>
tag on your post.
Actually, You need manually add this tag to the post you wish to show the "Read more" link.

Hope this tip will help you :)

it works. you right, i have to put the span tag manually. i've tried it to my older post.

thanks :)

You can include that span code in post Template. Also I cannot implement this has the code changed now?

Hi, I have change those code but it doesn't work. What shud I do next?

Thanks, I didn't have post-body code so I just found post.body code and included div class='post-body' part of the code.

By the way, how do you display other people's avatars in comments?

Hi, Jeanneatte ;)
I think your problem is similar with irma. After you have changed the code,
your posts won't be changed automatically. However, you need to put <span id="fullpost"> </span> tag on your post manually.
For furture information, you can refer irma's comments.

Hope this tip will help you.

Hi, David Bergeron ;)
To show avatars in your comments, you can go to your dashboard, Settings->Comments, then tick yes from "Show profile images on comments?" setting.

btw, your poker blog look very interesting.

Hope this tip will help you.