Make Show/hide Links for Blog Posts.

Expandable Post Summaries is a method by which you can display only a summary or a 'teaser' of your blog posts on the Main Page. Then if viewers want to read further they click a 'Read More' link to open the full post in another window. This hack enables you to display more posts on the Main Page without making it very long and slow to load. Viewers get a bird's eye view of all the posts on the Main Page and then can select which post to read further.


Another hack which works in a similar fashion is the Show/Hide Blog Posts links on the Main Page. The Blogger Help Center page ( See RELATED ARTICLE link at bottom of this post ) describes how you can implement this in the Classic Template. This hack shows only the titles of your posts on the Main Page followed by a Javascript link which when clicked reveals the whole post. Have a look at the demo blog.


This is how your blog will look after implementing the hack :


Since it was available for Classic templates only I thought of applying it to the Layout template. However, there was no need to reinvent the wheel! Hackosphere has done it already so I just had to tweak the code a bit.............

FIRST BACKUP TEMPLATE

First login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. Click on the 'Download Full Template' link and save the template backup file to your PC. Now you are safe as you can always reload this backup if any problem occurs.

ADD THE JAVASCRIPT CODE

Now scroll down it Template code box and copy and paste the Javascript code below between </head> and the ]]></b:skin> tags. These tags will be found at the bottom of the CSS part of the template. The Javascript code is as follows :

<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
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 < spans.length; i++) {
if (spans[i].id == "fullpost")
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 < spans.length; i++) {
if (spans[i].id == "fullpost")
found = 1;
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>

Save Template.

MODIFYING BLOG POSTS CODE

The next step is to modify the code in the Blog Posts widget. For this on the Edit Html subtab of Template tab put a check in Expand Widgets Template check box on top of the Template code box. This will show the full code for the Blog posts widget. Scroll down to this code line in the Blog Posts :


<div class='post-header-line-1'/>

and paste in the code lines immediately below it :

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

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

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Collapse...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

CODE FOR THE INCLUDABLE

Now we have to add the code for the Peekaboo Posts includable from Hackosphere.
Scroll down in the expanded widgets to find this line of code :

<b:includable id='feedLinksBody' var='links'>

Add the code below IMMEDIATELY ABOVE the above feedLinksBody code line :

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='340px'>
<a expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"' href='javascript:void(0)' style='text-decoration:none' title='Expand/collapse this post'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>

Save Template.

INCLUDE THE INCLUDABLE IN THE POSTS WIDGET

Uptil now an includable "Peekaboo Posts" has been created and the Javascript code to show it when the Javascript link is clicked is in place. Now we have to put this in the main includable. For this again expand the widgets template and scroll down to the Main Includable code in the blog posts widget. Change the last (red) line in this code :

<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

CHANGE RED LINE TO :

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Save Template. In this last part the code instructs to use the Peekaboo Posts includable on the Main Page with the use of conditional tags.

Clear Cache and View Blog. Enjoy!