Script / CSS

CSS

G1sUtil.js

G1sBlogger.js

G1sNavigationList.js

G1sCode

Posts List


2012년 3월 1일 목요일

[Blogspot] 카테고리 만들기

이전 에는 간단하게 Blogspot에서 제공하는 Label 위젯을 이용해 카테고리를 대체했었는데요.
디자인이 마음에 들지 않아서 사용하지 않고 직접 카테고리를 만들었습니다.

글목록을 만든 것과 마찬가지로 Label을 이용했는데요.
블로그에서 Label의 고유주소가 블로그 주소 뒤에 '/search/label/{라벨이름}' 형태로 붙는 것을 이용해 a 태그에 해당 주소를 넣고 ul,li 태그를 이용해 리스트 형태로 정렬 하였습니다.
라템의 세계 블로그를 보니 먼저 똑같은 방법으로 구현을 하셨네요.

코드를 보시면...
<div id='category' class='G1s'>
 <ul>
  <li class='categoryl1'>
    <a id='category-tip' href='/search/label/tip?max-results=1'>Tip</a><ul>
   <li class='categoryl2'>
    <a id='category-blog' href='/search/label/blog?max-results=1'>Blog</a></li>
   <li class='categoryl2'>
    <a id='category-gp' href='/search/label/google%20%2B?max-results=1'>Google +</a></li>
   <li class='categoryl2'>
    <a id='category-plan' href='/search/label/plan?max-results=1'>Plan</a></li>
  </ul></li>
  <li class='categoryl1'>Study<ul>
   <li class='categoryl2'>
    <a id='category-euler' href='/search/label/euler?max-results=1'>Project Euler</a></li>
  </ul></li>
  <li class='categoryl1'>일상 이야기<ul>
   <li class='categoryl2'>
    <a id='category-trip' href='/search/label/여행?max-results=1'>여행</a></li>
   <li class='categoryl2'>
    <a id='category-chat' href='/search/label/잡담?max-results=1'>잡담</a></li>
  </ul></li>
 </ul>
</div>

<ul> 태그 안에 <li> 태그를 넣고 <li>태그안에 있는 <a>태그에 링크와 이름을 넣는 방식으로 만들면 됩니다.

하지만 여기에 추가로 해당 Label에 Post가 몇개있는지를 표시해 주고 싶어서 javascript를 첨부하였습니다.
<script>
 function Category(id, label, name){
  this.a = document.getElementById(id);
  this.label = label;

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.charset = 'utf-8';
  script.src = home + '/feeds/posts/summary/-/' + label + '?max-results=1&alt=json-in-script&callback=' + name +'.pong';
  document.getElementsByTagName('head')[0].appendChild(script);
  
  this.pong = function(cfeed){
   var cnt = cfeed.feed.openSearch$totalResults.$t;
   this.a.innerHTML = this.a.innerHTML + '(' + cnt + ')';
  };
 }
 
 var home = 'http://creatorhong.blogspot.com';
 var tip = new Category('category-tip','tip','tip');
 var blog = new Category('category-blog','blog', 'blog');
 var gp = new Category('category-gp', 'google%20%2B', 'gp');
 var plan = new Category('category-plan','plan','plan');
 var euler = new Category('category-euler', 'uler', 'euler');
 var chat = new Category('category-chat','잡담','chat'); 
 var trip = new Category('category-trip','여행','trip');
</script>

여기서 수정 해야할 것은 앞에 function Category 부분은 나두시고....
뒤에 var home 부터 뒤에 부분입니다.
var home = '' 에는 자신의 블로거 주소를 넣어주시면 되겠구요....

그 뒤에 나오는 것들이 카테고리에 Label 들입니다.
변수를 지정해 주시고... new Category() 안에 3개의 값이 각각 들어가야하는데요. 위에 html 태그와 변수하나를 보면서 설명 드리겠습니다.

<li class='categoryl1'><a id='category-tip' href='/search/label/tip'>Tip</a><ul>

위쪽에 html 태그들 중 tip태그로 보내는 코드입니다. 그리고 이에 상응하는 javascript 코드는

var tip = new Category('category-tip','tip','tip');

이것이구요.
색으로 짐작을 하셨겠지만..... Category 인자들을 하나씩 살펴보면....

첫번째 값은 Posts수를 넣길 원하는 <a> 태그의 id입니다.
a id='category-tip' 부분에 노란색 부분을 첫번째 인자로 넣어주시면 됩니다. 물론 이 id는 블로그 전체에 대해서 고유한 값이어야 하겠죠?

다음 두번째에는 Label 이름입니다.
href='/search/label/tip' 에 보시면 가장 마지막에 넣어주는 Label값이죠.

그리고 마지막으로 해당 변수의 이름을 넣어주셔야 합니다.
var tip = new Category() 처럼 Category라는 클레스를 변수에 할당해 주는데... feed 파싱을 위한 callback 함수에서 이 할당된 변수 이름을 알아야 원하는 변수 내의 함수를 호출하게 되어있습니다.

간단하게 예제의 색별로 넣어주시면 되구요....

한가지 단점? 이랄까... 제 블로그를 새로고침하거나 블로그내의 다른 곳으로 이동을 해 보시면 아시겠지만 원하는 Label마다 callback함수를 불러주게 되므로 기본 html 태그가 먼저 그려지고 나중에 뒤쪽에 숫자들이 생겨나는 것을 보시게 될 겁니다.

뭐.... 오히려 숫자가 차례대로 생겨나는 모습이 애니메이션느낌이 나서 더 좋을 수도 있을 것 같구요... ㅎ

나중에 보니 이상하게 script에서 라벨이름을 할때 대문자로 하면 문제가 발생하더군요.
라벨이름을 소문자나 오히려 한글로 하셔야 작동을 하네요.

댓글 113개:

  1. Blogger 꾸미기에 좋은정보 늘 감사합니다. 한기지 궁금한점이 있는데요. 저는 그 3번님의 소스를 이용해 카테고리를 만들었는데, 각 카테고리의 게시물들 몇개가 되었건 이 한페지에 주루룩 나와버려요. 왜 그런걸까요? G1님의 게시물들은 그렇지가 않고 1페이지씩 나오네요. 혹시나 해서 위 게시물의 맨위의 소스들을 복사해서 꾸며봐도 똑같은 현상입니다. 조언좀 구할수 있을까요?

    답글삭제
    답글
    1. 원래 label을 선택해서 들어가면 해당 label의 글이 모두 보이게 되있더라구요. 그래서 저도 나중에 수정한 건데 주소의 마지막에 '?max-results=1' 라고 수정을 해주시면 됩니다.
      댓글보고 위의 내용도 수정해서 고쳤네요 ^^

      삭제
    2. 감사합니다. 역쉬 Blogger 꾸미기의 선두주자 이십니다. ^^

      삭제
    3. 선두주자까지는... ㅎㅎ.. ^^

      삭제
  2. 먼저 이런 좋은 정보를 제공해주셔서 감사합니다!

    다름이 아니라 제 블로거에도 적용을 해 보았는데 script 부분을 그대로 따다가 설명하신 대로 수정했는데도 옆에 숫자가 나오질 않네요ㅠㅠ
    뭐가 문젤까요ㅠㅠ

    답글삭제
    답글
    1. 아. 이상하게 label명을 대문자로 하면 제대로 안되는 경우가 있더라구요. 한번 소문자로 바꾸고 해보세요. 그리고 이 코드로는 아마도 ALL은 적용이 안될겁니다. 음.... all을 꼭 하고 싶으시다면 코드를 약간 수정해야 하는데.... 흠...

      삭제
    2. if(label == '')
      script.src = home + '/feeds/posts/summary/?max-results=1&alt=json-in-script&callback=' + name +'.pong';
      else
      script.src = home + '/feeds/posts/summary/-/' + label + '?max-results=1&alt=json-in-script&callback=' + name +'.pong';

      스크립트 부분을 이렇게만 수정해 주셔도 될것 같네요.

      삭제
    3. 신경써주셔서 감사합니다ㅠㅠ
      덕분에 잘 적용했네요 ^ㅡ^
      정말 감사드려요!!!

      삭제
  3. 감사합니다. 덕분에 저도 달았습니다. ^^

    답글삭제
    답글
    1. 도움이 되었다니 다행이네요 ^^

      삭제
  4. 감사합니다.오늘 처음으로 올려주신 글 보고 몇시간동안 만들었어요..ㅠ.ㅠ
    근데 저도 포스트갯수가 표시되지 않아요..ㅠㅠ 댓글에 수정해서 올리면 될거라고
    해주셨는데 어느부분에다 넣어야 하는 건지..다시한번 부탁드려요.. 넘 몰라서..ㅠ.ㅠ

    답글삭제
    답글
    1. 밑에 script 부분을 추가를 안하신것 같네요. script가 count를 담당하고 있어서요... 위젯에 같이 추가해주시면 됩니다. 그리고 제 링크를 그대로 쓰신거 같네요.
      /search/label/euler?max-results=1
      이 링크가 반복해서 보이는..... 저 부분의 euler부분을 수정해 주셔야 제대로 동작을 할 겁니다.
      아 혹시 아직 태그를 추가를 안하신건가요? 흠.... 아무튼 script를 추가해주시면 작동 할겁니다. 물론 수정을 해야할 것은 수정을 해야......

      삭제
  5. 그리고 저는 왜 계속 끝에
    /li /ul /li /ul 이게 반복적으로 자꾸 입력이 되는지
    모르겠어요. 수정하면 또 생겨져 있구 또 생겨져 있구..ㅠ.ㅠ

    답글삭제
    답글
    1. 이건 태그를 제대로 안 닫아주셔서그런거에요. 제대로 태그는 li로 한번 열면 그에 맞는 /li로 닫아줘야 하는데 닫아주는게 없으니 블로거에서 자동적으로 아무위치에나 닫은 겁니다.
      <li class='categoryl1'><strong>Suits</strong><ul>
      <li class='categoryl2'>
      <a id='category-euler' href='/search/label/euler?max-results=1'>Suits</a></li>
      이런식으로 하셨던데 안에있는 <li class='categoryl2'>는 닫아주셨지만 밖에있는 <ul>태그와 <li class='categoryl1'><strong>Suits<태그를 닫는 ul, li는 입력을 안해주셔서 그렇습니다.

      삭제
    2. 감사해요. 이거 이제 어느정도 해결..-.- 스크립트도 시작해야.. 하...~

      삭제
    3. 지금보니 script 변수명으로 띄어쓰기를 쓰셨는데 script 변수에는 띄어쓰기를 사용하면 안됩니다. leather jackets 이 부분을 수정해 주셔야 할듯하네요. 중간에 '_'를 넣으셔도 되구요.

      삭제
    4. 헐..어제는 하도 질려서 손놓고 있다가 지금 와서 답글보고 수정했는데 되네요.. 너무너무 감사합니다ㅠ.ㅠ 부탁받고 하는거라 해봤는데 너무 감사합니다.

      삭제
    5. 지금보니 안되는거 같은데요?? '' 부분은 빼고 넣으셔야... ㅎㅎ;;

      삭제
    6. ㅎㅎ 처음에 _ 넣었는데 안되길래 혹시나해서'_'했는데 안되더라구요 이때 들어오셨나봐요..ㅎㅎ 민망! 근데 계속 안되요. 대신 다른거는 다 되더라구요..^^;;

      삭제
    7. 아, 3번째 인자만 바꾸는 거였네요.
      var leather_jackets = new Category('category-leather_jackets','leather_jackets', 'leather_jackets');
      이 부분을
      var leather_jackets = new Category('category-leather jackets','leather jackets', 'leather_jackets');
      이런식으로... 바꾸시면 됩니다.

      삭제
    8. 되요..!!!! 너무 친절하시네요..ㅠ.ㅠ

      삭제
    9. ㅎㅎ 수고하셨습니다 ^^

      삭제
    10. 한가지 더 궁금한게 있는데 & 표시도 그대로 쓰면 안되는 건가요?

      삭제
    11. 네 & 도 안돼요. ^^ 특수기호는 '_' 만 가능합니다.

      삭제
    12. 그렇군요 감사합니다..^^

      삭제
  6. 음.. 이거 맞춤설정 css추가에적용시키는건가요? ㅠㅠ.. 초보라..
    아니면 html에 추가하는건가요??

    답글삭제
    답글
    1. 블로그 설정하는데 들어가셔서 레이아웃에서 가젯추가를 누르시면 뜨는 가젯중에 HTML/JavaScript 를 선택하신다음에 거기다가 위의 코드를 수정하셔서 넣으시면 됩니다. ^^ http://creatorhong.blogspot.com/2012/02/blogger-layout.html 포스트를 보시면... 도움이 되실지도....

      삭제
    2. 앗!! 감사합니다 ㅠㅠ 어쩐지 css 로 하니 왼쪽 상단에 추가가 되더라구요 ㅎㅎ
      그러면 하나만 더여쭤봐두 될까요 ㅠㅠ

      상위카테고리 하위카테고리
      앞쪽 기호 없애는 방법은 있을까요~?
      포토샵으로 작업을해서 아이콘으로 바꿔놓고싶은데
      기호가 거슬려서요.. ㅠㅠ

      삭제
    3. li부분에 style="list-style:none;"를 추가해 주시거나 혹은 css에 아래내용을 추가해 주시면 됩니다.
      #categoryl1 {list-style:none;}
      #categoryl2 {list-style:none;}

      삭제
    4. 감사합니다! 많은 도움이 되엇어요^^
      혹시그런데 하나만 더 여쭤볼게요 ㅠㅠ

      위젯 타이틀
      예들을면 이번강좌는 자바스크립과 html 위젯을 추가하여 만든 카테고리잖아요
      이 위젠 타이틀 Category 라는 글씨를 이미지로 대체할 수 있나요~~?

      카테고리뿐만아니라 블로그어치브같은것도 알고싶네요ㅠㅠ

      삭제
    5. 기호 없애는것 css추가로는 안되구 li부분에 추가하는것이 되었는데
      같은 방법으로 위젯부분태그에도 여러가지 응용으로 추가를해봤는데 모두다 실패네요 ㅠㅠ

      삭제
    6. css로 안되나요? 흠.... 위젯의 타이틀은 따로 없애는 건 안될거에요.
      음.... 그냥 위젯 제목을 안 쓰고 한번 해보세요.

      삭제
    7. 아 css부분이 # 이 아니라 . 이었네요
      .categoryl1 {list-style:none;}
      .categoryl2 {list-style:none;}

      삭제
  7. 이글 제가 찻던건데 초보인데요 할수 있을까요 html 가젯펼쳐서 넣어주어야 하나요??
    어렵네요 전 그냥 라벨 주욱 펼쳐서 사용합니다 블로그보관함을 단축으로 하고 라벨을 펼쳐서 사용하는중입니다.보기는 안좋와도 찻기는 무지 편한데 너무 길어지니 좀 그러네요 ..

    답글삭제
    답글
    1. 제가 포스팅한 방법은 수동으로 일일이 하는 거라 귀찮을 수 있으나 원하는데로 Label를 배치할 수 있다는 장점이 있습니다.
      Label를 펼쳐서 사용하는 방법도 과거에 썼었는데 좋은 방법이긴 하더군요.
      위의 코드는 수정을 거쳐서 html 가젯에 넣어주셔야 합니다.

      삭제
  8. 외국애들은 블로그 보관함을 압축해서 누루면 주욱 펼쳐서 나오더라구요 무지편하게 사용하더라구요 한개는 블로그보관함이고 한개는 분명 라벨인데 글자랑 포스트 표시가 주욱 나옵니다
    정말로 저러케 만들고 싶은데 초보라 할수가 있서야지요 아무튼 조언좀 부탁드립니다.

    답글삭제
  9. http://graphicsfairy.blogspot.kr/ 이사이트 한번보세요 좌측하단은 블로그 보관함 이고 우측 중간에 브라우저 이미지가 있는데 라벨이 분명한데 이러케 사용을 하네요 구글 블로그 차제에서는 업는걸로 아는데 만든듯한데 전 이런게 블로그 자체에서 있는줄 알고 무지 헤맸습니다.

    답글삭제
  10. http://www.bloggersentral.com/2010/05/create-dropdown-menu-for-labels-widget.html
    여기한번 보세요 전 하다가 몇번 실패했는데 여기분이면 알거 같아서요 라벨을 저러케 사용하면 좋을듯 하네요 아시면 좀 가르쳐주시구요 날꼬박 세우고 지금 주식시장 보러갑니다

    답글삭제
    답글
    1. http://creatorhong.blogspot.kr/2012/06/blogger-label-dropdown-menu.html
      에서 블로깅 해봤습니다. 해당 url의 블로그에 설명이 자세하게 나와있어서 따로 추가할것도 별로 없네요.
      혹시라도 <b:widget id='Label1' locked='false' title='Labels' type='Label'>의 가장 마지막에 /를 남겨두셨거나 한건 아닌가 싶네요.

      삭제
  11. 라벨을 저러케 하고 싶은데 소스좀 주시면 안되겠습니까.
    라벨박스 만들어놓으니 무지 간단하고 좋으네요 전 미치겠습니다.

    답글삭제
  12. 라벨박스 어떻케 만들셨는지요 전 카테고리를 요기서 소스 얻어서 해보니 20가지되니은근 길어져서리 포기했구요 상단에 올려서 간단하게 헤매면서 만드는중입니다.구글 블로그 한국에 만을건데 좀처럼 찻기가 쉽지안네요 구글블로그 컴언어 좀 하는 사람들이면 무척이나 잼날듯 하더라구요 자주오게씁니다 라벨박스 소스좀 부탁 드리겠습니다.

    답글삭제
    답글
    1. 위에 댓글 단 포스트에 방법 적어두었는데 이미 보셨나보네요. 늦게 제때 답변 못드렸네요. ^^

      삭제
  13. 카테고리를 만든 후에 카테고리에 글을 옮기려면 어떻게 해야 하는지 모르겠습니다.

    답글삭제
    답글
    1. 위의 방식은 라벨을 이용한 방식입니다.
      글을 쓸때 라벨을 카테고리 명으로 지정하면 됩니다.
      덕분에 하나의 글을 여러 카테고리에 같이 올릴 수도 있구요.

      삭제
  14. 카테고리 명을 c++이라고 지정을 했는데요;;
    기호가 들어가서 그런지 라벨사용이 안되네요?
    기호를 빼야할까요?

    답글삭제
    답글
    1. 기호 빼니깐 (1) 카테고리에 글 몇개있는지 그거까지 다되네요 ㅎㅎ;;
      아... 백지에서 하려니까 힘드네요 ㅎㅎ 하지만 성공해서 기쁘다는

      삭제
    2. 네 특수기호는 잘 안될거에요. 성공하셨다니 다행이네요. ㅎ

      삭제
  15. 많은걸 보고 갑니다. 저도 언어에 대해서 주인장님처럼 해박해지고 싶네요.
    언젠간 복붙러에서 해방되고 싶습니다 ㅠㅠ

    답글삭제
    답글
    1. 해박하다니요... 아직 이리저리 시도해보면서 배우는 중입니다. ㅎ...

      삭제
  16. 처음 블로그를 만들어서 힘든데 이런 곳을 발견하다니!
    카테고리며 포스트 목록 구현에 큰 도움을 받았습니다.
    감사해요^^

    답글삭제
    답글
    1. 도움이 되었다니 다행이네요. ^^

      삭제
  17. 안녕하세요~ 연구해보면서 안되는 점이 있어서 질문 드립니다.

    하나하나 다 따라하면서 소스코드 까지 뒤져보면서 적용했습니다. 근데 블로그 카테고리 위젯내에서 *가 표시가 안되네요.
    혹시 몰라서 다른 html 입력창에 붙여넣기 하고 적용시켜보니 잘 구현 되는데, 이상하게 상위*항목이랑 하위*항목이 보이지가 않네요.
    (이해가 안가신다면 제 블로그로 와주세요~)

    방법이 없을까요?

    답글삭제
    답글
    1. 지금 보고왔는데 잘 적용 된 것처럼 보이는데 맞나요?
      아니라면 어느부분을 말하시는지 제가 이해를 잘못하고 있는 듯.... ㅎㅎ..

      삭제
    2. 제가 더 구체적으로 설명했었어야 했네요~.
      글씨 앞의 똥글뺑이, 그러니까 UL LI태그, categoryl1 categoryl2가 보이지 않네요
      혹시 몰라서 다른 곳에다가 html 구현했더니 정상적으로 보여지는데, 제가 왜 똥글뱅이가 실종했는지 신기하네요.
      아 참고로 **는 제가 임시땜빵한 거랍니다~

      삭제
    3. 혹시나해서 템플릿을 커스텀템플릿으로 바꿨는데 잘 나오네요
      아마 구글 제공 기본 템플릿이 뭔가 꼬인게 있나봅니다. 그럼 고맙습니다!

      삭제
    4. 아. 어디선가 css로 LI Tag의 Type를 없애서 그래요. 이럴때는 css를 선언해 주시면 됩니다.

      앞부분에

      <style type="text/css">
      .categoryl1{list-style-type: disc; }
      .categoryl2{list-style-type: circle; list-style-position:inside;}
      </style>

      이걸 추가해보세요. 더 자세히는 css 관련자료 찾아보시면 좋을 듯요 ^^

      삭제
    5. 우와^,^. 완벽하게 해결됬어요! 감사합니다!

      삭제
    6. 잘 되었다니 다행입니다. ^^

      삭제
  18. 너무 감사합니다. ^^ !!!!!!!!!!! 정말요!!!! ^^

    답글삭제
    답글
    1. ^^ 앗, 블로그 깔끔하고 예쁘네요.

      삭제
  19. 본문에서, '코드를 보시면..'하고 1-23줄 코드 있고 바로 아래에 'javascript를 첨부'하는 코드 잇는데요;;

    'javascript를 첨부'하는 코드는 전에 목록리스트 만들때처럼 http://creatorhong.blogspot.kr/2012/02/blogger-layout.html


    HTML/JavaScript 가젯을 추가 후 코드를 입력하는 것이겟죠?



    그런데 첫번쨰 1-23줄 코드는 템플릿->html편집을 열어 물론 자신의 카테고리명칭으로 바꿔서 아무데나 붙여넣어면 되는건가요? 아니면 HTML/JavaScript 가젯을 추가한 후 그기다 함께 붙여넣는건가요? 감사합니다^^



    답글삭제
    답글
    1. 아...,,,댓글보니까 이문제 잇는것같네요, 이건 잠시 답변안해주셔도 됩니다^^

      삭제
    2. ㅎㅎ,,, 댓글봣는데, 잘모르겟네요ㅠㅠ


      'javascript를 첨부'하는 코드는 HTML/JavaScript 가젯을 추가 후 코드를 입력하는게 맞는것 같지만요;;;

      '코드를 보시면..'하고 1-23줄 코드도 그 가젯에 같이 넣는건가요? 아니면 템플릿->html편집을 열어 물론 자신의 카테고리명칭으로 바꿔서 아무데나 붙여넣어면 되는건가요?

      감사합니다^^

      삭제
    3. 윗댓글에서 특수기호는 '_' 만 가능하다고 하셨는데요,,, '.'점도 안되나요?

      삭제
    4. ㅎㅎ,,,어디에 붙여넣는지 알앗어요ㅜㅜㅜㅜ

      전에처럼 HTML/JavaScript 가젯을 추가해 넣어니 되네요.

      삭제
    5. 아. 제가 요즘 블로그에 소홀했더니.... 답하는게 늦었네요. 죄송합니다. ㅎㅎ;;
      답을 찾으신듯 하니 다행이네요.

      삭제

  20. 잘모르겟네요ㅠㅠㅠ, 지원님의 'project euler'처럼 카테고리명에 띄워쓰기 있을때 어떻게 해야 글갯수 표시되는지요.,,, 컴맹이라 ㅋㅋ;;

    여기엔 제가 이해한 코드와 적용한 코드---->>

    http://hi5656.blogspot.kr/2012/11/blog-post_27.html

    답글삭제
    답글
    1. 시간이 되시면 가려쳐주새요ㅠㅠ

      삭제
    2. 예시를 들어서 풀어 설명하면...
      버튼이 있고, 동작이 있습니다.
      이 버튼과 동작은 따로 떨어져 있기때문에 이 둘을 연결하는 법칙이 있어야 하죠.
      여기서 버튼은 <a id='category-tip' href='/search/label/tip?max-results=1'>Tip</a> 이 부분이 되구요.
      이 부분의 이름은 id 값인 category-tip 가 됩니다. 색으로 치면 노란색 부분이죠.
      이 버튼에 해당하는 동작은 빨간색 부분입니다.
      각 포스트마다 라벨을 지정해 주셨으면... 그 라벨 값이 들어가는 거죠.
      그리고 두 버튼과 동작을 이어주는게 법칙의 이름이 녹색부분.

      카테고리 명에 띄어쓰기는 어떤 값이 들어가든 상관이 없습니다.
      단 라벨에 띄어쓰기가 들어갈 경우. %20를 넣어주시면 되구요.
      녹색부분에 띄어쓰기는 절대 들어가선 안됩니다.언더바(_) 나 다른 값으로 대체해 주시면 됩니다.

      설명이 잘 되었나 모르겠네요. ^^

      삭제
    3. 감사합니다^^

      그러니까 녹색과 노랑부분은 띄워쓰기와 변수명?이 겹치는거 주의하고,,, 임의 영문자로 똑같게 정해 주면 되는거죠,,, 혹시 이부분에 숫자와 영문자가 들어가도 되는가요?


      삭제
    4. 넵 맞습니다. ㅋ
      숫자가 들어가도 되는데.... 시작은 영문자로 해야할거에요. 숫자로 시작 하면 아마 안될듯요.

      삭제
    5. 와!!!!! 정말 감솨합니다ㅋㅋ




      삭제
    6. 아마 이 포스트들을 보고구글블로그 만드시는 분이 많아졋을듯 해요 ㅋㅋ 카테고리와리스트가없어서 고민하던 분들이 말이죠ㅜㅜ



      ^ 상위 카테고리가 하위보다 폰트사이즈를 크게 하거나 굵게 하려면 어떻게 하는건가요^^



      삭제
    7. 위에 보시면 상위 카테고리와 하위 카테고리를 구분하여 class 를 각각 다르게 주었는데요. 각 class. categoryl1와 categoryl2에 각각 원하는 CSS를 주면 됩니다. CSS관련해서는 검색을 해보시면 될 테구요.
      예를 들어 폰트 사이즈 관련 해서는..

      <style type="text/css">
      .categoryl1 {
      font-size: 15px;
      }
      .categoryl2 {
      font-size: 10px;
      }
      </style>

      와 같이 주시면 됩니다.

      삭제
    8. ~~ 정말 감솨합니다^^;;;;

      삭제
  21. 감사히 쓰고 있습니다 :D

    답글삭제
    답글
    1. 도움이 되셨다면 다행이네요~

      삭제
  22. 위글을 참조해서 제 블로거에 적용시켜보았는데요.
    카테고리란 까지는 잘만들어졌는데 카운트 적용이안되더라구요 ㅠ
    게시글에 태그까지 똑같이 첨부했는데도 갯수가 안나오네요.
    카테고리를 클릭하면 적용된 모든글이 안뜨고 최신게시글 한개만뜹니다.
    그런데 신기한건 그 게시글에 드가서 밑에 해당라벨을 누르면 모든글이 화면에 나오더라구요
    도와주세요~

    답글삭제
    답글
    1. 카운터는 다시 해봤는데 되더라구요 ㅎㅎ
      카테고리를눌렀을때 관련된 게시글을 모두 뜨게할수있는 방법없을가요?

      삭제
    2. max-results 의 값이 1로 설정되어 있어서 그렀습니다.
      max-results=1 의 값을 변경 또는 지워주시면 될 것 같네요. ^^

      삭제
  23. 글 감사히 잘 보았습니다!
    블로그에 적용시켜 보았는데.. 역시 카운트가 안나오네요.
    위의

    "그리고 마지막으로 해당 변수의 이름을 넣어주셔야 합니다.
    var tip = new Category() 처럼 Category라는 클레스를 변수에 할당해 주는데... feed 파싱을 위한 callback 함수에서 이 할당된 변수 이름을 알아야 원하는 변수 내의 함수를 호출하게 되어있습니다."

    부분의 문제인것 같은데..
    도와주시면 감사하겠습니다. :)

    답글삭제
    답글
    1. 블로그 또는 적용한 소스를 알려주신다면 더 도움이 될 것 같네요.
      위에 들었던 예시를 이용해 풀어서 설명 드리겠습니다.

      버튼이 있고, 동작이 있습니다.
      이 버튼과 동작은 따로 떨어져 있기때문에 이 둘을 연결하는 법칙이 있어야 하죠.
      여기서 버튼은 <a id='category-tip' href='/search/label/tip?max-results=1'>Tip</a> 이 부분이 되구요.
      이 부분의 이름은 id 값인 category-tip 가 됩니다. 색으로 치면 노란색 부분이죠.
      이 버튼에 해당하는 동작은 빨간색 부분입니다.
      각 포스트마다 라벨을 지정해 주셨으면... 그 라벨 값이 들어가는 거죠.
      그리고 두 버튼과 동작을 이어주는게 법칙의 이름이 녹색부분.

      녹색부분에는 아무것이나 중복만 되지 않게 넣어주시면 됩니다.
      노란색과 빨간색 부분은 태그에 적용한 부분과 맞춰서 넣어 주셔야 하구요.

      도움이 되셨는지 모르겠네요.. ^^

      삭제
  24. 안녕하세요...인터넷 검색 하다 여기까지 오게되었는데...저도 메뉴 옆에 갯수가 안나오네요..왜 안나오는지 답답하네요 ㅠㅠ 뭐가 문제 인걸까요? ㅠㅠ

    답글삭제
    답글
    1. 아래쪽의 세 줄을 다음과 같이 주시면 될 듯 하네요.
      var home = 'http://lovetorecord.blogspot.com';
      var review = new Category('category-review','product%20review','review');
      var trader= new Category('category-trader','trader%20joes', 'trader');

      위에 색으로 설명한 부분에서 녹색 부분을 같은걸로 맞춰주시지 않으셨군요.
      그리고 라벨에 띄어쓰기가 들어갈 겨우에는 띄어쓰기 부분을 %20으로 넣어주시는게 좋습니다.

      삭제
    2. 아..감사합니당~(_ _)
      희한하게...왜 제가 하면 안될까요 ㅋㅋㅋㅋ
      저..죄송한데 한가지만 질문 더...^^;
      label을 trader joe's 로 하고 싶으면 ' 이부분을 어떻게 살릴 수 있을까요?;;

      삭제
    3. trader%20joe%27s 로 해주시면 됩니다.
      블로그에서 라벨을 클릭하여 들어가면
      http://lovetorecord.blogspot.kr/search/label/trader%20joe%27s
      로 나오는데 여기 나오는 가장 마지막 / 뒤에 값을 쓰시면 됩니다. ^^

      삭제
    4. 너무 감사드립니다 ㅜㅜ

      삭제
    5. 넵. 즐거운 블로깅 되세요~

      삭제
  25. 저... 죄송합니다만... 위의 자바스크립트를 템플릿의 html에서 넣었는데... post숫자가 나오지 않을 뿐만 아니라 오류라고 뜨네요... 좀... 도와주시면 안될까요??

    b:section-contents id='sidebar-right-1'



    b:if cond='data:title != ""'
    script type='text/javascript'
    function Category(id, label, name){
    this.a = document.getElementById(id);
    this.label = label;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.charset = 'utf-8';
    script.src = home + '/feeds/posts/summary/-/' + label +'?max-results=1&alt=json-in-script&callback=' + name +'.pong';document.getElementsByTagName('head')[0].appendChild(script);

    this.pong = function(cfeed){
    var cnt = cfeed.feed.openSearch$totalResults.$t;
    this.a.innerHTML = this.a.innerHTML + '(' + cnt + ')';
    };
    }

    var home = 'http://woorimmy.blogspot.kr/';
    var tip = new Category('category-tip','나눔글','tip');
    var st = new Category('category-st','성경공부','st');
    var euler = new Category('category-euler', '복음', 'euler');
    var dan = new Category('category-dan','이단들','dan');
    /script



    라벨이름이 한글이라서 숫자가 안뜨나 했는데.....
    나중엔 이렇게 오류까지...

    XML을 구문분석하는 중 오류 발생(2033행, 72열): The entity name must immediately follow the '&' in the entity reference.

    이 부분인데..
    script.src = home + '/feeds/posts/summary/-/' + label +'?max-results=1&alt=json-in-script&callback=' + name +'.pong';document.getElementsByTagName('head')

    &alt를 entity code로 인식한건지....

    답글삭제
    답글
    1. 음.... 제가 해봤을때는 잘 되는데 이상하네요...
      아마도 위치때문에 그런게 아닐까 싶은데요.

      b:section-contents id='sidebar-right-1'

      이게 있는걸로 봐서 템플릿의 HTML 편집에 넣으신거 같은데요.
      그냥 레이아웃 가젯에다 넣어주심 됩니다.

      지금은 오류가 나셔서인지 소스를 빼놓으신 것 같네요..
      직접 보면 더 자세힐 알 수 있을 것 같은데...
      지금은 추측밖에 못하겠네요

      삭제
  26. 저 질문이 있는데요 ㅠ 작성자님이 주신 소스코드를 이용해서 한번 만들어 봤는데요
    옆에 숫자도 사라지고 greedy에 글도 올라가지 않는데 왜 그럴까요? ㅠㅠ tip이나 blog 작성자님이
    만드신 부분에 글을 올리면 잘 올라 가는데 뭐가 문제 인지 잘 모르겠습니다.

    답글삭제
    답글
    1. 설명만으로는 상황을 알기가 힘드네요. 소스나 적용되어 있는 블로그를 봐야 어떠한 상황인지 알 수 있을 것 같습니다.
      변수명이나 태그를 작성할 때 실수가 없었는지 확인도 필요할 것 같네요.

      삭제
  27. 감사합니다
    덕분에 카테고리를 만들었어요. 샘플로 포스팅을 해 봤는 데 실행을 하면 글자가 정열이 되지 않고 간격이 멋대로 벌어져요. 그리고 이미지에 테두리가 생기는 데 이유를 모르겠어요.
    카테고리글짜도 굵게하고 싶어요. 해법를 알려주시면 감사 하겠습니다. 보시고 다른 것도
    살펴봐 주시면 고맙겠습니다,

    답글삭제
    답글
    1. 블로그 주소를 알려주셔야 어떤 상황인지 알 수 있을것 같지만...
      위 카테고리 소스를 적용하였다고해서 포스팅의 글자가 정렬되지 않고 이미지에 테두리가 생기지는 않을겁니다.
      카테고리 글을 굵게 하고 싶으시다면 a 태그를 b태그로 감싸주시면 됩니다.
      위에 제 소슬에서 예를 들면

      <a id='category-tip' href='/search/label/tip?max-results=1'>Tip</a>
      의 양 끝에 <b>와 </b> 로 닫아주시면 됩니다.

      <b><a id='category-tip' href='/search/label/tip?max-results=1'>Tip</a></b>

      삭제
  28. 친절한 설명 감사합니다
    깜박했어요 부족한게 많습니다. 살펴봐 주시면 고맙겠습니다.
    http://sdsa129.blogspot.kr/

    답글삭제
    답글
    1. 현재 소스가 적용이 안되는 것은 변수에 한글을 써서 그렇습니다. 될수있으면 변수에는 영문과 숫자만 써주시기 바랍니다.

      예를 들어

      <a id='category-신축빌라 분양' href='/search/label/신축빌라 분양?max-results=1'>신축빌라 분양</a>

      var 신축빌라 분양= new Category('category-신축빌라 분양','신축빌라 분양','신축빌라 분양');

      같은 경우 var 다음에 한글이 들어갔는데 해당 부분을 영문으로 바꿔주시기 바랍니다. 영문은 의미없는 영문으로 달아도 가능합니다.

      그리고 category- 뒤에는 한글을 써주셔도 되지만 띄어쓰기는 자제해 주시기 바랍니다.
      다음과 같이 고치시면 될 것 같네요.

      <a id='category-신축빌라분양' href='/search/label/신축빌라 분양?max-results=1'>신축빌라 분양</a>

      var sdsa1= new Category('category-신축빌라분양','신축빌라 분양','sdsa1');

      그리고 블로그를 보니 네이버 블로그를 복사해오신 것 같네요.
      네이버 블로그를 블로거로 붙이는 과정에서 일부 스타일이나 이미지 링크에 문제가 있는듯 합니다.
      두 블로그가 서로 호환이 잘 되지 않을 수 있으니 세세한 것은 조절해가며 옮기는 수고를 하셔야 할 수도 있을 것 같네요...

      삭제
    2. 상세한 설명 너무 감사합니다.
      미안하지만 한가지 더 지도를 받고 싶습니다.
      하부카테고리가 밑으로만 길게 되어 있어서 까임새가 없습니다.
      3개씩 가로로 나열하면 훨씬 모양이 좋을 것 깉습니다.
      소스코드를 어떻게 하면 가로나열이 가능한지 가르쳐 주시면 감사하겠습니다.
      너무 귀찮게 해 드려서 미안해요. 좋은 밤 되세요.

      삭제
    3. 답변이 늦어 죄송합니다.
      가로로 나열하는 방법은 여러가지 방법이 있고, 디자인이 잘 나올찌는 직접 적용해봐야 할 것 같은데요.
      가장 간단하게는 Style 부분에
      categoryl1 에는 clear:left; 를 categoryl2에는 float:left 를 넣어주시면 가로로 정렬이 됩니다.
      또는 li 태그안에 a 태그 하나씩을 넣는 것이 아닌 3개씩의 a 태그를 넣어주시는 방법도 가능합니다.
      위의 두가지 방법으로는 아마도 투박하게 될 수도 있을 것 같은데요.
      좀 더 퀄리티를 원하신다면, CSS에 대한 학습 후 직접 적용해가면서 원하는 디자인을 만드셔야 할 것 같습니다.

      삭제
  29. 안녕하세요. GOne Hong님.
    포스팅 잘보고 배워갑니다.
    포스팅의 방법을 저의 블로그에 해봤습니다.
    다 잘 되는데 숫자가 안나와서 결국 문의 드립니다.
    생각으로는 맞게 수정한 것 같은데 눈 크게 뜨고 쳐다봐도 모르겠네요.ㅠ
    가르침 부탁드립니다.

    답글삭제
    답글
    1. 안녕하세요. Sweetravel Korea님.
      어떻게 안되는지는 적용된 걸 직접 봐야 알 수 있을 것 같네요.
      현재 적용되어있는 블로그 주소를 알려주시면 확인해보도록 하겠습니다.

      삭제
    2. koreafreeandeasy.blogspot.com 입니다.
      시간 내주셔서 감사합니다.^^

      삭제
    3. 5번째의
      var new = new Category('category-news','c-news','news');
      부분이 틀렸네요. 위 부분을
      var news = new Category('category-news','c-news','news');
      로 수정해주시면 될 것 같습니다. ^^

      참고로 new 는 javascript에서 이미 사용되고 있는 명령어라 변수로는 쓸수 없는 단어입니다.

      삭제
    4. 정말 감사합니다.
      왜 안되는지 세번이나 봤는데도 변수 틀린 것을 못잡아내어 번거롭게 해드렸네요.
      정말 좋은 지식 감사드립니다.^^
      멋진 하루 되세요~

      삭제