구글 블로그 카테고리 적용하기 (Blogger Category, 접기기능) ~ Kanadel의 블로그!

2017년 9월 16일 토요일

구글 블로그 카테고리 적용하기 (Blogger Category, 접기기능)

(완성하여 현재 블로그에 적용중인 카테고리)

구글 블로그를 꾸며 나가는데 처음 만난 장벽은 카테고리 기능이였습니다

항상 블로그를 운영할땐 카테고리 메뉴를 기본으로 블로그 목적이나 내용들을 채워나갔었던 경험이 있어서 그런지 카테고리가 없는 메인 화면을 보면 답답함을 느꼈습니다

안타깝게도 구글 블로그는 기본적으로 카테고리 기능만을 담당하는 가젯을 제공하지 않습니다 제가 검색하여 본 다른 구글 블로그의 카테고리들도 전부 운영자가 스크립트를 넣어 만든 커스텀이거나 유료로 제공된 가젯들이었습니다

구글 블로그의 포스트들은 태그들을 달게 하여 태그를 기준으로 검색이나 관리 기능을 제공하고 있으며 기본 가젯 중에선 이러한 기능을 이용한 태그 리스트를 계시하고 포스트를 조회해주는 가젯이 있습니다

이러한 태그 기능을 이용하여 카레고리 메뉴를 구현하도록 하겠습니다

카테고리 기능을 표현할 가젯을 추가하기 위하여 HTML/JavaScript 가젯을 추가합니다

추가한 가젯을 원하는 곳에 위치 시킵니다

가젯의 이름을 달아줍니다

</li>

</div>

가젯 내용에 들어갈 HTML 소스 입니다

<div>태그 하나로 이루어져 있으며 <li>태그를 통해 한 목록씩 작성합니다

앵커 태그는 모든 포스트 조회 화면으로 링크되었습니다

위의 소스를 내용에 적용을 하면 다음과 같은 결과가 나옵니다

카테고리 가장 큰 범주인 All이 만들어졌습니다

All 범주를 클릭하면 다음과 같이 모든 포스트들의 게시 시간 순으로 나열된 결과를 볼 수 있습니다

같은 방법으로 두번째 범주인 IT 이야기를 만들어 보겠습니다

</li>

</li>

</div>

All과 마찬가지로 <li>태그 추가하였으며 앵커 태그는 All과는 다르게 'IT 이야기' 태그가 있는 포스트만 조회하도록 하였습니다

위의 소스를 내용에 적용을 하면 다음과 같은 결과가 나옵니다

All 다음으로 IT이야기란 범주가 생성 되었습니다

클릭하면 포스트 중에 'IT 이야기'란 태그만 있는 포스트들의 게시 시간 순으로 나열된 결과를 볼 수 있습니다

이런 방법으로 1차 범주들은 만들어 나갈수 있습니다

이번엔 IT 이야기 범주에 소속된 2차 범주들을 만들어 보겠습니다

</li>

<ul>

<li><a id='deta-103' href="/search/label/Python?">Python </a></li>

<li><a id='deta-104' href="/search/label/Windows?">Windows </a></li>

<li><a id='deta-105' href="/search/label/Linux?">Linux </a></li>

</ul>

</li>

</div>

IT 이야기 <li>태그 안에 새로운 <ul>태그를 통해 공간을 내어 2차 범주를 생성하였습니다

2차 범주들은 1차 범주와 똑같은 <li>태그로 작성되었습니다

위의 소스를 내용에 적용을 하면 다음과 같은 결과가 나옵니다

2차 범주들 위치가 좀 엉망이지만 이렇게 2차 범주들이 생성되었습니다

2차 범주들은 스타일을 통해 간격을 주거나  를 통해 강제 간격을 줌으로 해결할 수 있습니다

2차 범주들도 마찬가지로 클릭하면 각각의 태그들을 가진 포스트들만 조회된 결과를 보실수 있습니다

위 두가지 만으로 카테고리 기본은 완성되지만 이정도면 정렬된 태그 가젯 수준 정도로 보일 정도로 허전하죠

