Sep 30, 2011

Tutorial untuk buat Read More Button

Blogger has supported Read more function - To complete the 10th anniversary gifts, now blogger has added one awaited button by thousands bloggers all around the world, it is "Jump Break" button or "More" button or "Read more" button that has function to cut off the article on homepage or known as "read more function".

jump break button
It means, to cut off the long article on the homepage to be shorter, you only need to click the button " Jump break " and you do not need to be on the go to type the read more code from any hack.
However, it seems that this button only appears on the new post editor and in the mode "Compose", and does not appear in the mode "Edit HTML". Even though, you cans till use the “ read more function " at old post editor as well as in the mode “"Edit HTML" by typing manually the code:      <!-- more -->
more
If you use the original template from blogger, you can directly enjoy the feature and the result will appear the text “ Read more » “ like this:
read more
If you do not use the original template from blogger, for instance, you download it from another site, the "Read more function" will still function very well. In other words, your articles will be cut off, but the wordsRead more »" will not appear. For this case, you have to add the additional code to your template. The following are the steps:

  1. Please log in to Blogger with your ID
  2. Click Layout.
  3. Click Edit HTML tab
  4. Check the small box next to " Expand Widget Template " Expand Widget Template-
  5. Find the code like:
    <div class='post-body entry-content'>
          <data:post.body/>
          <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>
  6. Copy and paste the code below exactly below the above code:
    <b:if cond='data:post.hasJumpLink'>
          <div class='jump-link'>
            <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 
          </div>
        </b:if>

    code
  7. Click SAVE TEMPALTE button
  8. Done
With that way, the words “Read more »" will appear although you don’t use the original template from blogger.


By default, the words to be displayed is “Read more »”, but you can change as you want. Here is the way:

  1. Please log in to blogger with your ID
  2. Click Layout.
  3. Click Page Elements tab
  4. Click "Edit" on "Blog posts" Element Blog posts element
  5. After new window appears, change the words “Read more” with your own words. edit read more
  6. Click SAVE button
  7. Done
If you use the trick to make “Read more function" as Kang Rohman has posted here, you had better remove it because now blogger has made it for you. To do that, you can read that trick in reverse from down to up. Hope you all can do this...

2 comments:

  1. Terbaik. tapi, lau guna wordpress, tak yah edit pape lagi, just klik sahaja. Teruskan kongsi sesuatu.

    ReplyDelete
  2. hye..nice blog.. dah folo awk.. jom singgah blog kita.. www.duniasigadisberseliparhijau.blogspot.com

    ReplyDelete

LinkWithin

Related Posts Plugin for WordPress, Blogger...