SackarpU

Trying another variation to make Blogger read more function has more interesting appearance, today’s blogger tutorial is about Create Read more with button.

Note: to practice the following tutorial, you are suggested to use a trial blog. Read about trial blog here at Create Multiple Blog In One Blogger Account.

Preparing a designed button for read more

What to prepare to Create Read more with button? The first thing is certainly a button designed based on your own creation. The following are samples of Read more button’s design, hopefully to be your inspirations.

Uploading button read more button

The second thing you have to do is upload the read more button into your image hosting, but suggested to upload it directly to blogger.com. Read the tutorial here at How to create Image Gallery using Blogger Post.

Creating HTML code for read more button

The third thing is create the HTML code for the read more button. If you are still confused to create HTML code for an image, please read the tutorial here at Create HTML Code to Display Image on Blog. As an example, please take a look at the below code:

<img alt='more' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6HLXehxY3vlo7qinFIpqGIWiAURvm1lLdnHv0_XfJM6HJbAk2KGmqt7Xw6fWmx65wj7WYR2Q1nJZR9bSJ4piodni_N-WR1YN4MSgFJLjsV3rqAlFi3dnwrq1R86MPC5mQUZyOpxr6NitS/s1600/read-more.png' title='read more'/>

Editing the HTML code of blogger template

The last step is edit blogger template that you are using for your blog. Follow below steps:

1. Please login to blogger with your ID.
2. Click Design.
   
3. Click Edit HTML.
   
4. Please backup your template first by clicking Download Full Template.
   
5. Check the small box next to Expand Widget Templates.
6. Find code ]]></b:skin>
7. Copy and then paste the following code right above the code ]]></b:skin>

   .jump-link a img{
     border:0;
     float:right;
     margin:10px 0;
   }

8. Find the code as below:

   <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

9. Remove the code  <data:post.jumpText/> and then replace with the HTML code of read more button. Example:

   <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><img alt='more' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6HLXehxY3vlo7qinFIpqGIWiAURvm1lLdnHv0_XfJM6HJbAk2KGmqt7Xw6fWmx65wj7WYR2Q1nJZR9bSJ4piodni_N-WR1YN4MSgFJLjsV3rqAlFi3dnwrq1R86MPC5mQUZyOpxr6NitS/s1600/read-more.png' title='read more'/></a>

10. SAVE TEMPLATE.
11. Done.

Additional

Tutorial about Create Read more with button works properly on the templates associated with blogger template standard.
If you previously had made any variation to the read more function, this tutorial could be a bit hard to be applied.