이번엔 위와 같이 하위 범위를 숨기고 보여주는 토글 버튼 기능과 범주에 속한 포스트 갯수를 표시하는 기능을 추가해보도록 하겠습니다

</li>

<ul>

<li><a id='deta-103' href="/search/label/Python?">      Python </a></li>

<li><a id='deta-104' href="/search/label/Windows?">      Windows </a></li>

<li><a id='deta-105' href="/search/label/Linux?">      Linux </a></li>

</ul>

</li>

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 + ')';

};

}

var home = 'https://kinanadel.blogspot.com';

var cate1 = new Category('category-IT','IT 이야기','cate1');

var deta101 = new Category('deta-101','C#','deta101');

var deta102 = new Category('deta-102','Java','deta102');

var deta103 = new Category('deta-103','Python','deta103');

var deta104 = new Category('deta-104','Windows','deta104');

var deta105 = new Category('deta-105','Linux','deta105');

var deta106 = new Category('deta-106','IT미분류','deta106');

</script>

</div>

범주에 속한 포스트 갯수를 표현한 기능을 추가한 소스 입니다

HTML 태그쪽은 그대로이며 아래 스크립트가 추가되었습니다

Category 함수는 블로그에 해당 태그가 있는 포스트 갯수를 구하여 표시해주는 기능을 가지고 있습니다 해당 함수를 사용하는 방법은 위 소스와 같이 하시면 됩니다

위 소스를 적용한 결과는 다음과 같습니다

포스트 갯수가 이쁘게 표현되었습니다

❃제가 전체 포스트 갯수 표현하는 과정을 빼먹어서 추가합니다

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 postAll = new TotalPostCnt('cate-all','All','postAll');

</script>

스크립트에 다음과 같은 함수를 추가합니다

기능은 기존의 Category 함수 기능가 거의 같습니다만 특정 태그로 검색하는 기존과 달리 블로그내 모든 포스트 갯수는 구하는 걸로 변경된 함수 입니다

</li>

<ul>

<li><a id='deta-103' href="/search/label/Python?">      Python </a></li>

<li><a id='deta-104' href="/search/label/Windows?">      Windows </a></li>

<li><a id='deta-105' href="/search/label/Linux?">      Linux </a></li>

</ul>

</div>

</li>

</div>

하위 범주를 보여주고 숨기는 기능이 있는 토글 버튼을 추가한 상태 입니다

1차 범주인 IT 이야기 다음에 앵커를 추가하였으며 해당 앵커는 뒤에 오는 <div>태그의 디스플레이 스타일을 변경시킴으로 보여주고 숨기는 기능을 표현하였습니다

위 소스를 적용한 결과는 다음과 같습니다

'▲'와 '▼' 문자모양의 버튼으로 하위 범주 숨김 기능이 구현되었습니다

이제 이 두가지 기능을 모두 합치면 카테고리 소스가 완성됩니다

</li>

<ul>

<li><a id='deta-103' href="/search/label/Python?">      Python </a></li>

<li><a id='deta-104' href="/search/label/Windows?">      Windows </a></li>

<li><a id='deta-105' href="/search/label/Linux?">      Linux </a></li>

</ul>

</div>

</li>

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://kinanadel.blogspot.com';

var postAll = new TotalPostCnt('cate-all','All','postAll');

var cate1 = new Category('category-IT','IT 이야기','cate1');

var deta101 = new Category('deta-101','C#','deta101');

var deta102 = new Category('deta-102','Java','deta102');

var deta103 = new Category('deta-103','Python','deta103');

var deta104 = new Category('deta-104','Windows','deta104');

var deta105 = new Category('deta-105','Linux','deta105');

var deta106 = new Category('deta-106','IT미분류','deta106');

</script>

</div>

이제 카테고리 기능 구현은 모두 완료 되었으며 태그 사용법만 남았네요

구현한 카테고리 가젯을 활용하기 위해선 모든 포스트들은 작성시 알맞은 태그를 달아야 하며 겹치지 않아야 합니다.

