구글블로그(블로거) 라벨기능을 이용한 글목록 만들기

현제 이 방법보다 더 나은 방법을 발견하여 코드를 수정 하였습니다. 여기를 클릭해 주세요.

====================================================
블로거로 이사온 지 2주.
그동안 블로거의 자유성에서는 만족을 했지만 블로거 글 목록이 없는 것에 실망을 하던 중.
"없으면 만들면 돼지 어딘가 방법이 있을거야." 라는 생각에 인터넷을 찾아보던 중 블로거에 목록을 만드는 방법을 발견 했습니다!!!!

코드 원본은 => How to list recent post titles by label | Blogger Sentral
제가 참고한 블로그는 => 블로거 라벨기능을 이용한 글목록 만들기

하지만 문제가 있더군요.
위에 방식들은 각각의 label 목록을 각각의 post에다가 만든 후 해당 post로 링크를 통해 이동하는 방식을 취하고 있는데요. 평소 label 목록을 자주 바꾸는 편인데다가.. label를 여러개 사용하는 저로써는... 저런 노가다가 맘에 들지 않았습니다.

그 밖에도 글을 읽다가 해당 라벨의 내용을 볼려면 목록이 있는 링크를 클릭해 들어가서 다시 봐야하는 번거로움이 있고요... 또 위에 방식은 정해진 숫자 만큼의 '최근' 글만을 목록으로 만드는 방식이더군요. 그 이전 글은 목록에 나오지 않는.....

그래서! 과감히. JavaScript에 입문한지 한달도 안된 제가. 무려 5시간여를 끙끙거린 끝에 위 코드를 수정하는데 성공 했습니다.

제가 수정한 코드는.. 기본 베이스는 위 코드를 그대로 썼기때문에 방식은 비슷하고요.
차이는... 코드를 동적으로 하여 블로그 라벨을 누르면 인터넷 주소창에 맨 마지막 '/' 이후에 해당 라벨 이름이 나온다는 것에 착안해.

현재 블로그 주소를 읽어서 가장 마지막 '/'이후의 String를 읽어다가 모든 post가 있는 html를 분석해 각 post의 라벨명과 비교하여 라벨명과 '/'이후의 String이 일치하는 Post만 화면 나오도록 수정하였습니다.

위에 방법으로 동적으로 해당 라벨의 Post 목록을 만드는데 성공했습니다.

여기에 더해서 아예 이 목록을 위젯으로 등록해서 언제나 글 본문 위에 Post 목록이 뜨도록 수정..

그리고.. 제 방식은 모든 Post를 읽어서 하는 것이기 때문에 너무 글 목록이 길어져 본문이 저 지하끝까지 가버리는 경우가 생길 수 있으므로 목록을 show/hide 를 통해 열고 닫을 수 있게 했습니다.

지금 위에 보시면 Post List 밑에 View List라고 있는데. 그것을 누르면. 목록이 안나올겁니다. (ㅡ_ㅡ ;;) ㅎㅎ...

네.. 실제는 저기가 목록이 나오는 곳이 맞는데요... 짐 위에 주소창을 보시면.. http://creatorhong.blogspot.com/2011/08/blog-post_08.html 라고 나올겁니다. 아.. 물론... 그렇게 안나오는 분도 있을텐데요.

암튼. 이유는 제가 위에서 설명했듯이이 방식은 현재 주소의 가장 마지막 '/'이후의 String을 읽어서 라벨명과 비교하는 겁니다. 라벨을 클릭해서 들어가면 보이는 창에는 라벨명이 가장 마지막 '/' 이후에 나오는데요...

글을 클릭해서 들어가면 나오는 주소는... 해당 Post의 주소기때문에 라벨명과는 상관이 없습니다.. ㅎㅎ.. 결국은 다른 목록을 보기위에서 해당 라벨을 선택해야한다는 점은 못고쳤다는 것....

뭐. 아무튼. 잡설이 길었습니다.

우선 코드는

<!-- code by 'BloggerSentral.com' & change by 'creatorhong.blogspot.com' -->

<!-- show/hide function -->
<script language='javascript' type='text/javascript'>
  function layer_toggle(obj) {
    if (obj.style.display=='none') obj.style.display = 'block';
    else if (obj.style.display=='block') obj.style.display = 'none';
  }
</script>
<!-- end show/hide function -->

