Script / CSS

G1sUtil.js

G1sBlogger.js

G1sNavigationList.js

G1sCode

Posts List

2011년 8월 8일 월요일

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


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

====================================================
블로거로 이사온 지 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에는 작동을 안하져.. ㅋ)

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

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

댓글 15개:

  1. 감사합니다. 상당히 유용하겠습니다!

    답글삭제
  2. 조금 아쉬운것은 저는 라벨을 몇개씩 중복지정한다는 점인데.. 아쉽군요 ㅠㅠ;

    답글삭제
  3. 중복지정하는데도 크게 문제가 없게 만들어졌을 겁니다.
    문제는 중복지정한 모든 태그가 위에서 명시했던 특수기호가 없어야 한다는 조건을 지켜야한다는 문제가 잇습니다.

    답글삭제
  4. 저도 구글 블러그 사용중인데.. 전 몇번 읽어봐도 모르겠습니다. ㅡ.,ㅡ;; 계속 도전해봐야 봐야겠네요.. 감사합니다.

    답글삭제
    답글
    1. 음... 약간 불안정한 코드이기때문에 문제가 발생할 수도 있습니다. 수정을 해야하는데 요즘 바뻐서 블로그는 잘 관리를 안하게 되네요....

      삭제
  5. 잘 읽었읍니다.너무 어렵지만 도움이 되어요.그런데 님 블로그 처럼 맨위 페이지 만드는건 어떻게 하는 건가요??

    답글삭제
    답글
    1. 아... 지금 이 기능 몇달 방치하다가 이제 수정하고 있는 중인데... 내일이면 좀더 개선 된 버전으로 수정 될 것 같습니다. 지금도 보시면 글목록이 약간 수정되어있는데요. 내일 더 수정할 계획이라서요. 완료된 후에 블로그 업데이트 하겠습니다.
      그리고... 맨위 페이지는... 구글에서 제공하는 위젯 중에 페이지 라는 위젯을 제일 상단 레이아웃에 위치시키기만 하면 됩니다.

      삭제
    2. 새로운 코드로 업데이트하였습니다.
      http://creatorhong.blogspot.com/2012/02/blogger-label-posts-list.html

      삭제
  6. 저도 구글로 옮기는 중인데 무쟈게 어렵네요
    뭐가뭔지 모르겠습니다.

    답글삭제
    답글
    1. 네.. blogspot 가 국내 포탈 블로그에 비해 뭔가 블로거를 위해 제공하는게 부실한 느낌이 들기도 합니다.

      삭제
  7. 예전에 질문드렸던 사람입니다..
    카테고리별 리스트 목록을 늘리고 싶다고 물어봤었는데..
    어느 블로그 스킨을 스느냐에 따라 목록을 못늘릴수도 있다고 하셨잖아요..

    그럼 목록을 늘릴려면 어떤 스킨을 사용하는게 좋나요??

    답글삭제
    답글
    1. 죄송합니다 예전 질답 내용이 기억이 안나네요;;;;
      제가 어떤 의도로 그런 답변을 했었는지도..;;;
      댓글들 찾아봤는데 어떤 댓글인지 모르겠네요....
      카테고리별 리스트 목록을 늘리는거는 스킨의 영향을 안받을 것 같은데;;;;
      왜 그렇게 답을 했을까요... 제가..

      삭제
  8. 정말 많은 도움이 되었네요 감사합니다~

    답글삭제