Friday, 22 June 2012

Read More option for SharePoint Blog posts.

In my blog site while user reading the posts, users are not Familiar to read long posts and for checking all posts he needs to scrool page continiously.

SharePoint blog does not provide a feature to restrict lines or characters to display the content.

After much researching i found the solution from this blog

To display blog post content in limited size :
  1. Take a backup of blog.xsl file from C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\XSL
  2. Edit the file and go to around line 15, here we will add the JQuery Source code.
  3. Naviage to http://jquery.com/ and copy the JQuery source code from "downlod JQuere"
  4. I have copied http://code.jquery.com/jquery-1.7.2.js source code and pased between CDATA Tags.
<!--<xsl:template match="View[@BaseViewID='0' and List/@TemplateType='301']" mode="full">
<script type="text/javascript">
<![CDATA[
   /*!
   * jQuery JavaScript Library v1.7.2
   * http://jquery.com/
   *
   * Copyright 2011, John Resig
   * Dual licensed under the MIT or GPL Version 2 licenses.
   * http://jquery.org/license
   *
   * Includes Sizzle.js
   * http://sizzlejs.com/
   * Copyright 2011, The Dojo Foundation
   * Released under the MIT, BSD, and GPL Licenses.
   *
   * Date: Wed Mar 21 12:46:34 2012 -0700
   */
   (function( window, undefined ) {
   ..............
   ..........//
   })( window ); ]]>
</script>
<xsl:apply-templates select="." mode="RenderView" />
<xsl:apply-templates mode="footer" select="." />
</xsl:template>
-->
      
CDATA Tag: The term CDATA is used about text data that should not be parsed by the XML parser

--> Next just find the class for  class="ms-PostBody"  and add the below script

<!--<xsl:if test="$ShowBody=1">
<div class="ms-PostBody">
<div>
<xsl:apply-templates select="$Fields[@Name='Body']" mode="PrintField">
<xsl:with-param name="thisNode" select="$thisNode"/>
<xsl:with-param name="Position" select="$Position"/>
</xsl:apply-templates>
<script type="text/javascript">
<![CDATA[
$(".ms-PostBody[rendered!='done'] > div > div").each(function(){
if($(this).text().length > 400) {
text = $(this).text().substring(0, 400);
$(this).html(text + "... " + "<a href='" + $(this).parent().parent().parent().find(".ms-PostTitle a").attr("href") + "'>Read More</a>");
}
}).attr("rendered","done");
]]>
</script>
</div>
</div>
</xsl:if>
--> --> Now upload this blog.xsl file into your sharepoint site style library, After that navigate to default.aspx page,edit the blog post webpart and add the xsl file url into "Miscellaneous" secrion--> XSL Link.

http://sitename/Style%20Library/blog_new.xsl

Once the precess is finished your blog posts will looks like this


No comments:

Post a Comment