해당 포스트를 예로 들면 저는 이 포스트를 'IT 이야기'란 1차 범주안에 '기타'란 2차 범주에 소속 시키고자 합니다 그러면 해당 포스트는 다음과 같은 태그를 달아줘야 합니다

(1차 범주인 'IT 이야기'를 추가했고 2차 범주인 'IT미분류'를 추가했습니다)

이로써 구글 블로그 카테고리 가젯 구현은 완료되었습니다 ^^

유료 템플릿에서 제공하는 유료 가젯들도 아마 이렇게 카테고리 구현하지 않았을까요?..

구현은 했지만 추후 카테고리 변경을 해야할 경우 HTML 태그들과 스크립트를 수정해야 하는 어마어마한 불편함이 남아 있습니다

대신 시간과 공을 들인다면 상상할수있는 모든 기능들을 추가할 수 있다는 장점은 있겠습니다.

물론 저도 스타일 찾아 변경하는데 부담을 느껴 뛰어쓰기나  를 통한 땜빵을 했습니다

이번 포스트는 여기서 마치겠습니다

오타나 잘못된 내용, 질문은 항상 확인하니 언제든 남겨 주세요 ^^

읽어 주셔서 감사합니다 😊

블로그 기술에 관련한 다른 포스트 보러가기

익명2017년 9월 27일 오전 1:13
정말 감사합니다!!
답글삭제
답글
Unknown2017년 12월 9일 오후 4:45
작성자가 댓글을 삭제했습니다.
답글삭제
답글
익명2018년 8월 17일 오후 2:30
작성자가 댓글을 삭제했습니다.
답글삭제
답글
projung2018년 8월 17일 오후 2:32
자료 감사합니다. 덕분에 큰 도움이 되었습니다.
답글삭제
답글
최경준2018년 9월 9일 오전 4:13
감사합니다 ^^ 잘 쓰겠습니다..
답글삭제
답글
해해보이2018년 10월 26일 오후 5:34
감사합니다. 도움이 많이 됫어요
답글삭제
답글
Dung2018년 12월 7일 오후 1:32
감사합니다~ 정리가 정말 잘되있네요!!
답글삭제
답글
Lovin'2018년 12월 8일 오후 5:11
감사합니다. 덕분에 카테고리를 만들었어요!^^
답글삭제
답글
익명2019년 1월 15일 오후 6:18
소중한 정보 감사합니다..
답글삭제
답글
g2019년 2월 27일 오후 12:54
감사합니다ㅎㅎ 도움 많이 됐습니당!!
답글삭제
답글
노랑올리브2019년 4월 18일 오전 11:34
코딩 천재시군요! 무료템플릿을 다운받아 적용시켰는데, 작성한 글을 해당 템플릿 내 카테고리로 어떻게 변경할 수 있을까요?ㅠㅠ
답글삭제
답글
익명2019년 5월 13일 오후 5:03
블로그 세팅 중인데, 덕분에 카테고리 커스터마이징 끝냈습니다. 정말 좋은 글 감사드립니다~!
답글삭제
답글
Kanadel2019년 6월 10일 오후 11:07
세상에 정말 좋은 정보를 제공하시는군요. 도움이 되어 너무 좋습니다. 감사합니다
답글삭제
답글
paulryu2019년 7월 23일 오후 10:40
작성자가 댓글을 삭제했습니다.
답글삭제
답글
paulryu2019년 7월 23일 오후 10:42
안녕하세요
html코드 적용해도 bulletpoint가 뜨지를 않아서 제가 잘못한 줄 알고 kanadel님의 코드를 그대로 실행해봤는데 여전히 bulletpoint가 뜨지를 않더라고요. 그리고 또한 토글버튼도 나타나지 않아요.
이러한 문제는 어떻게 해결할 수 있을까요?

저는 SeoHub라는 테마를 사용하고있습니다.
답글삭제
답글
Viking2019년 8월 20일 오전 1:00
안녕하세요 블로그에 카테고리 만들기 검색해서 찾아왔어요.
일단 좋은 정보 너무나도 감사드립니다!
그런데 따라하다보니 문제가 있어서 질문드려요..
코드 꼼꼼히 보면서 따라해 봤는데 2차범주 앞에도 1차범주와
마찬가지로 점이 생기더라구요. ex) ㆍUnity << 이런식으로요
Kanadel님 처럼 2차범주앞에 깔끔하게 아무것도 없엇으면
좋겠는데 방법을 몰라서 질문드려요 ㅠㅠ

