[구글 블로거] 카테고리 목록(접기기능 포함) 만드는법

구글 블로거는 카테고리기능이 없다.

그래서 태그를 이용하여 카테고리를 구현하여야 한다.

HTML 수정을 조금 하면 가능하다

오른쪽과 같은 카테고리를 만드는 것이 목적이다.

[레이아웃]의 사이드바 중에서 [가젯 추가]를 누른다.

HTML/JavaScript를 누른다.

코드를 넣고 저장 버튼을 눌러준다.

이제부터는 소스코드를 설명할것이다.

큰카테고리 코드이다.

<div id='category' class='Kana1'>
# 카테고리를 만들기 시작한것이다.
   <li class='cate'>

# 전부를 아우르는 카테고리
      <a id='cate-all' href='https://ejmlf.blogspot.com'>All </a>

# id의 cate-all 블로그 주소를 담고 카테고리를 만들것이다.
# href 에는 내 주소를 넣어주고
# All은 블로그에 보이는 텍스트이다.
   </li>

이제 본격적인 접기기능이 포함된 코드를 설명하겠다
   <li class='cate1'>
# 큰 빨간 박스는 큰 카테고리 하나이다.

      <a id='Intro' href='/search/label/Intro?'>Intro</a>
# Intro는 이후에 호출할 이름이고
# href에 설정할 태그명주소를 정해야한다.
# Intro는 화면에 보일 이름이다.

      <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>
<ul><a id='deta-101' href="/search/label/블로그소개?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;블로그소개 </a></ul>
</ul>
</div>
</li>
# 잘 안보여서 정리를 조금 했다.
# 이부분이 카테고리안에 리스트를 넣는 메뉴이다.
# id는 위에 카테고리가 cate1이니 deta101로 설정한다.
# ul로 만들어야 앞에 점이 안생긴다.
# href는 카테고리 주소를 넣어준다.
# &nbsp;는 공백이다.

두번째 카테고리 코드이다.

사실 잘 모르겠다....
숫자를 세주는 거라는데..

var home = 'https://ejmlf.blogspot.com/';
# 내 주소를 써주고

var postAll = new TotalPostCnt('cate-all','All','postAll');
# 위에 li 에 있던 postAll 넣어준다.
# 위에 a id 에 있던 cate-all 넣어준다.
# All <a></a>사이에 있는 텍스트를 넣는다.
# var에 썼던 postAll을 쓴다

var cate1 = new Category('Intro','Intro','cate1');
var deta101 = new Category('deta-101','블로그소개','deta101');
# var은 id 에 있는 deta101
# a id - deta-101
# <a><a/> 사이에 있는 블로그소개 텍스트를 넣는다.
# deata101은 앞에 있는것
var deta102 = new Category('deta-102','꼬꼬마소개','deta102');

글쓰기에 태그를 걸어주면 잘 두개의 태그에 걸려서 목록에 카운트 됩니다.



정확한 코드는 출처링크를 타고 들어가면 원본코드가 있다.


출처 :  https://kinanadel.blogspot.com/2017/09/blogger-category.html