title: How to display Blog Post Snippets on blog time-line and home page etc
body: <p>I recently purchased a responsive website template and I am pretty confused as to how my blog posts would automatically show blog post snippets(intro) on my blog timeline and homepage. I am using Umbraco cms (6.1.5) and this is my blog post html code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if IE 8 ]&gt;&lt;html lang="en" class="isie ie8 oldie no-js"&gt;&lt;![endif]--&gt;
  &lt;!--[if IE 9 ]&gt;&lt;html lang="en" class="isie ie9 no-js"&gt;&lt;![endif]--&gt;
  &lt;!--[if (gt IE 9)|!(IE)]&gt;&lt;!--&gt;
  &lt;html lang="en" class="no-js"&gt;
  &lt;!--&lt;![endif]--&gt;
  &lt;head&gt;
  &lt;!-- Meta Tags --&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;meta name="description" content="&lt;umbraco:Item field="postMetaDescription" runat="server" /&gt;"&gt;
  &lt;!-- Title --&gt;
  &lt;title&gt;&lt;umbraco:Item field="postTitle" runat="server" /&gt;&lt;/title&gt;
  &lt;!-- Favicon --&gt;
  &lt;link rel="shortcut icon" href="img/favicon.jpg" type="image/x-icon"/&gt;
  &lt;!-- Google Fonts --&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,700' rel='stylesheet' type='text/css'&gt;
  &lt;!-- Stylesheets --&gt;
  &lt;link rel='stylesheet' id='twitter-bootstrap-css' href='css/bootstrap.min.css' type='text/css' media='all'/&gt;
  &lt;link rel='stylesheet' id='fontello-css' href='css/fontello.css' type='text/css' media='all'/&gt;
  &lt;link rel='stylesheet' id='prettyphoto-css-css' href='js/prettyphoto/css/prettyPhoto.css' type='text/css' media='all'/&gt;
  &lt;link rel='stylesheet' id='animation-css' href='css/animation.css' type='text/css' media='all'/&gt;
  &lt;link rel='stylesheet' id='perfectscrollbar-css' href='css/perfect-scrollbar-0.4.10.min.css' type='text/css' media='all'/&gt;
  &lt;link rel='stylesheet' id='jquery-validity-css' href='css/jquery.validity.css' type='text/css' media='all'/&gt;
  &lt;link rel='stylesheet' id='jquery-ui-css' href='css/jquery-ui.min.css' type='text/css' media='all'/&gt;
  &lt;link rel='stylesheet' id='style-css' href='css/style.css' type='text/css' media='all'/&gt;
  &lt;link rel='stylesheet' id='mobilenav-css' href='css/mobilenav.css' type='text/css' media="screen and (max-width: 838px)"/&gt;
  &lt;!-- jQuery --&gt;
  &lt;script src="scripts/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;!--[if lt IE 9]&gt;
              &lt;script&gt;
                  document.createElement("header");
                  document.createElement("nav");
                  document.createElement("section");
                  document.createElement("article");
                  document.createElement("aside");
                  document.createElement("footer");
                  document.createElement("hgroup");
              &lt;/script&gt;
          &lt;![endif]--&gt;
  &lt;!--[if lt IE 9]&gt;
              &lt;script src="scripts/html5.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
  &lt;!--[if lt IE 7]&gt;
              &lt;script src="scripts/icomoon.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
  &lt;!--[if lt IE 9]&gt;
              &lt;link href="css/ie.css" rel="stylesheet"&gt;
          &lt;![endif]--&gt;
  &lt;!--[if lt IE 9]&gt;
              &lt;script src="scripts/jquery.placeholder.js"&gt;&lt;/script&gt;
              &lt;script src="scripts/script_ie.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body class="w1170 headerstyle1"&gt;
  &lt;!-- Marine Content Wrapper --&gt;
  &lt;body class="w1170 headerstyle1"&gt;
  &lt;!-- Marine Content Wrapper --&gt;
  &lt;div id="marine-content-wrapper"&gt;
   &lt;header id="header" class="style6"&gt;
  &lt;div id="upper-header"&gt;
   &lt;div class="container"&gt;
    &lt;div class="row"&gt;
     &lt;div class="col-lg-12 col-md-12 col-sm-12"&gt;
      &lt;div class="item left hidden-separator"&gt;
       &lt;ul id="menu-shop-header" class="menu"&gt;
        
        
       &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="item right hidden-separator"&gt;
       
        
        &lt;div class="shopping-cart-dropdown"&gt;
        &lt;div class="cart-menu-item "&gt;
         &lt;div class="sc-header"&gt;
         &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Main Header --&gt;
  &lt;div id="main-header"&gt;
   &lt;div class="container"&gt;
    &lt;div class="row"&gt;
     &lt;!-- Logo --&gt;
     &lt;div class="col-lg-4 col-md-4 col-sm-4 logo"&gt;
      &lt;a href="index.html" title="Marine" rel="home"&gt;&lt;img class="logo" src="img/marine-logo.png" alt="Marine"&gt;&lt;/a&gt;
      &lt;div id="main-nav-button"&gt;
       &lt;span&gt;&lt;/span&gt;
       &lt;span&gt;&lt;/span&gt;
       &lt;span&gt;&lt;/span&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="col-sm-8 align-right"&gt;
      &lt;!-- Text List --&gt;
      &lt;ul class="text-list"&gt;
       &lt;li&gt;Call Us: +1 800 450 17 08&lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- Social Media --&gt;
      &lt;ul class="social-media"&gt;
       &lt;li&gt;&lt;a target="_blank" href="http://facebook.com"&gt;&lt;i class="icon-facebook"&gt;&lt;/i&gt;&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;&lt;a target="_blank" href="http://twiiter.com/google"&gt;&lt;i class="icon-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;&lt;a target="_blank" href="http://google.com"&gt;&lt;i class="icon-google"&gt;&lt;/i&gt;&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;&lt;a target="_blank" href="http://linkedin.com"&gt;&lt;i class="icon-linkedin"&gt;&lt;/i&gt;&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;&lt;a target="_blank" href="http://instagram.com"&gt;&lt;i class="icon-instagram"&gt;&lt;/i&gt;&lt;/a&gt;
       &lt;/li&gt;
      &lt;/ul&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /Main Header --&gt;
  &lt;!-- Lower Header --&gt;
  &lt;div id="lower-header"&gt;
   &lt;div class="container"&gt;
    &lt;div class="row"&gt;
     &lt;div class="col-lg-12 col-md-12 col-sm-12"&gt;
      &lt;div class="lower-logo"&gt;
       &lt;a href="index.html" title="Marine" rel="home"&gt;&lt;img class="logo" src="img/marine-logo.png" alt="Marine"&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;!-- Main Navigation --&gt;
      &lt;ul id="main-nav"&gt;
      &lt;ul class='mainMenu'&gt;
        &lt;li&gt;&lt;a href='http://www.redflyseo.co.za' title='Home'&gt;HOME&lt;/a&gt;&lt;/li&gt;
        &amp;nbsp|&amp;nbsp
        &lt;li&gt;&lt;a href='http://www.redflyseo.co.za/seo' title='SEO'&gt;SEO&lt;/a&gt;&lt;/li&gt;
        &amp;nbsp|&amp;nbsp
        &lt;li&gt;&lt;a href='http://www.redflyseo.co.za/social-media' title='SOCIAL MEDIA'&gt;SOCIAL MEDIA&lt;/a&gt;&lt;/li&gt;
        &amp;nbsp|&amp;nbsp
        &lt;li&gt;&lt;a href='http://www.redflyseo.co.za/content-marketing' title='CONTENT MARKETING'&gt;CONTENT MARKETING&lt;/a&gt;&lt;/li&gt;
        &amp;nbsp|&amp;nbsp
        &lt;li&gt;&lt;a href='http://www.redflyseo.co.za/digital-audits' title='DIGITAL AUDITS'&gt;DIGITAL AUDITS&lt;/a&gt;&lt;/li&gt;
        &amp;nbsp|&amp;nbsp
        &lt;li&gt;&lt;a href='http://www.redflyseo.co.za/sme-business-package' title='SME BUSINESS PACKAGE'&gt;SME BUSINESS PACKAGE&lt;/a&gt;&lt;/li&gt;
        &amp;nbsp|&amp;nbsp
        &lt;li&gt;&lt;a href='http://www.redflyseo.co.za/blog' title='BLOG'&gt;BLOG&lt;/a&gt;&lt;/li&gt;
        &amp;nbsp|&amp;nbsp
        &lt;li&gt;&lt;a href='http://www.redflyseo.co.za/contact-us' title='Contact Us'&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;!-- /Main Navigation --&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /Lower Header --&gt;
  &lt;script type="text/javascript"&gt;
  //&lt;![CDATA[
    (function() {
      var shr = document.createElement('script');
      shr.setAttribute('data-cfasync', 'false');
      shr.src = '//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js';
      shr.type = 'text/javascript'; shr.async = 'true';
      shr.onload = shr.onreadystatechange = function() {
        var rs = this.readyState;
        if (rs &amp;&amp; rs != 'complete' &amp;&amp; rs != 'loaded') return;
        var site_id = '4703ccf47ac9b99588c7a6fb9d1b4ce2';
        try { Shareaholic.init(site_id); } catch (e) {}
      };
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(shr, s);
    })();
  //]]&gt;
  &lt;/script&gt;
  &lt;/header&gt;
   &lt;!-- /Header --&gt;
   &lt;!-- Marine Content Inner --&gt;
   &lt;div id="marine-content-inner"&gt;
   &lt;!-- Main Content --&gt;
   &lt;section id="main-content"&gt;
   &lt;!-- Container --&gt;
   &lt;div class="container"&gt;
    &lt;!-- Container --&gt;
    &lt;div class="container"&gt;
    &lt;div class="page-heading style3 wrapper border-bottom "&gt;
     &lt;div class="row"&gt;
      &lt;div class="col-lg-6 col-md-6 col-sm-6"&gt;
       &lt;h1&gt;&lt;umbraco:Item field="blogPostTitle" runat="server" /&gt;&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-6 col-md-6 col-sm-6"&gt;
       &lt;p class="breadcrumbs" xmlns:v=""&gt;&lt;span typeof="v:Breadcrumb"&gt;&lt;a rel="v:url" property="v:title" href="http://www.redflyseo.co.za"&gt;Home&lt;/a&gt;&lt;/span&gt;&lt;span class="delimiter"&gt;|&lt;/span&gt; &lt;span typeof="v:Breadcrumb"&gt;&lt;a rel="v:url" property="v:title" href="#"&gt;Blog&lt;/a&gt;&lt;/span&gt;&lt;span class="delimiter"&gt;|&lt;/span&gt; &lt;span class="current"&gt;&lt;umbraco:Item field="pageName" runat="server" /&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
     &lt;section class="main-content col-lg-9 col-md-8 col-sm-8 small-padding"&gt;
     &lt;div class="row"&gt;
      &lt;div id="post-items"&gt;
       &lt;!-- Post Item --&gt;
       &lt;div class="post blog-post blog-post-classic col-lg-12 col-md-12 col-sm-12 margin-top20"&gt;
        &lt;div class="blog-post-list"&gt;
         &lt;div class="blog-post-meta"&gt;
          &lt;span class="post-date"&gt;
          &lt;span class="post-day"&gt;&lt;umbraco:Item field="day" runat="server" /&gt;&lt;/span&gt;&lt;br/&gt;
          &lt;umbraco:Item field="monthYear" runat="server" /&gt; &lt;/span&gt;
          &lt;span class="post-format"&gt;
          &lt;span class="photo-icon"&gt;&lt;/span&gt;
          &lt;/span&gt;
          &lt;img alt='' src='&lt;umbraco:Item field="authorPhoto" runat="server" /&gt;' class='avatar'/&gt;
          &lt;span class="author"&gt;&lt;umbraco:Item field="writerName" runat="server" /&gt;&lt;/span&gt;
         &lt;/div&gt;
         &lt;div class="blog-post-content"&gt;
          &lt;!-- Post Image --&gt;
          &lt;div class="post-thumbnail"&gt;
           &lt;img src="&lt;umbraco:Item field="blogPhoto" runat="server" /&gt;" alt=""/&gt;
           &lt;div class="post-hover"&gt;
           &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /Post Image --&gt;
          &lt;!-- Post Content --&gt;
          &lt;div class="post-content"&gt;
           &lt;ul class="post-meta"&gt;
            &lt;li&gt;no comments&lt;/li&gt;
           &lt;/ul&gt;
                 &lt;ul class="social-icons style2 social-media"&gt;
                     &lt;li&gt;&lt;a target="_blank" href="#"&gt;
                             &lt;i class="icon-facebook-squared"&gt;&lt;/i&gt;
                         &lt;/a&gt;
            &lt;/li&gt;
                     &lt;li&gt;
             &lt;a target="_blank" href="#"&gt;
                             &lt;i class="icon-twitter"&gt;&lt;/i&gt;
             &lt;/a&gt;
            &lt;/li&gt;
                     &lt;li&gt;
             &lt;a href="#"&gt;
              &lt;i class="icon-google"&gt;&lt;/i&gt;
                         &lt;/a&gt;
                     &lt;/li&gt;
            &lt;li&gt;
             &lt;a target="_blank" href="#" &gt;
              &lt;i class="icon-pinterest"&gt;&lt;/i&gt;
             &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
             &lt;a href="#"&gt;
              &lt;i class="icon-linkedin"&gt;&lt;/i&gt;
             &lt;/a&gt;
            &lt;/li&gt; 
                 &lt;/ul&gt;
           &lt;p&gt;&lt;umbraco:Item field="content" runat="server" /&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;!-- /Post Content --&gt;
         &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="post-author margin-bottom35"&gt;
         &lt;img alt="" src="img/avatar.png" class="avatar"&gt;
         &lt;h3&gt;About Jack&lt;/h3&gt;
         &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium adipisci architecto aspernatur consequuntur debitis distinctio dolorem, doloremque eius error eum eveniet facere harum impedit incidunt labore magnam modi necessitatibus non optio perspiciatis quas saepe similique tempore temporibus totam unde velit! Animi architecto culpa dolor expedita id illum impedit praesentium quae? Alias amet, exercitationem iure natus obcaecati ratione! Accusantium assumenda, dignissimos eveniet incidunt nesciunt perspiciatis similique. Alias aperiam architecto, autem ea error harum modi nemo nobis obcaecati quas. Accusamus atque aut consequatur consequuntur cumque debitis dolorem esse incidunt iure odio, odit, quia, repellendus saepe. Deserunt id libero magnam sunt voluptatum?&lt;/p&gt;
        &lt;/div&gt;
       &lt;/div&gt;
       &lt;!-- /Post Item --&gt;
      &lt;/div&gt;
     &lt;/div&gt;&lt;div class="row"&gt;
      &lt;div class="col-sm-12"&gt;
       &lt;div id="comments" class="post-comments"&gt;
        &lt;div id="respond" class="comment-respond"&gt;
         &lt;/form&gt;
        &lt;/div&gt;&lt;!-- #respond --&gt;
       &lt;/div&gt;&lt;!-- #comments --&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;/section&gt;
     &lt;aside class="sidebar col-lg-3 col-md-4 col-sm-4"&gt;
    &lt;div id="twitter-rss-2" class="widget Twitter_Counter_media"&gt;
     &lt;div class="social"&gt;
      &lt;div class="social-item"&gt;
       &lt;a href="google"&gt;
       &lt;img alt="" src="img/twitter.png"&gt;
       &lt;span&gt;&lt;span class="bold"&gt;9401354&lt;/span&gt;&lt;br&gt;
        Followers&lt;/span&gt;
       &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="social-item"&gt;
       &lt;a href="#"&gt;
       &lt;img alt="" src="img/rss.png"&gt;
       &lt;span&gt;&lt;span class="bold"&gt;Subscribe&lt;/span&gt;&lt;br&gt;
        to RSS Feed&lt;/span&gt;
       &lt;/a&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="call-to-action-widget-2" class="widget widget_call_to_action"&gt;
     &lt;h3&gt;&lt;/h3&gt;
     &lt;div class="info-box"&gt;
      &lt;h2&gt;&lt;umbraco:Item field="callTitle" runat="server" /&gt;&lt;/h2&gt;
      &lt;h4&gt;&lt;umbraco:Item field="ndHeader" runat="server" /&gt;&lt;/h4&gt;
      &lt;a href="#" target="_self" class="button"&gt;&lt;umbraco:Item field="buttonText" runat="server" /&gt;&lt;/a&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;/aside&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- /Container --&gt;
    &lt;/section&gt;
    &lt;!-- /Main Content --&gt;
   &lt;/div&gt;
  &lt;!-- /Marine Conten Inner --&gt;
  &lt;!-- Footer --&gt;
  &lt;footer id="footer"&gt;
  &lt;!-- Main Footer --&gt;
  &lt;div id="main-footer" class="smallest-padding"&gt;
   &lt;div class="container"&gt;
    &lt;div class="row"&gt;
     &lt;div class="col-lg-3 col-md-3 col-sm-3"&gt;
      &lt;div id="text-2" class="widget widget_text"&gt;
       &lt;div class="textwidget"&gt;
        &lt;img src="img/marine-logo-light.png" alt="logo"&gt;
        &lt;p&gt;
          Vivamus orci sem, consectetur ut vestibulum a, mper ac dui. Aenean tellus nisl, commodo eu aliquet ut, pulvinar ut sapien. Proin tate aliquam mi nec hendrerit.
        &lt;/p&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="col-lg-3 col-md-3 col-sm-3"&gt;
      &lt;div id="latest-posts-3" class="widget widget_latest_posts_entries"&gt;
       &lt;h4&gt;Latest Posts&lt;/h4&gt;
       &lt;div class="blog-post"&gt;
        &lt;span class="post-meta"&gt;June 11, 2014 | Jack&lt;/span&gt;
        &lt;a class="post-title" title="Single Blog Post" href="#"&gt;Single Blog Post&lt;/a&gt;
        &lt;p&gt;
          Suspendisse ornare tincidunt massa et malesuada. Integer consequat suscipit velit
        &lt;/p&gt;
       &lt;/div&gt;
       &lt;div class="blog-post"&gt;
        &lt;span class="post-meta"&gt;June 8, 2014 | Jack&lt;/span&gt;
        &lt;a class="post-title" title="A Simple Text Post" href="#"&gt;A Simple Text Post&lt;/a&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eleifend
        &lt;/p&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="col-lg-3 col-md-3 col-sm-3"&gt;
      &lt;div id="text-4" class="widget widget_text"&gt;
       &lt;h4&gt;Contact&lt;/h4&gt;
       &lt;div class="textwidget"&gt;
        &lt;ul class="iconic-list"&gt;
         &lt;li&gt;
         &lt;i class="icons icon-location-7"&gt;&lt;/i&gt;
         Phoenix Inc.&lt;br&gt;
          PO Box 21177 &lt;br&gt;
          Little Lonsdale St, Melbourne &lt;br&gt;
          Victoria 8011 Australia &lt;/li&gt;
         &lt;li&gt;
         &lt;i class="icons icon-mobile-6"&gt;&lt;/i&gt;
         Phone: (415) 124-5678 &lt;br&gt;
          Fax: (415) 124-5678 &lt;/li&gt;
         &lt;li&gt;
         &lt;i class="icons icon-mail-7"&gt;&lt;/i&gt;
         support@yourname.com &lt;/li&gt;
        &lt;/ul&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="col-lg-3 col-md-3 col-sm-3"&gt;
      &lt;div id="wysija-3" class="widget widget_wysija"&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="social-media-2" class="widget widget_social_media"&gt;
       &lt;h4&gt;Follow Us&lt;/h4&gt;
       &lt;ul class="social-media"&gt;
        &lt;li class="tooltip-ontop" title="Facebook"&gt;&lt;a href="dfsdfsdfscvc"&gt;&lt;i class="icon-facebook"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="tooltip-ontop" title="Twitter"&gt;&lt;a href="dfsder"&gt;&lt;i class="icon-twitter"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="tooltip-ontop" title="Google Plus"&gt;&lt;a href="sdfs"&gt;&lt;i class="icon-google"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="tooltip-ontop" title="Linkedin"&gt;&lt;a href="fsdfsd"&gt;&lt;i class="icon-linkedin"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /Main Footer --&gt;
  &lt;!-- Lower Footer --&gt;
  &lt;div id="lower-footer"&gt;
   &lt;div class="container"&gt;
    &lt;span class="copyright"&gt;© 2014 Marine. All Rights Reserved&lt;/span&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /Lower Footer --&gt;
  &lt;/footer&gt;
  &lt;!-- /Footer --&gt;
  &lt;/div&gt;
  &lt;!-- /Marine Content Wrapper --&gt;
  &lt;!-- JavaScript --&gt;
  &lt;script type='text/javascript' src='scripts/bootstrap.min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/jquery-ui.min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/jquery.easing.1.3.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/jquery.mousewheel.min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/SmoothScroll.min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/jquery.prettyPhoto.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/modernizr.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/wow.min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/jquery.sharre.min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/jquery.flexslider-min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/jquery.knob.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/jquery.mixitup.min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/masonry.min.js?ver=3.1.2'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/jquery.masonry.min.js?ver=3.1.2'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/jquery.fitvids.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/perfect-scrollbar-0.4.10.with-mousewheel.min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/jquery.nouislider.min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/jquery.validity.min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/tweetie.min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='scripts/script.js'&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and this is my blog post timeline code:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if IE 8 ]&gt;&lt;html lang="en" class="isie ie8 oldie no-js"&gt;&lt;![endif]--&gt;
  &lt;!--[if IE 9 ]&gt;&lt;html lang="en" class="isie ie9 no-js"&gt;&lt;![endif]--&gt;
  &lt;!--[if (gt IE 9)|!(IE)]&gt;&lt;!--&gt;
  &lt;html lang="en" class="no-js"&gt;
  &lt;!--&lt;![endif]--&gt;
  &lt;head&gt;
  &lt;!-- Meta Tags --&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;meta name="description" content="Marine Main 1"&gt;
  &lt;!-- Title --&gt;
  &lt;title&gt;Blog Timeline Style | Marine&lt;/title&gt;
  &lt;!-- Favicon --&gt;
  &lt;link rel="shortcut icon" href="img/favicon.jpg" type="image/x-icon"/&gt;
  &lt;!-- Google Fonts --&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,800' rel='stylesheet' type='text/css'&gt;
  &lt;!-- Stylesheets --&gt;
  &lt;link rel='stylesheet' id='twitter-bootstrap-css' href='css/bootstrap.min.css' type='text/css' media='all'/&gt;
  &lt;link rel='stylesheet' id='fontello-css' href='css/fontello.css' type='text/css' media='all'/&gt;
  &lt;link rel='stylesheet' id='prettyphoto-css-css' href='css/prettyPhoto.css' type='text/css' media='all'/&gt;
  &lt;link rel='stylesheet' id='animation-css' href='css/animation.css' type='text/css' media='all'/&gt;
  &lt;link rel='stylesheet' id='perfectscrollbar-css' href='css/perfect-scrollbar-0.4.10.min.css' type='text/css' media='all'/&gt;
  &lt;link rel='stylesheet' id='jquery-validity-css' href='css/jquery.validity.css' type='text/css' media='all'/&gt;
  &lt;link rel='stylesheet' id='jquery-ui-css' href='css/jquery-ui.min.css' type='text/css' media='all'/&gt;
  &lt;link rel='stylesheet' id='style-css' href='css/style.css' type='text/css' media='all'/&gt;
  &lt;link rel='stylesheet' id='mobilenav-css' href='css/mobilenav.css' type='text/css' media="screen and (max-width: 838px)"/&gt;
  &lt;!-- jQuery --&gt;
  &lt;script src="scripts/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;!--[if lt IE 9]&gt;
              &lt;script&gt;
                  document.createElement("header");
                  document.createElement("nav");
                  document.createElement("section");
                  document.createElement("article");
                  document.createElement("aside");
                  document.createElement("footer");
                  document.createElement("hgroup");
              &lt;/script&gt;
          &lt;![endif]--&gt;
  &lt;!--[if lt IE 9]&gt;
              &lt;script src="scripts/html5.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
  &lt;!--[if lt IE 7]&gt;
              &lt;script src="scripts/icomoon.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
  &lt;!--[if lt IE 9]&gt;
              &lt;link href="css/ie.css" rel="stylesheet"&gt;
          &lt;![endif]--&gt;
  &lt;!--[if lt IE 9]&gt;
              &lt;script src="scripts/jquery.placeholder.js"&gt;&lt;/script&gt;
              &lt;script src="scripts/script_ie.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body class="w1170 headerstyle1"&gt;
  &lt;!-- Marine Content Wrapper --&gt;
  &lt;div id="marine-content-wrapper"&gt;
      &lt;header id="header" class="style6"&gt;
  &lt;div id="upper-header"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-12 col-md-12 col-sm-12"&gt;
                  &lt;div class="item left hidden-separator"&gt;
                      &lt;ul id="menu-shop-header" class="menu"&gt;
  
  
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="item right hidden-separator"&gt;
  
  
                          &lt;div class="shopping-cart-dropdown"&gt;
                          &lt;div class="cart-menu-item "&gt;
                              &lt;div class="sc-header"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
          &lt;!-- Main Header --&gt;
  &lt;div id="main-header"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;!-- Logo --&gt;
              &lt;div class="col-lg-4 col-md-4 col-sm-4 logo"&gt;
                  &lt;a href="index.html" title="Marine" rel="home"&gt;&lt;img class="logo" src="img/marine-logo.png" alt="Marine"&gt;&lt;/a&gt;
                  &lt;div id="main-nav-button"&gt;
                      &lt;span&gt;&lt;/span&gt;
                      &lt;span&gt;&lt;/span&gt;
                      &lt;span&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-8 align-right"&gt;
                  &lt;!-- Text List --&gt;
                  &lt;ul class="text-list"&gt;
                      &lt;li&gt;Call Us: +1 800 450 17 08&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;!-- Social Media --&gt;
                  &lt;ul class="social-media"&gt;
                      &lt;li&gt;&lt;a target="_blank" href="http://facebook.com"&gt;&lt;i class="icon-facebook"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a target="_blank" href="http://twiiter.com/google"&gt;&lt;i class="icon-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a target="_blank" href="http://google.com"&gt;&lt;i class="icon-google"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a target="_blank" href="http://linkedin.com"&gt;&lt;i class="icon-linkedin"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /Main Header --&gt;
  &lt;!-- Lower Header --&gt;
  &lt;div id="lower-header"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-12 col-md-12 col-sm-12"&gt;
                  &lt;div class="lower-logo"&gt;
                      &lt;a href="index.html" title="Marine" rel="home"&gt;&lt;img class="logo" src="img/marine-logo.png" alt="Marine"&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;!-- Main Navigation --&gt;
                  &lt;ul id="main-nav"&gt;
                  &lt;ul class='mainMenu'&gt;
                          &lt;li&gt;&lt;a href='http://www.redflyseo.co.za' title='Home'&gt;HOME&lt;/a&gt;&lt;/li&gt;
                          &amp;nbsp|&amp;nbsp
                          &lt;li&gt;&lt;a href='http://www.redflyseo.co.za/seo' title='SEO'&gt;SEO&lt;/a&gt;&lt;/li&gt;
                          &amp;nbsp|&amp;nbsp
                          &lt;li&gt;&lt;a href='http://www.redflyseo.co.za/social-media' title='SOCIAL MEDIA'&gt;SOCIAL MEDIA&lt;/a&gt;&lt;/li&gt;
                          &amp;nbsp|&amp;nbsp
                          &lt;li&gt;&lt;a href='http://www.redflyseo.co.za/content-marketing' title='CONTENT MARKETING'&gt;CONTENT MARKETING&lt;/a&gt;&lt;/li&gt;
                          &amp;nbsp|&amp;nbsp
                          &lt;li&gt;&lt;a href='http://www.redflyseo.co.za/digital-audits' title='DIGITAL AUDITS'&gt;DIGITAL AUDITS&lt;/a&gt;&lt;/li&gt;
                          &amp;nbsp|&amp;nbsp
                          &lt;li&gt;&lt;a href='http://www.redflyseo.co.za/sme-business-package' title='SME BUSINESS PACKAGE'&gt;SME BUSINESS PACKAGE&lt;/a&gt;&lt;/li&gt;
                          &amp;nbsp|&amp;nbsp
                          &lt;li&gt;&lt;a href='http://www.redflyseo.co.za/blog' title='Blog'&gt;BLOG&lt;/a&gt;&lt;/li&gt;
                          &amp;nbsp|&amp;nbsp
                          &lt;li&gt;&lt;a href='http://www.redflyseo.co.za/contact-us' title='Contact Us'&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /Lower Header --&gt;
  &lt;script type="text/javascript"&gt;
  //&lt;![CDATA[
    (function() {
      var shr = document.createElement('script');
      shr.setAttribute('data-cfasync', 'false');
      shr.src = '//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js';
      shr.type = 'text/javascript'; shr.async = 'true';
      shr.onload = shr.onreadystatechange = function() {
        var rs = this.readyState;
        if (rs &amp;&amp; rs != 'complete' &amp;&amp; rs != 'loaded') return;
        var site_id = '4703ccf47ac9b99588c7a6fb9d1b4ce2';
        try { Shareaholic.init(site_id); } catch (e) {}
      };
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(shr, s);
    })();
  //]]&gt;
  &lt;/script&gt;
  &lt;/header&gt;
      &lt;!-- /Header --&gt;
      &lt;!-- Marine Content Inner --&gt;
  &lt;div id="marine-content-inner"&gt;
      &lt;!-- Main Content --&gt;
      &lt;section id="main-content"&gt;
      &lt;!-- Container --&gt;
      &lt;div class="container"&gt;
          &lt;section class="full-width dark-blue-bg page-heading position-left-top size-cover" style="background-image: http://placehold.it/1903x90"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-6 col-md-6 col-sm-6"&gt;
                      &lt;h1&gt;&lt;umbraco:Item field="blogName" runat="server" /&gt;&lt;/h1&gt;
                  &lt;/div&gt;  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/section&gt;
          &lt;script&gt;
              var timelinePerPage = 8;
              var timelineOffset = 0;
              var timelineOffsetNext = (   timelinePerPage * timelineOffset ) + timelinePerPage; // Current
              // Offset of page
              var currentMonth = null;
              var currentYear = null;
              var templateUrl = "&lt;umbraco:Item field="path" runat="server" /&gt;";
          &lt;/script&gt;
          &lt;section class="full-width-bg normal-padding medium-gray-bg "&gt;
          &lt;div class="timeline-container-wrap"&gt;
              &lt;div class="timeline-date-tooltip"&gt;
                  &lt;span&gt;June 2014&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="row timeline-row"&gt;
                  &lt;div class="masonry-container timeline-container"&gt;
                      &lt;div class="col-lg-6 col-md-6 col-sm-6 masonry-box" data-year="2014" data-month="June"&gt;
                          &lt;div class="blog-post masonry timeline"&gt;
                              &lt;!-- POST FOOTER --&gt;
                              &lt;div class="post-footer"&gt;
                                  &lt;img alt='' src='img/avatar.png' class='avatar'/&gt;&lt;span class="post-date"&gt;
                                  &lt;span class="post-day"&gt;11 june &lt;/span&gt;
                                  2014 &lt;/span&gt;
                                  &lt;ul class="post-meta"&gt;
                                      &lt;li&gt; By Jack &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                              &lt;!-- END POST FOOTER --&gt;
                              &lt;div class="post"&gt;
                                  &lt;div class="post-thumbnail"&gt;
                                      &lt;img src="http://placehold.it/528x214" alt="Quotes Time!"/&gt;
                                      &lt;div class="post-hover"&gt;
                                          &lt;a class="link-icon" href="#"&gt;&lt;/a&gt;&lt;a class="search-icon prettyPhoto" href="http://placehold.it/870x475"&gt;&lt;/a&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="post-content"&gt;
                                      &lt;div class="post-details"&gt;
                                          &lt;h4 class="post-title"&gt;
                                          &lt;span class="post-format"&gt;
                                          &lt;span class="document-icon"&gt;&lt;/span&gt;&lt;/span&gt;
                                          &lt;a href='blog-single.html' title="Quotes Time!"&gt;Quotes Time!&lt;/a&gt;
                                          &lt;/h4&gt;
                                      &lt;/div&gt;
                                      &lt;p class="latest-from-blog_item_text"&gt;
                                           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, convallis quis, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat. Proin vestibulum.
                                      &lt;/p&gt;
                                      &lt;a class="read-more big" href='blog-single.html' title="Quotes Time!"&gt;Read more&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="clear"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- .masonry-container-wrapper --&gt;
          &lt;div class="align-center load-more"&gt;
              &lt;a class="button big blue button-load-more" id="timeline-load-more" href="http://www.redflyseo.co.za/blog"&gt;Load More&lt;/a&gt;
          &lt;/div&gt;
      &lt;/section&gt;
          &lt;/div&gt;
      &lt;!-- /Container --&gt;
      &lt;/section&gt;
      &lt;!-- /Main Content --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would appreciate it if anyone could assist with this matter. I have been researching and been stuck for about a month with displaying blog post snippet on my blog timeline and home page. I deleted some of the footer code as I reached the limited of characters in this post.</p>