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.
