블로그스팟(구글블로그) 카테고리 넣는 방법


모두 알고있는데로 구글 블로그는 태그 말고는 게시물을 구분하는 방법이 없다...
너무 슬픈 이야기지 않은가? 몰론 태그(라벨)를 이용하여 1차원적인 방법으로 구현은 할수 있다.

하지만 해당 라벨이 많아질수록 가독성은 구려지고 큰 틀에 묶고 싶은데(마치 티스토리처럼)
하기가 힘들다 겁나 슬픈 이야기다. 들어오신 여러분들이 당장 해당 블로그의 카테고리를 보면 티스토리처럼 1차 2차 접는 방법이 있지 않은가? 오늘은 쉽게 만드는 방법과 노가다성으로 곶통 받는 방법 2가지를 알려주겠습니다.

    레이아웃으로 한방에 만들기(하수)

    해당 방법은 카테고리를 만드는 방법 중 가장 쉬운 방법입니다.
    블로그스팟 레이아웃
    블로그 관리자를 들어가서 레이아웃을 눌러주시면 위처럼 사이드바가 보입니다. 
    가젯 추가를 눌러봅시다. 

    블로그스팟 레이아웃 가젯 추가
    위처럼 뜰겁니다. 라벨이 있는곳으로 쭈욱 이동합시다
    블로그스팟 레이아웃 라벨 추가
    제목(태그)부분은 카테고리 또는 메뉴라고 이름 넣고(딴것도 괜찮아용) 입맛에 맞게 한뒤 저장을 눌러준 다음 맨 아래

    블로그스팟 레이아웃 저장

    눈깔 옆에 있는 디스크를 꾸욱 눌러줍시다. 저게 레이아웃 최종 저장입니다.

    링크 목록을 이용한 카테고리 만들기(중수)

    들어가는 방법은 위 라벨과 똑같다.
    블로그스팟 레이아웃 가젯 추가
    가젯 추가에서 링크 목록까지 쭈욱 내려준다.

    블로그스팟 레이아웃 라벨 추가
    그 후 내가 작성한것 처럼(이 블로그의 홈 카테고리 방식입니다.) 노가다식으로
    작성해주자
    _는 위 링크의 하위로 둔다는 의미입니다.(#는 공란이라는 뜻)
    _ _ 2개면 _의 하위카테고리
    이렇게 노가다해서 만들시면 됩니당 



    HTML를 활용한 카테고리 만들기(고수)

    어... 이거는... 아...앙대 어려워! 노가다가 심해! 는 사실 조금 공부하셨으면 가장 쉬우실거에요(아마두?)

    위처럼 똑같이 따라가셔서 가젯 추가
    블로그스팟 레이아웃 가젯 추가
    HTML/자바스크립트를 눌러주세요!

    아래는 제 블로그 카테고리 코드입니다. 참고하세용

    파랑색이 여러분들의 블로그 주소에 맞게 수정해야 될 내용입니다.


    <div id='category' class='Categories'>
       <li class='cate'>
          <a id='cate-all' href='https://tistoryfuckyou.blogspot.com'>All </a>
       </li>
       <li class='cate'>
          <a id='category-blogg' href='/search/label/블로그이야기?'>블로그이야기</a> <--태그(라벨)이름을 넣어주세요-->
          <a href='javascript:void(0)' onclick="this.innerHTML=(this.nextSibling.style.display=='none')?'▲':'▼';this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none'";>▼</a><div style='display:none'>
                <ul>
               <li></li>
               <li><a id='deta-401' href="/search/label/일기?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;일기 </a></li><--태그(라벨)이름을 넣어주세요-->
                   <li><a id='deta-402' href="/search/label/블로그꿀팁?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;블로그꿀팁 </a></li>
       </ul></div></li>
       <li class='cate'>
          <a id='category-정보_경제_법률_과학글' href='/search/label/정보_경제_법률_과학글?'>정보_경제_법률_과학글</a><--태그(라벨)이름을 넣어주세요 이건 1차 카테고리입니다.-->
          <a href='javascript:void(0)' onclick="this.innerHTML=(this.nextSibling.style.display=='none')?'▲':'▼';this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none'";>▼</a><div style='display:none'>
                <ul><--여기 부분은 접고 펼치는 기능입니다.-->
               <li></li>
                   <li><a id='deta-101' href="/search/label/정보글-경제?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-경제 </a></li><--태그(라벨)이름을 넣어주세요(2차 카테고리), 추가로 위 deta-101는 해당 변수를 부여해준겁니다.-->
                   <li><a id='deta-102' href="/search/label/정보글-과학?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-과학 </a></li>
                   <li><a id='deta-103' href="/search/label/정보글-사회?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-사회 </a></li>
                   <li><a id='deta-104' href="/search/label/정보글-생물?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-생물 </a></li>
                   <li><a id='deta-105' href="/search/label/정보글-세계사?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-세계사 </a></li>
                  <li><a id='deta-106' href="/search/label/정보글-역사(국내)?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-역사(국내) </a></li>
                  <li><a id='deta-107' href="/search/label/정보글-우주?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-우주 </a></li>
                  <li><a id='deta-108' href="/search/label/정보글-IT?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-IT </a></li>
                </ul>
             </div>
       </li>
       <li class='cate'>
          <a id='category-정보글_생활팁' href='/search/label/정보글_생활팁?'>정보글_생활팁</a>
          <a href='javascript:void(0)' onclick="this.innerHTML=(this.nextSibling.style.display=='none')?'▲':'▼';this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none'";>▼</a><div style='display:none'>
                <ul>
               <li></li>
               <li><a id='deta-201' href="/search/label/정보글-건강?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-건강 </a></li>
                   <li><a id='deta-202' href="/search/label/정보글-문화?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-문화 </a></li>
                   <li><a id='deta-203' href="/search/label/정보글-사이트?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-사이트 </a></li>
                   <li><a id='deta-204' href="/search/label/정보글-생활?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-생활 </a></li>
                  <li><a id='deta-205' href="/search/label/정보글-음식?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-음식 </a></li>
                  <li><a id='deta-206' href="/search/label/정보글-음악?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-음악 </a></li>
                  <li><a id='deta-207' href="/search/label/정보글-의학?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-의학 </a></li>
                  <li><a id='deta-208' href="/search/label/정보글-후방주의?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-후방주의 </a></li>
                  <li><a id='deta-209' href="/search/label/정보글-패션?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-패션 </a></li>
                  <li><a id='deta-210' href="/search/label/정보글-미용?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;정보글-미용 </a></li>
                </ul>
             </div>
       </li>
       <li class='cate'>
          <a id='category-SCP' href='/search/label/SCP만화?'>SCP만화</a>
          <a href='javascript:void(0)' onclick="this.innerHTML=(this.nextSibling.style.display=='none')?'▲':'▼';this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none'";>▼</a><div style='display:none'>
                <ul>
               <li></li>
               <li><a id='deta-301' href="/search/label/안전(Safe)?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;안전(Safe)</a></li>
               <li><a id='deta-302' href="/search/label/유클리드(Euclid)?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;유클리드(Euclid)</a></li>
               <li><a id='deta-303' href="/search/label/케테르(Keter)?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;케테르(Keter)</a></li>
    <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 + '?&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 + ')';
      };
    }
    function TotalPostCnt(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/?&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 = 'https://tistoryfuckyou.blogspot.com';
    var postAll = new TotalPostCnt('cate-all','All','postAll');
    var cate1 = new Category('category-정보_경제_법률_과학글','정보_경제_법률_과학글','cate1');
    <--cate1 선언은 아래 2차 카테고리까지 묶기 위한 방법입니다.-->
    var deta101 = new Category('deta-101','정보글-경제','deta101');
    <--deta는 위에 선언해준 변수와 같게 해주시고 한글은 라벨 이름으로 수정해주세요-->
    var deta102 = new Category('deta-102','정보글-과학','deta102');
    var deta103 = new Category('deta-103','정보글-사회','deta103');
    var deta104 = new Category('deta-104','정보글-생물','deta104');
    var deta105 = new Category('deta-105','정보글-세계사','deta105');
    var deta106 = new Category('deta-106','정보글-역사(국내)','deta106');
    var deta107 = new Category('deta-107','정보글-우주','deta107');
    var deta108 = new Category('deta-108','정보글-IT','deta116');
    var cate2 = new Category('category-정보글_생활팁','정보글_생활팁','cate2');
    <--위와 동일합니당-->
    var deta201 = new Category('deta-201','정보글-건강','deta201');
    var deta202 = new Category('deta-202','정보글-문화','deta202');
    var deta203 = new Category('deta-203','정보글-사이트','deta203');
    var deta204 = new Category('deta-204','정보글-생활','deta204');
    var deta205 = new Category('deta-205','정보글-음식','deta205');
    var deta206 = new Category('deta-206','정보글-음악','deta206');
    var deta207 = new Category('deta-207','정보글-의학','deta207');
    var deta208 = new Category('deta-208','정보글-후방주의','deta208');
    var deta209 = new Category('deta-209','정보글-패션','deta209')
    var deta210 = new Category('deta-210','정보글-미용','deta210');;
    var cate3 = new Category('category-SCP','SCP만화','cate3');
    var deta301 = new Category('deta-301','안전(Safe)','deta301');
    var deta302 = new Category('deta-302','유클리드(Euclid)','deta302');
    var deta303 = new Category('deta-303','케테르(Keter)','deta303');
    var cate4 = new Category('category-blogger','블로그이야기','cate4');
    var deta401 = new Category('deta-401','일기','deta401');
    var deta402 = new Category('deta-402','블로그꿀팁','deta402');
    </script>
    </ul></div></li></div>
    만든 카테고리 완성본


    끝입니다.
    해당 내용은 문서로 열고서 복사 불러넣기해서 이용해보세요!


    더 있는지 모르겠지만 그 이상은 전문가의 영역이에용! (아마두?)

    Next Post Previous Post
    No Comment
    Add Comment
    comment url