09/16/17 ~ Kanadel의 블로그!

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

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

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

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

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

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

카테고리 기능을 표현할 가젯을 추가하기 위하여 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 태그들과 스크립트를 수정해야 하는 어마어마한 불편함이 남아 있습니다

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

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

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

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

읽어 주셔서 감사합니다 😊

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

Kanadel의 블로그!

즐거운 세상 ^^

팔로어

2017년 9월 16일 토요일

재미있는 자료 2탄! (헬스장 트레이너 호출하는 방법)

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

music player

Category

Profile

Popular Posts

Total vigitors

Blog Archive

Comments

Recent