In a previous post I presented a simple technique to add a Read More option to hide a desired portion of long blog posts. But that method has a drawback because it shows the "Read More" link even for the posts that do not have hidden parts.
Here's an improved version of that technique which shows the Read More link only if you have decided to hide part of a post. [Note that the "Read More" link will be displayed only on the blog home page and archive (i.e. label) pages]
1) Go to Layout -> Edit HTML and click the ‘Expand Widget Templates’ check-box.
2) Locate the </head> tag and copy the code shown in red in the following snippet, above that tag.
]]></b:skin>
<b:if cond='data:blog.pageType == "item"'>
<style>span.fullpost {display:inline;}</style>
<script>function tbgHideReadMores() {}</script>
<b:else/>
<style>span.fullpost {display:none;}</style>
<script>
function tbgHideReadMores() {
var els = document.getElementsByTagName('*');
for (i = 0; i < els.length; i++) {
if ((els[i].className == 'post-body') || (els[i].className == 'post-body entry-content')) {
tbgHideReadMore(els[i])
}
}
}
function tbgHideReadMore(post) {
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].className == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
}
var lnks = post.getElementsByTagName('a');
for (var i = 0; i < lnks.length; i++) {
if ((lnks[i].innerHTML == "Read More") && (found == 0)){
lnks[i].style.display = 'none';
}
}
}
</script>
</b:if>
</head>
<b:if cond='data:blog.pageType == "item"'>
<style>span.fullpost {display:inline;}</style>
<script>function tbgHideReadMores() {}</script>
<b:else/>
<style>span.fullpost {display:none;}</style>
<script>
function tbgHideReadMores() {
var els = document.getElementsByTagName('*');
for (i = 0; i < els.length; i++) {
if ((els[i].className == 'post-body') || (els[i].className == 'post-body entry-content')) {
tbgHideReadMore(els[i])
}
}
}
function tbgHideReadMore(post) {
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].className == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
}
var lnks = post.getElementsByTagName('a');
for (var i = 0; i < lnks.length; i++) {
if ((lnks[i].innerHTML == "Read More") && (found == 0)){
lnks[i].style.display = 'none';
}
}
}
</script>
</b:if>
</head>
3) Locate the <body> tag and modify it as shown below.
<body onload='tbgHideReadMores()'>
4) Locate the <data:post.body/> element and add the code shown in red below.
<div class='post-body entry-content'>
<p><data:post.body/>
<b:if cond='data:blog.pageType != "item"'><br/>
<a expr:href='data:post.url'>Read More</a>
</b:if>
</p>
<p><data:post.body/>
<b:if cond='data:blog.pageType != "item"'><br/>
<a expr:href='data:post.url'>Read More</a>
</b:if>
</p>
5) Then for each post that you want to display a summary, you have to add the following piece of code enclosing the part that you want to hide. (Do this from the Edit Html tab of the post editor)
This is a sample long post. Only these two lines are visible on the homepage.
<span class="fullpost">This sentence, which is enclosed inside the HTML code
shown in red, will be displayed only when a visitor clicks on the Read More
link.</span>
<span class="fullpost">This sentence, which is enclosed inside the HTML code
shown in red, will be displayed only when a visitor clicks on the Read More
link.</span>
Notes:
- Instead of "Read More", if you want some other phrase such as "Continue...", then you have to put that exact string in the places in which "Read More" appears in steps (2) and (4).
- The unnecessary Read More links get hidden only after the page is fully loaded. So you might see them initially, until the home page gets fully loaded in the browser.
22 comments:
Thank you for this info.. But I really cant use it! How do you add this to "Dots Dark" template?
This will work on any default Blogger template. Please follow the steps and see.
Actually I should have edited from the downloadable template! I was editing the text you're given at the online editor.. oops! hehe!
You could do it from the online editor. When you click the 'Expand Widget Templates' check-box, the online editor gets the full template that you see when downloaded. So its no different.
Thanks for the update, ids, but I'm afraid it's the same for me, i.e. it still appears in every post. So, I reverted back to the previous codes.
I have found your site incredibly useful, for which I am eternally grateful. That said, your "Read More" tweak is proving quite a challenge. I simply can't get it to work properly. On my site the most recent post always ends up containing the "Read More" link, even though there "span class="fullpost""..."/span" is nowhere to be seen on the page. To add salt to the wound, adding "span class="fullpost""..."/span" to a page (not the most recent) makes no difference whatsoever. Hmmm.
@ Byron,
Email me with your blog URL where the problem can be seen.
That's easier to follow up.
Many thanks. Will do.
@ "a cLiL to cLiMB" and Byron,
There was a minor mistake in step (2) and I have corrected that. Sorry about that and thanks for giving feedback on the errors.
Hey, I still see the "Read More" on every post. I'm pretty sure I used the corrected code, since you said there was an error in step 2. Any help is appreciated, thanks!
Nevermind, It seems after I updated the template, every post was edited with the fullpost code. I just have to go through the ones I dont want the "Read More" on. Do you know why this happened?
Thanks,
Awesome tutorial.
@ SnNTi
Probably you entered the 'fullpost' thing also in the template. That should go in to individual posts only.
i tried to input the code, but when I preview it I still see "Continue Article . . . " for every post including those ones I have chosen to display at their full length.
quick clarification on that last comment:
when i put in the code verbatim using "Read More" it does in fact work. But if I put in "Continue Article" or "Continue Article . . ." then I have trouble. I tried to simply replace in steps 2 & 4, but it comes up in every post.
nevermind, i fixed it. thanks ids!
I'm wanting to hide the text and use a "read more" not on the main posts. but under the text widget on the left hand side of my page. For instance where it says: "Welcome" I'd like to have a sentence or so and then a "read more." How do I edit html for this?
http://lostriverthroughthebible.blogspot.com/
Thanks,
Lawrence
@ Lawrence,
You can do something like this.
Write a normal blog post with the detail Welcome (or About) message and then back date it. Put a Text widget in the sidebar with a brief of that message and link to the detail post from there.
That's great. Thanks.
Blogger now has improved their editor, and one of the new options is to allow a 'read more' link. In your global settings, you'd need to set 'select post editor' to 'updated editor', then read this: http://www.google.com/support/blogger/bin/answer.py?answer=154172
However, if you're using a 3 column template like I do, you'll see there is a bug. In the continuation page, the right column gets pasted to the middle column, but still readable, though. See here: http://acliltoclimb.blogspot.com/search/label/debate
Great trick dude..Really helps a lot
Technotips
Hi,
Thank you for the tip it works perfectly on mine.
Just a little question though, how can I make my generated link "Read More" bold or change the color? Thx
http://socialmediamanie.blogspot.com/
Post a Comment
Thanks in advance for all your comments and suggestions. They are very much appreciated.
IMPORTANT:
If you have a specific technical question, please email me with a description of the problem and the blog's URL.