Sharepoint - SharePoint 2013 Add Read more link in Announcement web part each list items

The template file from the article that you mentioned in the question contains some typos and hard-coded parameters like title and list url.

Instead I would recommend you to utilize the template provided below.

Regarding template file, in fact, there are several ways how to apply custom template to List View, and not necessary only via JSLink property. Below is demonstrated probably the easiest way of customizing Announcements.

How to apply changes

1) Open the page where Announcements web part resides in Edit Mode

2) Add Script Editor web part on the page. Then click Edit Snippet in Script Editor web part and embed the following code:

<script>

(function () {

    var viewCtx = {};
    viewCtx.Templates = {};

    viewCtx.Templates.Header = "<table>";
    viewCtx.Templates.Item = AnnouncementItem;
    viewCtx.Templates.Footer = "</table>";

    viewCtx.BaseViewID = 1;
    viewCtx.ListTemplateType = 104;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(viewCtx);

})();

function AnnouncementItem(ctx) {
    return String.format("<tr><td><p><b>{3}</b></p>{1}<a href='{2}/DispForm.aspx?ID={0}'> Read More…</a></td></tr>",
    ctx.CurrentItem.ID,ctx.CurrentItem.Body,ctx.listUrlDir,ctx.CurrentItem.Title);
}

</script>

3)Save the page.

That's it.

Result

enter image description here

Update

function AnnouncementItem(ctx) {
    var headlineLimit = 300;
    var headline = $(ctx.CurrentItem.Body).text(); 
    if (headline.length > headlineLimit)
    {
        headline = headline.substring(0,headlineLimit);
    }
    return String.format("<tr><td><p><b>{3}</b></p>{1}<a href='{2}/DispForm.aspx?ID={0}'> Read More…</a></td></tr>",
    ctx.CurrentItem.ID,headline,ctx.listUrlDir,ctx.CurrentItem.Title);
}

You have to make some correction in your javascript mentioned in first editor. As it work fine in my case.

  1. Copy JavaScript in notepad and make below changes
  2. Replace double quotes “ and ” with normal quotes ".
  3. Replace single quotes ’ with normal single quote '.
  4. Check your list url properly ’/Lists/Announcements / DispForm.aspx?ID = ’ + _announcementID + ’. As remove spaces between them and make it as '/Lists/Announcements/DispForm.aspx?ID ='+announcementID
  5. While uploading JavaScript file in MasterPageGallery as a JavaScript Display template. Assign list id 104 instead of 107.
  6. While giving url in JSLink property in your webpart, copy url first in notepad and replace quotes with normal quotes then apply it.

Be very careful when giving url in JSlink property. In most of cases it doesn't work because of incorrect url. Your url must start with ~site/_catalogs then your javascript file name. Dont' put javascript file in any folder in masterpage gallery. Directly put in masterpage gallery then see the changes.

Your JS file seems ok, put the url in your webpart JSLink property ~site/_catalogs/masterpage/testa.js

It will work like a charm!