Expandable posts

It is very tiring and irritating to read through the entire posts on a blog before you reach the particular matter you are lookin for.Faced with similar prob..i chanced upon Hackosphere.His blog helped me a great deal in customising my blogs (Horizon ,MyTamil blog,& the one you are reading now) in the manner you now see it.

Step 0:

Download and save your template so that you can go back to it if there is any problem .
——————————————– Click Readmore or Click Here

Step 1:
Find the </head>tag in your template and add this line before it
<script type=’text/javascript’
src=’http://www.anniyalogam.com/widgets/hackosphere.js’ />

Step 2:
Find this includable called “post” and make the changes highlighted in red so that the final result looks EXACTLY like this. .

<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-” + “<data:post.id/>”);
</script>
</b:if>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

Step 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

I have copy-pasted these instructions from hackosphere.This works fine for me in all my blogs.Hope you too get to enjoy this feature

11 Replies to “Expandable posts”

  1. Deepa – thanks for sharing this info. I am experimenting with this code, and may add it to my blog template. It seems to work, however, I am having an issue with the font size dropping to “0” in the posed blog entry. This seems to happen when I copy and paste text into my post. I will work on this issue, and then make this template change part of my standard format.

    Thanks again
    Random Walker
    http://thatscoolweb.blogspot.com/

  2. Welcome Walker
    hi..your name reminds me of the comic strip “Phantom of the jungle”:-)

    Dont forget to SAVE and backup your template.This hack requres that you take time and do each line very carefully… coz even a / or ; might lead to problems

    Yes.. i am familiar with fontsizes dropping to zero.. this also happens to me by default of i start drafting my posts from the “compose” mode.I normally write my posts in notepad and copy to the WSIWG editor.
    then i figured out that if i copy paste the entire text in edithtml page and SAVE-as draft and then edit again in WSISYG editor this is not happening..
    More overe while using expandable posts.. i 1st publish the entire text & see and then only move the <dspan class=”fullpost”> to the position whre i want the post matter to be truncated.
    So good luck
    Deepa

  3. Feeling like a klutz here… my template HTML does not have the exact language as indicated on your patch… what should I do: it’s Rounders 3 template.

  4. Hi Genius..
    I am not able to understnd u r problem..i saw ut blog “Eye on Miami” and it so seems that un are using the new-blogger template (and not the classic template) so technically you must be able to locate the lines indicated.. 😕

    I once again suggest taht u go to Template-edit html-expand widgets – copy paste the template in a notepad and use Ctrl+F to look for

    <b:includable id=’post’ var=’post’>
    &;t;div class=’post uncustomized-post-template’


    If you are still not able to find this.. pls mail me u r template so that i can have a closer look :-B

  5. iEn
    Welcome..
    To have an icon near the “Read more”..link ( if you are using the text – READMORE..)
    upload the ico file to a common server like googlepages / geocities
    After uploading right clik – properties and copy the url of the ico file

    template – edit HTML – Expand widgets template.. and search for “Read more” (or the text u r displaying in u rblog)
    add < img src=’URL of the ico file’/>

    Similarly u can do for the text that says “Summary” ( or whatever text u r using)

    hope this helps

  6. i did it but got an error

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type “img” must be terminated by the matching end-tag “”.

    🙁

  7. Deepa, I’m having one problem with this. The “Read More…” link appears at the end of every post. I’d like it to appear only for the posts that are long enough to justify a split. I did follow your instructions for the post template but the “Read More…” link does not go away.

    Also, is there a way to set this up for future postings without affecting existing posts?

    Thanks,
    David

  8. David
    Welcome..
    If you donot want the “Readmore” to appear for certain posts.. there is only one thing to do..

    Since you have already made modification in the post template.. every time u make a new post.. you must be seeing the foll already added to your post in post – edit html
    Type your summary here
    <span id=”fullpost”>
    Type rest of the post here
    </span>

    just delete the above and continue with your post conent… you will not see a READ MORE

    More overe while using expandable posts.. i publish the entire text ( written above the
    Type your summary here
    <span id=”fullpost”>
    Type rest of the post here
    </span>
    tags ) & see the page in the browser.. and then only move the <span class=”fullpost”> to the position whre i want the post matter to be truncated.
    So good luck
    Deepa

  9. Ahh, much better. Actually, I must have done something slightly wrong the first time around. In any case, it’s working now. Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *