Search code examples
bloggerblogs

How to create list of posts in blogger post with images

Hello I am trying to create list of post for similar categories but I am not getting how to create list with image and description like below -

I tried to create but formatting of data is not correct, you can see in following screen shot-

enter image description here

Solution 

  • <style type='text/css'>/*<![CDATA[*/
  .post {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #EEE;
    overflow: hidden;
    font-family: tahoma;
  }
  .post-thumb {
    float: left;
    margin-right: 10px;
    border: 3px solid #fff;
    box-shadow: 0 0 1px #000;
  }
  .post-title {
    margin: 0 0 5px;
    line-height: 12px
  }
  .post-title a {
    font-size: 12px;
    color: #222;
    text-decoration: none
  }
  .post-title a:hover{
    color: coral;
    text-decoration: underline
  }
  .post-snippet{
    font-size: 12px;
    color: #666;
    margin: 5px 0;
  }
  .post-date {
    font-size: 12px;
    color: #999;
  }
  /*]]>*/</style>

<div id='posts'></div>

<script type='text/javascript'>/*<![CDATA[*/
  function FeedPosts(jsondata){
    if(jsondata.feed.entry){
      var markup='';
      for( var p=0; p < jsondata.feed.entry.length; p++){
        var item      = jsondata.feed.entry[p],
            thumbnail = item['media$thumbnail'] ? item['media$thumbnail'].url.replace(/s72-c/, 'w150-h80-p') : '',
            title     = item.title.$t,
            link      = item.link.filter(function(l){ return l.rel == 'alternate' })[0].href,
            snippet   = item.content.$t.replace(/<\/?[^>]+(>|$)/g, '').substr(0, 80) + '...',
            date      = new Date(item.published.$t).toLocaleDateString();
        markup += '<div class="post">';
        markup += thumbnail ? '<img class="post-thumb" src="'+ thumbnail +'">' : '';
        markup += '<h2 class="post-title"><a href="'+ link +'">'+ title +'</a></h2>';
        markup += '<p class="post-snippet">'+ snippet +'</p>';
        markup += '<abbr class="post-date">'+ date +'</abbr>';
        markup += '</div>';
      }
      document.querySelector('#posts').innerHTML = markup;
    }
  }
  /*]]>*/</script>

<!-- Replace "6224600608277196834" with your blog id -->
<!-- OR Replace script source with "/feeds/posts/default/-/Reactions?alt=json-in-script&max-results=5&callback=FeedPosts" -->
<!-- Replace "Reactions" with your category name -->
<script src="https://www.blogger.com/feeds/6224600608277196834/posts/default/-/Reactions?alt=json-in-script&max-results=5&callback=FeedPosts"></script>