How To Make Read More Button

Many blogs we visit usually have permalink button or permalink word which usually placed at the bottom of the introduction part of an article. This button or word usually written with the phrase such as continue reading or read more. When the visitors click it, they will be redirected to the remaining part of an article. Look at the example below 



Today, I will discuss about how to make the permalink button in our blog.


Disclaimer
Please be informed, this procedures had been done based on my blog template. I SHOULD NOT BE responsible if any harm happen to yours during following my procedures. Please backup your blog template before doing any modification on it.



What You Need

1. The button. Download here. If you want to choose the another design, click here.

Before The Procedures

1. You must keep or hosting the button into the image hosting server. If you need the reference about how to perform this procedure, please click here.
   
   
2. Copy the button’s direct link information. This information will be used together with HTML anchor tag <a href></a>
   
   

The Procedures

1. Login to your blogger dashboard –-> click Design –-> click Edit HTML
   
   
   
   
2. Now you will see the template editor like above. Click the check box Expand Widget Templates to show the sign.
   
   
3. Press to show the Find toolbar like below
   
   
   
   
4. Inside the text box Find, type </head> –-> click Next –-> you will be re-directed to the </head> section inside template editor. See below
   
   
   
   
5. Now, copy the code below (inside the text area) and paste it ABOVE the </head> section. Refer the above picture 
   
   <style> <b:if cond='data:blog.pageType == "item"'> span.fullpost {display:inline;} <b:else/> span.fullpost {display:none;} </b:if> </style>
   
   
6. Again, inside the text box Find, type <div class='post-body entry-content'> –-> you will see below the code is  <data:post.body/> code. 
   
   
   
   
7. Now, copy the code below (inside the text area) and paste it BELOW the code <data:post.body/>. Refer the picture above.
   
   <div><b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url' target='_blank'><img src="http://i1191.photobucket.com/albums/z473/suezain1327/dark-bluish.png" /></a> </b:if></div>
   
   Note:
   Please refer to HTML image tag below : 
    
   
   For your information, the image source <img src> is the button’s direct link information. This information you copied when you performed the step 2 under Before The Procedures section.
   
   
   
8. After you finish perform the step 7, click SAVE TEMPLATE --> click View Blog –-> you will see the result like below
   
   
   
   
9. If you want to switch the button to the right side, create the HTML table and put the code from step 7 into it. Align the table to the right. See the example code below for better understanding. 
   
   
   
   
10. Click SAVE TEMPLATE –-> click View Blog –-> you will see the result like below
    
    
    
    
11. Now, click Settings –-> click Formatting
    
    
    
    
12. Scroll down until you see the words Post Template. The right side of it is the Post Template’s text area.
    
    
    
    
13. Copy the information below (inside the text area) into Post template’s text area.
    
    Here is the beginning of my post. <span class="fullpost">And here is the rest of it.</span>
    
    
14. Click SAVE SETTINGS