Search code examples
javascriptblogger

Blogger : How To Improve Recent Posts Wdget Image Quality ( Code Added )

Today I have an issue from blogger recent post.

See My Blog: https://pdfepaper.blogspot.com

I will increase in recent post height weight but image quality is down poor.

I want to reconstruct this code and make it below features

  1. Recent Posts Only thumbnails.
  2. improve Image Quality
  3. Remove Heads label comment read more all remove and make it only Recent post thumbnails
  4. Recent Posts grid style

My issue code is given below

<script type="text/javascript"> function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var
_="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target
="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")} </script> <script type="text/javascript"> var posts_no = 5; var showpoststhumbs = true; var readmorelink = true; var showcommentslink
= true; var posts_date = true; var post_summary = true; var summary_chars = 40;</script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script> <noscript>Your browser does not support JavaScript!</noscript> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> <style type="text/css"> img.recent-post-thumb{padding:2px;width:150px;height:150px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;} .recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;} ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%} ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;} ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background:
#69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;} .recent-posts-container a{text-decoration:none;} .recent-post-title {margin-bottom:5px;} .recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;} .recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;} .recent-posts-details a{color: #777;} </style>
Solution 

  • .recent-posts-container {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  list-style-type: none;
  display: inline-block;
}

ul.recent-posts-container:after {
  content: '';
  display: block;
  clear: both;
}

ul.recent-posts-container li {
  list-style-type: none;
  margin-bottom: 10px;
  font-size: 12px;
  float: left;
  position: relative;
  box-shadow: 1px 1px 9px #353;
  margin: 30px;
  border-radius: 8px 8px;
}

ul.recent-posts-container {
  counter-reset: countposts;
  list-style-type: none;
  padding: 0;
}

ul.recent-posts-container li:before {
  content: counter(countposts, decimal);
  counter-increment: countposts;
  z-index: 1;
  position: absolute;
  left: -10px;
  top: -10px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background: #69B7E2;
  line-height: 25px;
  height: 25px;
  width: 25px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.recent-posts-container a.image-holder {
  width: 150px;
  height: 150px;
  display: inline-block;
  border-radius: 8px 8px;
}

.recent-posts-container a {
  text-decoration: none;
}

.recent-post-title {
  margin-bottom: 5px;
}

.recent-post-title a {
  font-size: 12px;
  text-transform: uppercase;
  color: #2aace3;
}

.recent-posts-details {
  font-size: 11px;
  padding: 2px 10px;
  background: #e6e6e6;
  border-radius: 0 0 8px 8px;
}

.recent-posts-details a {
  color: #777;
}
    <script type="text/javascript">
  function showlatestpostswiththumbs(posts) {
    document.write('<ul class="recent-posts-container">');
    for (var e = 0; e < posts_no; e++) {
      var r, post = posts.feed.entry[e],
        i = post.title.$t;
      if (e == posts.feed.entry.length)
        break;
      for (var o = 0; o < post.link.length; o++) {
        if ("replies" == post.link[o].rel && "text/html" == post.link[o].type) var l = post.link[o].title,
          m = post.link[o].href;
        if ("alternate" == post.link[o].rel) {
          r = post.link[o].href;
          break
        }
      }
      var url;
      try {
        url = post.media$thumbnail.url
      } catch (h) {
        s = post.content.$t, a = s.indexOf("<img"), b = s.indexOf('src="', a), c = s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), url = -1 != a && -1 != b && -1 != c && "" != d ? d : "https://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"
      }
      var p = post.published.$t,
        f = p.substring(0, 4),
        g = p.substring(5, 7),
        v = p.substring(8, 10),
        w = new Array;
      url = url.replace("s72", "s150");
      if (w[1] = "Jan", w[2] = "Feb", w[3] = "Mar", w[4] = "Apr", w[5] = "May", w[6] = "Jun", w[7] = "Jul", w[8] = "Aug", w[9] = "Sep", w[10] = "Oct", w[11] = "Nov", w[12] = "Dec", document.write('<li class="recent-posts-list">'), 1 == showpoststhumbs && document.write('<a href="' + r + '" style="background:url(' + url + ') 0 center no-repeat;background-size:cover;" class="image-holder">&nbsp;</a>'), "content" in post) var A = post.content.$t;
      else if ("summary" in post) var A = post.summary.$t;
      else var A = "";
      var k = /<\S[^>]*>/g;
      var _ = "",
        $ = 0;
      document.write('<br><div class="recent-posts-details">'), 1 == posts_date && (_ = _ + w[parseInt(g, 10)] + " " + v + " " + f, $ = 1), 1 == readmorelink && (1 == $ && (_ += "<br/>"), _ = _ + '<a href="' + r + '" class="url" target ="_top">Read more</a>', $ = 1), 1 == showcommentslink && (1 == $ && (_ += " | "), "1 Comments" == l && (l = "1 Comment"), "0 Comments" == l && (l = "No Comments"), l = '<a href="' + m + '" target= "_top" > ' + l + "</a>", _ += l, $ = 1), document.write(_), document.write("</div>"), document.write("</li>")
    }
    document.write("</ul>")
  }
</script>
<script type="text/javascript">
  var posts_no = 5;
  var showpoststhumbs = true;
  var readmorelink = true;
  var showcommentslink = true;
  var posts_date = true;
  var post_summary = true;
  var summary_chars = 40;
</script>
<script src="https://pdfepaper.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />