How to display RSS feed using XML Web Part

A good solution to display RSS Feeds using XML Web part, so there was no need for some third-party Web Parts. Also there was no need to write any additional code.

Easy step-by-step guide. 

1. Go to page you need to add the RSS Feed, Open this page in edit view and add new Web Part called XML Web Part. 
    
2. If Web Part is added to page then open it’s settings window. 
    
3. On the field XML Link insert your blog feed URL. Check out if link is correct and content is receivable by clicking the link titled as Test Link. 
    
4. Push button titled as [XSL Editor]. 
    
5. XSL editing window is opened and now insert XSL code given below. When inserted click [OK]. 
    
6. You should see the RSS feed as bulleted list. 
    
7. Save the edited page.

XSL you need is here. Take it using copy and paste.

With the below code, you will get limited items 5 with Published Date in Green color.

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" 

 xmlns:xsl="http://www.w3.org/1999/XSL/Transform" exclude-result-prefixes="xsl"> 
<xsl:output method="xml" omit-xml-declaration="yes" indent="yes"/>
<!--venugopalreddy.india@gmail.com-->

<xsl:template match="/"> 

<div><xsl:apply-templates select="rss/channel"/></div> 

</xsl:template> <xsl:template match="rss/channel"> 

<xsl:variable name="link" select="link"/> 

<xsl:variable name="description" select="description"/> 

<xsl:variable name="pubDate" select="pubDate"/> 

<ul> 

<!--<xsl:apply-templates select="item"/>--><!--For All Items--> 

<xsl:apply-templates select="item[position() &lt;= 5]"/><!--Limit 5 Items--> 

<xsl:apply-templates select="pubDate"/><!-- Published Date of the Items--> 

</ul>

</xsl:template> 

<xsl:template match="item"> 

<xsl:variable name="item_link" select="link"/> 

<xsl:variable name="item_title" select="description"/> 

<xsl:variable name="item_pubDate" select="pubDate"/>

<li> 

<a href="{$item_link}" title="{$item_title}" target="_blank"> 

<b><xsl:value-of select="title"/>&#160;</b> 

<!-- <font color="green"><xsl:value-of select="pubDate"/></font>--><!-- Date and Time --> 

<font color="green"><xsl:value-of select="substring(pubDate,1,16)"/></font> <!-- Date Only --> 

</a>

</li>
<li></li>
</xsl:template> </xsl:stylesheet>

Change the color of a Web Part Column

We need to place the below code in the CEWP in the page where we have the Source Web Part we want to make the column change.

Here is the sample Code: 

 <script type="text/javascript" language="javascript">
  var x = document.getElementsByTagName("TD") // find all of the TDs
  var i=0;
  for (i=0;i<x.length;i++)
  {

    if (x[i].className=="ms-vb2") //find the TDs styled for lists
    {

      //repeat the above for each data value

      if (x[i].innerHTML=="On track")
      {
     // x[i].parentNode.style.backgroundColor='lightblue'; // set the background color of row
        x[i].style.backgroundColor='blue'; // set the background color of cell
        x[i].style.Color='white'; // set font the color
        x[i].style.fontWeight='bold'; // set font to bold
      }

      if (x[i].innerHTML=="Requires attention")
      {
     // x[i].parentNode.style.backgroundColor='orange'; // set the background color of row
        x[i].style.backgroundColor='orange'; // set the background color of cell
        x[i].style.Color='white'; // set font the color
        x[i].style.fontWeight='bold'; // set font to bold
      }

      if (x[i].innerHTML=="Behind schedule")
      {
     // x[i].parentNode.style.backgroundColor='red'; // set the background color of row
        x[i].style.backgroundColor='red'; // set the background color of cell
        x[i].style.Color='white'; // set font the color
        x[i].style.fontWeight='bold'; // set font to bold
      }
    }
  }
</script>

Code Notes:

x[i] is one of the table cells (TD) 
x[i].innerHTML is the contents of a cell (TD) (which may include additional HTML) 
x[i].parentNode is the row containing the cell (a TR) 
x[i].parentNode.style.stylename is used to set any valid style on the TR

How to increase the font size of Web Parts Content

Increase the font size of Web Part Title, Body and colors.

------------------Content Editor Web Part---Title + Body---------------------
<style type="text/css">
.ms-WPTitle {font-size: 16px; font-weight: Bold; color: #354260;}
.ms-summarycustombody a {font-size: 14px;}
</style>

----------------------------Announcement Web Part Title-----------------------
<style type="text/css">
ms-announcementtitle {font-size: 14px; font-weight: bold;}
</style>

---------------------Content Editor Web Part  - Font + Color-------------------
<style type="text/css">
.ms-WPTitle {font-weight: bold; font-family: verdana, arial, helvetica, sans-serif;
color: #003399;
padding-left: 6px;
padding-right: 7px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 8pt;
}

.ms-WPTitle A:link, .ms-WPTitle A:visited
{
color:#003399;
text-decoration:none;
cursor:hand;
}

.ms-WPTitle A:hover
{
color:red;
text-decoration:underline;
cursor:hand;
}

.ms-toolbar {
font-family: verdana;
font-size: .68em;
text-decoration: none;

color: #003399;
</style>
------------------------------------------------------

Add the Above code in the CEWP [Content Editor Web Part].