Creating Teaser Intros for Blog Posts

One thing I have been wanting to do with blog posts is create teaser intros, show x amt of characters of the post followed by a link to read the rest of the post. Sadly, SP does not provide this functionality out of the box. So I Googled the problem and found a site with the solution. The problem is the solution is hard to understand and my eyes glazed over trying to understand what the author was asking me specifically to do. I eventually got the fix to work, and decided that I probably wasn’t the only person who didn’t speak code who might need this solution, so I decided to paraphrase the authors fix in designer-ese… I take ZERO credit for the fix, please visit the author below for the original post:

Original fix/code:

Step 1: Open SP Designer
Step 2: Open Blog site in Designer
Step 3: Open default.aspx
Step 4: Click at the very top of the List View Web Part for the posts and then right-click. Select Convert to XSLT Data View:

Step 5: Go into code view and do a find for: ms-postbody. It should bring you to the area of code that you need to swap out. Below is the code that needs to be replaced:
Replace this code...

Replace with this:
with this code...

(aside: I am trying in vain to upload a file that allows you to copy and paste the code, but the crappy WordPress interface wont do it! Can’t add code to the page or the stupid thing tries to execute it, even in code tags! Stupid app!)

The 250 in the last xsl: value snippet is the number of characters of text that is displayed-this number can be whatever you want. You can also change what the “more” link says, maybe to “Read Post” or whatever.

Step 6: Add new xsl template. Add the code below to the top of the page under an existing xsl:template snippet:

Now save and open the page in your browser.


2 thoughts on “Creating Teaser Intros for Blog Posts

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s