Make Show/hide Links for Blog Posts. ~ The Blog Doctor.
Loading...

Make Show/hide Links for Blog Posts.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

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!


15 comments:

Shantanu said...

Hmm... tring to figure out if this is better than the code I am using where I get a Read More... on every post (and not on selected ones). Ideally, I would like Show/Hide only on selected posts and not on all of them.

vin said...

Shantanu,

This hack after installing will show only post titles ( with a expand/collapse link ) of Main Page posts.

Frank Kenna said...

Does this site have a "Search" function? If so, where?

vin said...

Frank,

I have put extensive labels on all posts so search the Label Cloud or use the Search box at bottom of the right column.

Mig said...

Very good tip. With all the tips you have here collected into an ebook you could make some good money, you know? I've tried so much to find a comprehensible book about blogspot. I was unsuccessful. What do you say?

Vin said...

Mig,

Will let you know when I do it. Thanks for the tip.

Santosh said...

some one please help me in implementing this, I tried like hell to do this, but it dint work for me, atleast someone please apply this to simple white template of new blogger and give that xml file.. please please.. can talk to me in yahoo at tsantoo or mail me at tsantoo@yahoo.com

Jescel said...

hi, i tried to follow your instructions, but apparently, failes somehow. All my blogposts became hidden.. how do i make it re-appear? Pls. help. Thanks.

Vin said...

Jescel,

What is the blog address?

guidetotech.com said...

How to show that [+/-]Show/hide this post. only after certain number of characters is there any way

Vin said...

guidetotech.com,

Try Expandable Post Summaries.

kotoni said...

Is it possible to use this only on selected posts? (or even only on 1 post?)

Also, is it possible to have the show/hide function appear not directly after the post title, but at a chosen spot, so that some of the text will show? (I believe you can do that with the Read More... function. However, I would like to use show/hide because I prefer to remain on the main page.)

kotoni said...

Hello,
Is there any way to get the show/hide function to appear only on selected posts? (actually, I would like it only on 1 post)

Also, is it possible for the show/hide not to appear directly after the post title? I would to select a certain amount of text to appear before the show/hide. (I believe you can do this with the Read more... function, however, I would prefer show/hide because I would like to remain on the main page).
Thanks for your help.

Vin said...

kotoni,

If you want it only in one post use this method of Creating spoilers in blog posts.

Coupon Codes said...

Once you've got everything in your template, just save the changes and republish. The new format will automatically be applied to all of your posts, without having to change anything else.

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.