Danzy World*

Great site for Computer and Internet Tricks with Entertainment FUN !

Sponsor

Propellerads

Jun 14, 2008

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.

15 comments:

  1. Thanx a lot for this..

    will try it.

    see mine.


    www.dark-gal.blogspot.com

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

    ReplyDelete
  3. 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

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

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

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

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

    ReplyDelete
  8. 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.

    ReplyDelete
  9. informative...!!!

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

    :-)

    ReplyDelete
  10. Never really knew abt this..
    Thanks

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

    ReplyDelete
  12. 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

    ReplyDelete
  13. 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

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

    ReplyDelete

Adbox