Jul 21, 2009

Adding "Read more..."



1. This tutorial will tell you on how to add a "Read more..." to your post so that your first page of your blog will be shorter and show the headline of your post.

2. There are many versions of "Read more...", where you can change the text to whatever you want such as "Continue Reading", "More on [Post Title]", and in your language as well (Baca selanjutnya).

3. How to add "Read more..."?

Step 1 - Choose Template > Edit Html (Tick Expand Widget Template)

Step 2 - Search for this code:

<p><data:post.body/></p>

Step 3 - Replace with this code:

<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>
<b:if cond='data:blog.pageType != "item"'><br/>
<a expr:href='data:post.url'>Read More</a>
</b:if>
</b:if>

Step 4 - Save it.

Step 5 - For each post, you have to add the following code, but if you want to make it more easier you can copy and paste the code to [Setting > Formatting > Post Template] and save it.

This words will appear before read more.
<span class="fullpost">
This words will appear after read more.
</span>

I recommend you to memorize this code. This will be much easier.

7 comments:

  1. ari tuh ko bagi code yg atas tuh kan??
    tak jadi lak..
    post ak jd double..

    last sekali, ak gune code lain..haha

    ReplyDelete
  2. Yup sy pun copy coding kt atas ni n the same goes with me..post jd double lak..camana ni?

    ReplyDelete
  3. @amiir @HiffZunnuri ikut step 5 btul2. kalau xbleh jugak ym aku. aku rse ok je aku try smpai 3 kali kat 3 blog yg berlainan.

    ReplyDelete
  4. erm..xpe2..klu nk tukar color font leh x??
    ak tukar bg..jd xjelas lak comment tuh..

    ReplyDelete
  5. aku x suke pakai yg ni sebab kene letak additional code dkt post template..
    aku ske pkai yang javascript punyer. lagi layan..
    ushaa google..

    ReplyDelete
  6. ooh.. yg javascript tu dia trace ikut words ek... bg la link untuk dikongsi bersama..

    ReplyDelete
  7. try usha yg ni. sng gk nk buat.

    http://groups.google.com/group/blogger-help/web/expandable-post-summaries-using-javascript

    ReplyDelete

Read, rethink, recomment