Creating the "Read More" Button / Creating Post Summaries (For Blogspot/Blogger)

  To squeeze more posts into a page, yet using minimal space to make sure your visitors can see most of your posts in a glance, is very easy to do with the "jump break" function. In this blog tutorial, I will be showing you how to customize the "read more" button to make it more eye-catching, rather than the boring old text.  Let's move on to the steps : 



1) Enable the Jump Break function in Blogger
  
Go to your Blogger 'Design' > Edit HTML and tick "Expand Widget Templates". 
Search (Ctrl + F) for:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url   &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

(If you can't find it, try finding the word "jumplink" and see if it comes out)


2) If you have it, then move on to next step. If you don't...


Add the code I pasted above directly beneath 'post-header-line-1' (find it in your template).




3) Edit the code


After pasting the code, do the following :


1) Change <data:post.jumpText/> with <img border='0' src='YOUR READ MORE BUTTON IMAGE LINK'/>


Replace 'YOUR READ MORE BUTTON IMAGE LINK' with the link to your read more button's link.


For example, my picture's link is:
http://img687.imageshack.us/img687/8092/11largeallblogtools.jpg


So, the code is
<img border='0' src='http://img687.imageshack.us/img687/8092/11largeallblogtools.jpg'/>




4) Preview your blog


  Preview your blog before saving it (Remember to use the JumpBreak function in every post to make this work!). Once you're satisfied, click "save template". You can try out your new button by using the page break function at your post editor's top. 

7 comments:

Nava K said...

thanks for tips but I prefer my readers to write all without the jump.

Wong Zhiwei said...

Thanks for giving me a post idea! :D

JΞMS£Ɲ said...

I may try it out! THX.

JΞMS£Ɲ said...

eh, it can't work...:O

Wong Zhiwei said...

Hmm? Try it again. Maybe you did something wrong in between. I'll help you if it still can't work. :D

Adrian said...

I so need this tips! :) thank you
btw do u know how you can make the blog page load faster? cos most of my friends told me my blog loads extremely slow TT

Wong Zhiwei said...

@Adrian : It's quite simple. Just remove widgets you don't need! For example, I think that blog traffic counter is unnecessary, so you should remove all the widgets related to that.