How to create Expandable post

With this trick, you can choose to display an arbitrary amount of text from the beginning of each post, as a teaser for the whole thing. Then users who want to read the rest of the post can click a link to see the full text. This is handy if you have lots of long articles all on one page.

How to Apply:
============

1. Find the

</head>

Add all the following code before it.


<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 < 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 < 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 < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>

2. Find <data:post.body/> and add the portion of following code in bold.


<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 rest of the post>></a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>


<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

3. Goto Settings->Formatting and at the bottom, you will find the text box provided to specify the "Post template". Copy/paste these lines into that text box and save the settings.


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


If you create a new post now, it shows you clearly where to type the summary and where to add the rest of the post. Please note that you could also divide some or all of your old posts into summary and full post by editing them. The "Read more" link will appear only for the posts that have been divided like this.

Note 1: If you are not able to find the lines to change, you may not have expanded the template. Select the checkbox named "Expand Widget Templates", which is right above the template code, to expand it into more code.
Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

Related Posts

15 comments: on "How to create Expandable post"

Dark_Gal said...

Thanx a lot for this..

will try it.

see mine.


www.dark-gal.blogspot.com

tanuj lakhina said...

I don't get what you mean by expand post?

Dan* said...

With this trick, you can choose to display an arbitrary amount of text from the beginning of each post, as a teaser for the whole thing. Then users who want to read the rest of the post can click a link to see the full text. This is handy if you have lots of long articles all on one page

tanuj lakhina said...

Oh ok.Sounds great but I don't think its working on your blog either.. :S

Dan* said...

its working dont u see only half of the post click rest of the post below to view the full post :P

tanuj lakhina said...

Go to homepage and then click on that button and its an error javascript code.Maybe someone else can check too.

Dan* said...

ok thankyou for telling .............. i fixed it its working now !!!

vatsal said...

wow! i have been wondering how people do that...for quite some time now...

thanks a lot man

although i m an art blogger...so this info wont help me bloggin but yes thats some nice peice of information

awesome work with gadgets dude..
keep it up just ping me if u get somethin for my art blog.

rinzu said...

informative...!!!

gud going...!!!
illiterate poeple like me need all thsi information...
thanks...

:-)

arjun said...

Sounds Gr8......

arjun said...

Never really knew abt this..
Thanks

Gagan said...

Tnx bhai !! But I think blogger will provide this option in default in future !!

Arjun said...

Please bro see its orignal xml http://www.eblogtemplates.com/langit-blogger/ here & tell me the trick bor both things to creating expandable post & for max results defined in label tab

Arjun said...

Oh! I Have done it Dan, for creating expandable post, & thats going good, but as i am too much into problems all time, so its been new one 4 you, the time when i paste the same disable copy paste code, then we are unable to type the email address into email subscription button, & in your even disable is working & even anyone can write email address or anything in feedburner subscription, so Dude do help me out again.

Thank you very very much

Dan* said...

You have to use the right click instead of left click button to give your email address .

Post a Comment