블로거 - 레이아웃에 비동기방식 댓글 추가하기 / Blogger - Add Async Method Comments to Layout

블로거 비동기방식 댓글 추가

작업 순서

1. 구글 블로거 > 레이아웃 > 사이드바 > HTML/Javascript 가젯 추가 > 제목/컨텐츠 작성 > 저장 > 사이드바 순서 조정 > 레이아웃 저장
 - 아래 소스 중 강조된 라인은 사용자 환경에 따라 수정 필요
<script type="text/javascript">
function fnGetComments(url, ePr) {
  if(window.XMLHttpRequest) {
    xHttp = new XMLHttpRequest();
    xHttp.onreadystatechange = function() {
      if ((this.readyState == 4) && (this.status == 200)) {
        var data = JSON.parse(this.responseText);
        if ((typeof data == "object") && (typeof data.feed == "object") && (typeof data.feed.link == "object") && (typeof data.feed.link.length == "number")) {
          var sUrl = "", sTitle = "", dDate,
              oOpt = {year:"numeric",month:"2-digit",day:"2-digit",weekday:"short"},
              sHtml = "<ul>";
          for (var I = 0; I < data.feed.entry.length; I++) {
            sUrl = "'#'";
            if ((data.feed.entry[I].link.length > 2) && (data.feed.entry[I].link[2].rel == "alternate"))
              sUrl = "'"+data.feed.entry[I].link[2].href+"'";
            if (data.feed.entry[I].title.$t == ""){
              if (data.feed.entry[I].summary != undefined)
                sTitle = data.feed.entry[I].summary.$t;
            }
            else
              sTitle = data.feed.entry[I].title.$t;
            dDate = new Date(data.feed.entry[I].published.$t);
            sHtml += "<li><a href="+sUrl+" target='_blank'>"+sTitle+"</a><br/>"+dDate.toLocaleDateString(navigator.language,oOpt)+"   "+data.feed.entry[I].author[0].name.$t+"</li>";
          }
          sHtml += "</ul>";
          ePr.innerHTML = sHtml;
        }
      }
    }
    xHttp.open("GET", url, true);
    xHttp.send();
  }
}
fnGetComments("https://{블로그주소}.blogspot.com/feeds/comments/default?alt=json&max-results=5", document.querySelector("#HTML1 > div.widget-content"));
</script>
2. 구글 블로거 > 테마 > 맞춤설정 > HTML 편집 > CSS 추가 > 테마 저장
<head>
  <style>
    #HTML1 > div.widget-content > ul > li {
      font: 400 14px Merriweather, Georgia, serif;
      margin-top: 8px;
    }
  </style>
</head>



Creative Commons Licenses
이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.

댓글

댓글 쓰기