Display XML data on your Webpage

Many wordpress developers and also others have a need for this, there are many solution, plugin etc., however these did not suit my requirements and hence the following is my solution using PHP.. ( Note: I am hot linking and using the RSS feed; Hot Linking is not approved by many sites).

<?php
    $data = "";
    // $xml = simplexml_load_file("http://tskamath.pactindia.net/feed/rss2/");
    // $xml = file_get_contents("http://tskamath.pactindia.net/feed/");
    // understand the wordpress default RSS Feed read http://codex.wordpress.org/WordPress_Feeds
    $xml = simplexml_load_file ("http://tskamath.pactindia.net/category/technology/feed");
    // echo $data;
    echo "<h1>List of Blogs</h1>";
        // get the number of items 
        // open the link in your browser http://tskamath.pactindia.net/category/technology/feed
        // understand the xml layout.. in my case <channel><item></item><item></item>...<item></item></channel>
        // get the count of items
    $cnt = $xml->channel->item->count();
    // get the data & perepare the output
    $data .= "<div class='tut'><ul>";
    for ($i = 0; $i < $cnt; $i++) {
        $title = $xml->channel->item[$i]->title;
        $link = $xml->channel->item[$i]->link;
        // ucword converts to title Case; not a perfect converstion but will do for me
        $data .= "<li><a href='$link' target='_blank'>" . ucwords($title) . "</a></li>";
    }
    $data .= "</ul></div>";
    echo $data;
?>

I have also used CSS to Style the Same..

/* for Tut List */

.tut {
 width: 100%;
 /* border-right: 1px solid #000; */
 padding: 0 0 1em 0;
 margin-bottom: 1em;
 font-family: 'Trebuchet MS', 'Lucida Grande',
   Verdana, Lucida, Geneva, Helvetica, 
   Arial, sans-serif;
 /* background-color: #90bade; */
 background-color: #FCFCFC;
 color: #333;
}

.tut ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}
  
.tut li {
  /* border-bottom: 1px solid #90bade; */
  border-bottom: 1px solid #FCFCFC;
  margin: 0;
}

.tut li a {
  display: block;
  padding: 5px 5px 5px 0.5em;
  border-left: 10px solid #A5A5A5;
  border-right: 10px solid #A5A5A5;
  /* background-color: #2175bc; */
  background-color: #8E8E8E;
  color: #fff;
  text-decoration: none;
  width: 100%;
  } html>body 

.tut li a {
  width: auto;
} 

.tut li a:hover {
  border-left: 10px solid #8E8E8E;
  border-right: 10px solid #8E8E8E;
  /* background-color: #2586d7; */
  background-color: #A5A5A5;
  color: #fff;
}