How to Create Expandable Post

Wednesday, December 03, 2008

expandable post

Expandable Post means when you create long article post which forcing your reader to scroll all the way down to read the entire of your blog post, then this hacks could save more of the loading time and save their time also from only reading the summary. For those who always used to write short story, this tweaking tips doesn't really a necessity, but it will help for those who love to make a long articles. Hackospehere has the ideas for implementing this hacks.

1. Go to your Dashboard Layout, click on Edit HTML, check the Expand codes templates and find the , Place this code above 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 the includable called 'post' and copy/paste the changes highlighted in red

[b:includable id='post' var='post'>
[div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
  [a expr:name='data:post.id'/>
  [b:if cond='data:post.title'>
    [h3 class='post-title'>
    [b:if cond='data:post.url'>
      [a expr:href='data:post.url'>[data:post.title/>[/a>
    [b:else/>
      [data:post.title/>
    [/b:if>
    [/h3>
  [/b:if>

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

 [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 href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...[/a>[/p>
      [/span>
      [span id='hidelink' style='display:none'>
        [p>[a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...[/a>[/p>
      [/span>
      [script type='text/javascript'>
        checkFull("post-" + "");
      [/script>
   [/b:if>

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

3. Go to Settings > Formatting and at the bottom, you will find "Post template" text box. Copy and paste these lines in to that text box and save the settings.

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

And in case you're facing any problem regarding this hack (like bandwidth exceeded or whatsoever), then try to replace the Expandable head JS file with this one: http://h1.ripway.com/Diablo888/expandable%20head.js Also please consider to replace the one in red highlight at my MS Word document.

Note - I'm uploading this JS and MS word file in case if their site went down for several reason

Attention! To make the works, please replace [ with <