title: Replace Static Content with Dynamic Featured Post Content on Home Page - Blogger Blogspot
body: <p>I have html, css &amp; js code for a website - I am more of a designer than a coder but so far I have managed to learn enough about sections &amp; widgets within the Blogger platform to present my website as it was designed.</p>
  
  <p>However my next goal is to replace my static content with dynamic content from my posts in blogger while maintaining the structure / layout of my original design. </p>
  
  <p>I would like to achieve this via post data variables. This will allow me to reference the variables in any div tag. This also means that the css I already have, can be applied to the post image, and post title feeds. </p>
  
  <p>If I had the data set from 4 featured posts and place each data set into 4 different variables post1, post2, post3, &amp; post7. </p>
  
  <p>I would then have my initial image url's and title's replaced with featured post images and titles. One of the variables might look something like -  post2.firstImageUrl - which I could place anywhere, in any order, in any of my div tags on my home page.</p>
  
  <p>I have tried out code from various articles online but so far the data comes back in a bundle - which is less than ideal. Does anyone know what variables and supporting code will work in this scenario. Your efforts will be greatly appreciated.</p>
  
  <p>The following link points to an article which is close, but not quite there. It might just need a little tweaking.</p>
  
  <p><a href="http://strapboot.blogspot.com/2014/12/show-recont-post-original-image-from.html" rel="nofollow noreferrer">http://strapboot.blogspot.com/2014/12/show-recont-post-original-image-from.html</a></p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script type='text/javascript'&gt;
  
    //&lt;![CDATA[
  
  function labelthumbs(json) {
  
      document.write('&lt;ul id="label_with_thumbs"&gt;');
      for (var i = 0; i &lt; numposts; i++) {
          var entry = json.feed.entry[i];
  
          var posttitle = entry.title.$t;
  
          var posturl;
          if (i == json.feed.entry.length) break;
          for (var k = 0; k &lt; entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' &amp;&amp; entry.link[k].type == 'text/html') {
                  var commenttext = entry.link[k].title;
                  var commenturl = entry.link[k].href;
              }
  
              if (entry.link[k].rel == 'alternate') {
                  posturl = entry.link[k].href;
                  break;
              }
          }
          var thumburl;
          try {
              thumburl = entry.media$image.url;
          } catch (error)
  
          {
              s = entry.content.$t;
              a = s.indexOf("&lt;img");
              b = s.indexOf("src=\"", a);
              c = s.indexOf("\"", b + 5);
              d = s.substr(b + 5, c - b - 5);
              if ((a != -1) &amp;&amp; (b != -1) &amp;&amp; (c != -1) &amp;&amp; (d != "")) {
                  thumburl = d;
              } else thumburl = 'http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png';
          }
  
          var postdate = entry.published.$t;
  
          var cdyear = postdate.substring(0, 4);
  
          var cdmonth = postdate.substring(5, 7);
  
          var cdday = postdate.substring(8, 10);
  
          var monthnames = new Array();
          monthnames[1] = "Jan";
          monthnames[2] = "Feb";
          monthnames[3] = "Mar";
          monthnames[4] = "Apr";
          monthnames[5] = "May";
          monthnames[6] = "June";
          monthnames[7] = "July";
          monthnames[8] = "Aug";
          monthnames[9] = "Sept";
          monthnames[10] = "Oct";
          monthnames[11] = "Nov";
          monthnames[12] = "Dec";
          document.write('&lt;li class="clearfix"&gt;');
          if (showpostthumbnails == true)
  
              document.write('&lt;strong&gt;&lt;a href="' + posturl + '" target ="_top"&gt;' + posttitle + '&lt;/a&gt;&lt;/strong&gt;&lt;br&gt; &lt;a href="' + posturl + '" target ="_top"&gt;&lt;img class="label_thumb" src="' + thumburl + '"/&gt;&lt;/a&gt;');
          document.write('');
          if ("content" in entry) {
              var postcontent = entry.content.$t;
          } else
  
          if ("summary" in entry) {
              var postcontent = entry.summary.$t;
          } else var postcontent = "";
          var re = /&lt;\S[^&gt;]*&gt;/g;
          postcontent = postcontent.replace(re, "");
  
          if (showpostsummary == true) {
              if (postcontent.length &lt; numchars) {
                  document.write('');
                  document.write(postcontent);
                  document.write('');
              } else {
                  document.write('');
                  postcontent = postcontent.substring(0, numchars);
  
                  var quoteEnd = postcontent.lastIndexOf(" ");
                  postcontent = postcontent.substring(0, quoteEnd);
                  document.write(postcontent + '...');
                  document.write('');
              }
          }
  
          var towrite = '';
          var flag = 0;
          document.write('&lt;br&gt;');
          if (showpostdate == true) {
              towrite = towrite + monthnames[parseInt(cdmonth, 10)] + '-' + cdday + ' - ' + cdyear;
              flag = 1;
          }
  
          if (showcommentnum == true)
  
          {
              if (flag == 1) {
                  towrite = towrite + ' | ';
              }
  
              if (commenttext == '1 Comments') commenttext = '1 Comment';
              if (commenttext == '0 Comments') commenttext = 'No Comments';
              commenttext = '&lt;a href="' + commenturl + '" target ="_top"&gt;' + commenttext + '&lt;/a&gt;';
              towrite = towrite + commenttext;
              flag = 1;;
          }
  
          if (displaymore == true)
  
          {
              if (flag == 1) towrite = towrite + ' | ';
              towrite = towrite + '&lt;a href="' + posturl + '" class="url" target ="_top"&gt;More »&lt;/a&gt;';
              flag = 1;;
          }
  
          document.write(towrite);
          document.write('&lt;/li&gt;');
          if (displayseparator == true)
  
              if (i != (numposts - 1))
  
                  document.write('');
      }
      document.write('&lt;/ul&gt;');
  }
  
    //]]&gt;
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I believe a solution of this nature will ensure that my template structure remains true to design, and means I can develop my site offline knowing that I can integrate into the blogger platform as efficiently as possible. </p>