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.