How To Make Read More Button

Thursday, August 18, 2011

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 

Capture

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 Capture button. Download here. If you want to choose the another design, click here.



Before The Procedures

  1. You must keep or hosting the Capture button into the image hosting server. If you need the reference about how to perform this procedure, please click here.

  2. Copy the Capture button’s direct link information. This information will be used together with HTML anchor tag <a href></a>

    Capture



The Procedures

  1. Login to your blogger dashboard –-> click Design –-> click Edit HTML

    Capture

  2. Now you will see the template editor like above. Click the check box Expand Widget Templates to show the right sign sign.

  3. Press Capture to show the Find toolbar like below

    Capture

  4. Inside the text box Find, type </head> –-> click Next –-> you will be re-directed to the </head> section inside template editor. See below

    Capture

  5. Now, copy the code below (inside the text area) and paste it ABOVE the </head> section. Refer the above picture 



  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. 

    Capture

  7. Now, copy the code below (inside the text area) and paste it BELOW the code <data:post.body/>. Refer the picture above.



    Note:
    Please refer to HTML image tag below
     
    Capture
    For your information, the image source <img src> is the Capture 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

    Capture

  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

    Capture

  10. Click SAVE TEMPLATE –-> click View Blog –-> you will see the result like below

    Capture

  11. Now, click Settings –-> click Formatting

    Capture

  12. Scroll down until you see the words Post Template. The right side of it is the Post Template’s text area.

    Capture

  13. Copy the information below (inside the text area) into Post template’s text area.



  14. Click SAVE SETTINGS

3 comments:

{ Khairul Bakhtiar } at: August 24, 2011 at 12:00 AM said...

Thanks bro. Like this idea. Looking forward to implement it in my blog. Feel free to browse mine.

Regards,
Www.usahawansme.com

{ Zainal } at: August 24, 2011 at 12:10 AM said...

welcome khairul...:)

the advantages of read more button...besides it can make your blog look neat...it also can increase your page views...:)

{ BlogS of Hariyanto } at: August 24, 2011 at 8:07 AM said...

nice post :)

Post a Comment

Related Posts Plugin for WordPress, Blogger...