참고로 테마는 기본으로 제공되는 여행테마 쓰고있습니다..
답글삭제
답글
익명2019년 8월 22일 오전 2:17
작성자가 댓글을 삭제했습니다.
답글삭제
답글
익명2019년 8월 22일 오전 2:59
구글 블로그를 시작하려고 만들었는데 카테고리가 없어서 정말 당황했어요.. 근데 이렇게 깔끔하게 설명해주셔서 정말 감사드려요! 덕분에 손쉽게 카테고리 정리했어요ㅠㅠ 정말 감사합니다!
답글삭제
답글
체리오리2019년 9월 25일 오후 8:35
블로거 시작하려고 하는데~ 친절하게 잘 설명해주셔서 감사해요~^^
답글삭제
답글
체리오리2019년 9월 27일 오후 6:39
몇 번의 시행착오 끝에 드디어 성공했어요~ 뿌듯하네요 ㅎㅎㅎ 감사합니다~!
답글삭제
답글
희아2019년 10월 16일 오후 2:40
감사합니다. 잘쓰겠습니다!^^
답글삭제
답글
ggachi2019년 11월 7일 오전 10:09
안녕하세요 덕분에 잘 사용할 수 있을 것 같습니다! 근데 하나 여쭤보고 싶은게 있는데, C#이라는 태그를 한것은 인식을 못하는 것같네요. 특별한 이스케이프 문자 같은것을 넣어주어야 하나요? 작성자님 그림에도 초반에는 C# 옆에 (0) <- 이게 없는 것으로 보아 같은 시행착오를 겪으신거 같은데, 알려주시면 감사하겠습니다 ㅠㅠ
답글삭제
답글
ㅇㅇ2019년 12월 9일 오후 2:00
블로그 꾸미는데 큰 도움이 되었습니다

감사합니다~
답글삭제
답글
익명2019년 12월 25일 오전 1:09
감사합니다~
답글삭제
답글
misso2019년 12월 26일 오후 5:30
안녕하세요! 글이 아주 많은 도움이 되어서 열심히 카테고리를 꾸미고 있습니다. 그런데 (0) 이렇게 글 갯수 표시되는게 첫번째 카테고리에 모두 몰리는데 뭐가 문제일까요?!
답글삭제
답글
육뇽2020년 2월 10일 오후 11:12
좋은 자료 감사합니다
답글삭제
답글
익명2020년 2월 28일 오후 4:41
정말 좋네요. 감사합니다.
답글삭제
답글
뚱딴지2020년 3월 27일 오후 10:12
시작하려는데 많은 도움이 됩니다.

그런데 각 기호 등등이 이해가 전혀 안되어서 그런데 이런걸 하나하나 공부할 수 있는 방법은 없을지.... 여쭙고 갑니다.
답글삭제
답글
GLUGLU2022년 2월 28일 오후 5:06
카테고리를 2개 까지는 예시처럼 잘 생성되다가 3개 이상 설정하니 동적뷰 블로그에서 좌측 사이드바가 헤더 아래와 메인 포스트 바 위쪽으로 이동해서 레이아웃이 맘대로 바꼈는데 무엇이 문제인지 모르겠습니다 ㅠㅠ 사이드바 넓이를 줄여봐도 돌아오지를 않아요
답글삭제
답글
JM2023년 1월 21일 오후 7:28
세상에는 참 고수들이 많다. 잘 배우고 갑니다. ^^
답글삭제
답글
차바2023년 5월 20일 오후 12:09
자료 감사합니다. 카테고리 만들기 너무 힘드네요 ^^
답글삭제
답글
Glappiness2023년 7월 7일 오후 12:24
올려주신 코드로 카테고리 잘만들었습니다! 감사해요^^
답글삭제
답글