구글 블로그(blogger) 관련 글 위젯 HTML 코드(썸네일이미지, 제목, 글미리보기)

구글 블로그(blogger, blogspot) 관련 글 위젯 코드입니다. 

구글 블로그 설정 - 레이아웃 - HTML추가하여 아래 코드를 복사, 붙여넣기 하시면 됩니다.

관련글 위젯 코드 복사 후

글 목록 수 수정 및 자신의 구글블로그 주소를 입력하여 사용하시면 됩니다.

var numposts = 10;

<script src="https://블로그URL입력/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>

<div id="hlrpsa">
  <script type="text/javascript">
    function showrecentposts(t) {
      for (var e = 0; e < numposts; e++) {
        var n, r = t.feed.entry[e],
          i = r.title.$t;
        if (e == t.feed.entry.length) break;
        for (var s = 0; s < r.link.length; s++) {
          if ("alternate" == r.link[s].rel) {
            n = r.link[s].href;
            break;
          }
        }
        i = '<a href="' + n + '">' + i + '</a>';
        var a = "...",
          d = r.published.$t,
          u = d.substring(0, 4),
          o = d.substring(5, 7),
          c = d.substring(8, 10),
          l = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        if ("content" in r) var m = r.content.$t;
        else if ("summary" in r) var m = r.summary.$t;
        else var m = "";
        var w = /<\S[^>]*>/g;
        m = m.replace(w, "");
        var thumb = "";
        if ("media$thumbnail" in r) {
          thumb = r.media$thumbnail.url;
        } else if ("media:thumbnail" in r) {
          thumb = r["media:thumbnail"].url;
        } else {
          var imgTag = r.content.$t.match(/<img.*?src="(.*?)"/);
          if (imgTag) {
            thumb = imgTag[1];
          } else {
            thumb = "https://via.placeholder.com/72";
          }
        }
        document.write('<div class="recent-post"><div class="rcthumb"><img src="' + thumb + '" alt="Thumbnail"></div>');
        document.write('<div class="rccontent"><div class="rctitle">' + i + '</div>');
        if (showpostsummary) {
          if (m.length < numchars) {
            document.write('<div class="rcsumm">' + m + '</div>');
          } else {
            m = m.substring(0, numchars);
            var g = m.lastIndexOf(" ");
            m = m.substring(0, g);
            document.write('<div class="rcsumm">' + m + a + '</div>');
          }
        }
        document.write('</div></div>');
      }
    }
  </script>
  <script type="text/javascript">
    var numposts = 10;
    var showpostdate = false;
    var showpostsummary = true;
    var numchars = 100;
  </script>
  <script src="https://www.wonsdiary.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>
</div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
  .recent-post {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .rcthumb {
    margin-right: 10px;
  }

  .rcthumb img {
    width: 72px;
    height: 72px;
    object-fit: cover;
  }

  .rccontent {
    flex: 1;
  }

  .rctitle a {
    color: #000;
    font-size: 18px;
    text-decoration: none;
  }

  .rcsumm {
    border-bottom: 1px dotted #ccc;
    padding-bottom: 10px;
    margin-top: 5px;
    color: #999;
    font-size: 15px;
  }
</style>

관련 글

• 코드 하이라이트(Code highlighter) 생성기