I use the following code for recent posts on my blogspot site.
When I upload a new image to my blog, most of the time the images are uploaded via a link like https: //1.bp.blogspot.com / ......
But sometimes when uploading pictures, the pictures are uploaded by such links as https: //blogger.googleusercontent.com/img/a/A ......
Then my pictures are not clear on the home page. And the pictures come at length. I did a Google search and found that the code below does not support third party images.
So I want to know how I can support third party pictures in this code below.
.mbtlist { list-style-type: none; overflow: hidden } .mbtlist li { margin: 0px auto 20px auto; clear: both; color: #666; font-family: Helvetica; font-size: 12px; border-bottom: 1px dotted #ddd; padding-bottom: 10px; } .mbtlist .mbttitle { font-family: oswald; font-size: 16px; color: #0080ff; font-weight: normal; text-decoration: none; } .mbtlist .mbttitle:hover { color: #00A5FF; } font-family:georgia; font-size:15px; font-weight:bold } .mbtlist div span { margin: 0 10px 0 0; display: inline-block; } .mbtlist span { display: block; margin: 5px 0px 0px; padding-right: 5px; } .mbtlist .imore { font-size: 16px; font-weight: bold; text-decoration: none; color: #666; line-height: 0.7em; } .mbtlist .mbttitle .imgbox { max-width: 80px; max-height: 65px; margin: 0px 10px 10px 0px; padding: 6px; box-shadow: -1px -1px 4px #777; display: inline-block; vertical-align: top; text-align: center; overflow: hidden; } .mbtlist .mbttitle .imgbox > img{ width: 100%; vertical-align: middle; } .mbtlist li:first-of-type .mbttitle .imgbox { display: block; width: 100%; max-width: unset; max-height: unset; } <script> function getPosts(json) { var posts = "<ul class=mbtlist>"; for (var i = 0; i < json.feed.entry.length; i++) { var title = json.feed.entry[i].title.$t; var url = json.feed.entry[i].link.pop().href; if (json.feed.entry[i].media$thumbnail) { thumbUrl = json.feed.entry[i].media$thumbnail.url; thumbnail = thumbUrl.replace("/s72-c/", "/s" + 200 + "/"); } posts += "<li><a class='mbttitle' href='" + url + "'><span class='imgbox'><img src='" + thumbnail + "'></span>" + title + "</a></li>"; } posts += '</ul>'; document.getElementById('container').innerHTML = posts; } </script> <div id="container"></div> <script src="https://www.sebahotnews.org/feeds/posts/default/-/বাংলাদেশ ?max-results=5&alt=json&callback=getPosts"></script> 
Top comments (0)