<!-- Posts List by Label function -->
<script type="text/javascript">
  function recentpostslist(json) {
    document.write(json);
    document.write('<ul>');
    var address = location.href;
    var s = address.lastIndexOf("/")+1;
    var label = address.substr(s, 100);
    for (var i = 0; i < json.feed.entry.length; i++)
    {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          break;
        }
      }
    var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
    var entryTitle = json.feed.entry[i].title.$t;
    var isWrite = false;
    for(var k=0; k<json.feed.entry[i].category.length; k++){
      if(label == json.feed.entry[i].category[k].term || s >= address.length){
        isWrite = true;
      }
    }
    if(isWrite == true){
      var item = "<li>" + "<a href="+ entryUrl + '>' + entryTitle + "</a> </li>";
      document.write(item);
    }
  }
  document.write('</ul>');
}
</script>
<!-- end Posts List by Label function -->

<table bgcolor="#111111" border="1px1" style="width: 100%;"><tbody>
<tr><td>
<!-- call show/hide function -->

<div style="display: block" id="ViewList">
  <a onclick="layer_toggle(document.getElementById('ViewList')); layer_toggle(document.getElementById('HideList')); return false;" href="#">
    <p>
===== View List =====</p>
</a>  </div>
<div class='column-center-inner' style="display: none" id="HideList">
  <a onclick="layer_toggle(document.getElementById('ViewList')); layer_toggle(document.getElementById('HideList')); return false;" href="#">
  <p>
===== Hide List =====</p>
</a>
  <p>
<!-- call Posts List by Label function -->
    <script src="http://블로거주소.blogspot.com/feeds/posts/summary/?max-results=100&alt=json-in-script&callback=recentpostslist"></script>

  </p>
</div>
</td></tr>
</tbody></table>

이건대요. ㅎㅎ
내용이 길져? ㅋ 뭐 암튼. 위에 글을 복사해서 가지고 계시고요.... 아! 뒤쪽 script src 부분에 블로거 주소는 수정해주시고요. ㅋ(까먹을뻔했네...)

잠시 아래 가젯을 추가하는 방식은 구버전 관리화면을 기반으로 쓰여진 것으로 신버전 관리화면에 의해 따로 수정된 방법으로 링크를 참고해 주십시오.

우선. 우측 상단의 [디자인]을 클릭하시면 위젯을 설치할 수 있는 레이아웃 창이 나오는데요. 네. 아무대나 위젯을 설치해봅시다. 아! 여기는 가젯이란 말을 쓰는군요. 이제 발견했네요. ㅋ

가젯 추가를 누르시면 가젯 목록이 나오고 여기서 HTML/JavaScript의 오른쪽을 보시면 +버튼을 클릭..

뭐.. 이정도는 아실테고. 간단하게 제목에 Posts List 또는 원하시는 가젯 이름을 쓰시고 위에 코드를 붙여넣습니다.

이것으로 1단계 완료.

다음으로. 현재 상태를 저장하시고. 위에 태그에서 HTML편집을 클릭하시면.
블로거 스킨 전체를 HTML로 코딩할 수 있는 창이 나오구요. 그곳에서 코드 창 제일 밑으로 내리시거나 혹은 'Ctrl + F'를 통해 입력한 가젯 이름을 치시면 새로 등록한 가젯이 나옵니다.

위에 보이시져? 아... 제꺼는 이미 가젯의 위치를 이동한 건데요... 저기서 보이시는 것처럼 찾은 가젯을 'Ctrl + X'를 통해 잘라내신 후.

역시  위에서 처럼 블로그 게시물위로 올리기 위해  'Ctrl + F'로 "id='main'"를 치시면 블로그 게시물 위치가 나오는데요. 음. 블로그 게시물또한 알고보니 위젯이었네요.(근데 여기 영어는 또 위젯이네 ㅡㅡ...;;)

......

b:section class='main' id='main' showaddelement='no'>
요기다가
<b:widget id='Blog1' locked='true' title='블로그 게시물' type='Blog'/>
</b:section>
.....

잘라낸 위젯(가젯)을 붙여 넣습니다. 그러면 끝. ㅎㅎ.. 먼 길이었네요.

아! 여기서 주의 사항이 있습니다.
- 본인의 블로그 글 중에 하나라도 Label이 안 붙은 글이 있고, 블로그 기본 주소에서 글 목록을 보여주지 않을 수 있습니다.
- Label 중에 띄어쓰기나 특수기호가 들어간 Label은 목록을 만들지 못합니다. 역시나 현재 주소의 마지막 '/'이후에 라벨 이름에서 특수기호는 '%어쩌고' 하면서 이상하게 나오기 때문에 주소의 String과 라벨 이름이 틀리다는 결과를 냅니다. (그래서 제 G+로 시작하는 Post에는 작동을 안하져.. ㅋ)

네. 위에 사항만 잘 지키신다면. 뭐.. 작동하는데 문제 없을 겁니다. ㅎㅎ..
모두에게 많은 도움이 되었기를 바라며...

혹시 라벨을 이용해 카테고리를 만든 방법을 모르시는 분은
구글 블로그(블로거) 라벨을 이용한 카테고리. 을 보시기 바랍니다.