목록

2018년 10월 14일 일요일

구글 블로그 글 목록(Post list) 만들기 - 본문 상단에 글 목록을 만들어 보았습니다.

아무래도 네이버나 티스토리(?)와 같은 타 블로그에 너무 익숙해져 있나 봅니다.
글 목록도 없이 바로 본문이 나오니까 허전하고, 심지어 불편하기까지 합니다.

목록을 추가할 수 없을까 구글에 검색해보기로 합니다.
역시 없는 거 빼고 다 나오는 구글 검색답게 한방에 원하는 결과가 나옵니다.
[Blogspot] Label을 이용한 글목록(Posts List) 구현.

일단 아래의 소스코드를 클릭하여 들어가서 복사합니다.
소스코드

코드를 복사하였으면 레이아웃에 들어가 가젯 추가 - HTML/JavaScript를 선택합니다.



목차, 목록, 리스트, Post list 등 원하는 제목을 입력 후,
그 아래, 내용에 위의 소스코드를 붙여넣기 해줍니다.

여기서 가장 주의하실 것은, 맨 아랫부분에 본인의 블로그 주소를 입력해야 하는 부분이 있습니다.

Ctrl + F 로 검색 탭을 열고, 
page.init('http://본인의-블로그-주소를-입력하세요.com', 5); 를 검색하신 뒤 
본인의-블로그-주소를-입력하세요 부분을 고쳐주시면 됩니다. 저 같은 경우에는
page.init('https://choitnhdailylife.blogspot.com', 5);
가 되었네요.
*주의하실 점은 .com뒤에 /가 붙어 있으면 안됩니다.

그 후, 추가된 가젯을 사이드바(Sidebar)에서 중앙 블로그 게시물 상단에 위치시켜 주시면 됩니다.

블로그 게시물 상단에 위치시켜주는 이유는, 이 코드를 제작하신 G1님께서
애초에 블로그 게시물 상단에 위치시키는걸 상정하고 코드를 제작하셨기 때문입니다.


가젯을 추가한 뒤 화면을 보니 일단은 목록이 생성되었습니다.
하지만, 잘 작동이 되나 클릭을 해보니 작동이 안됩니다...
뭐가 문제인가 한참 헤매다 보니 블로그 설정 시간대가 -인 지역이 선택되어 있다면 작동을 안한다는 글이 있더군요.
혹시나 해서 찾아봤습니다.  설정 - 언어 및 서식 - 시간대

아니나 다를까, 시간대가 태평양 표준시로 되어있었네요.
+9인 서울로 저장한 뒤 실험을 해 보니 정상작동 하는 모습을 확인할 수 있었습니다.



추가로 폰트 사이즈, 페이지 숫자의 색상, 보여지는 목록의 개수 등을 본인의 입맛에 맞게 편집하실 수 있습니다.
Ctrl + F 로 검색 탭을 열어 찾으시면 편합니다.


목록의 폰트 사이즈 & 색상 변경하기

93번 행 var a = document.createElement('a');
; 뒤에 a.style.fontSize = '10pt' 를 추가한 뒤 숫자를 변경해주면 글 목록 폰트의 사이즈를,
; 뒤에 a.style.color = '색상' 을 추가해주면 글 목록 폰트의 색을 변경 가능합니다.
본인 블로그의 테마, 색상에 따라 Blue, Yellow나 Red, 혹은 정확한 값 #FFFF00, #222222 등으로 변경하십시오.


페이지 수 폰트 사이즈 & 색상 변경하기

138 번 행 var a = document.createElement('a');
; 뒤에 a.style.fontSize = '10pt' 를 추가한 뒤 숫자를 변경해주면 목록 아래 페이지 수 폰트의 사이즈를 변경 가능하고,
144번 행 a.style.color = 'blue';
페이지 숫자를 표시하는 색(기본색상 Blue)을 다른 색으로 바꿀 수 있습니다.


한번에 보여지는 목록의 개수 변경하기

182번 행 page.init('https://본인의-블로그-주소를-입력하세요.com', 5);
본인의 블로그 주소 뒤에 숫자 5는 한번에 보여지는 목록의 개수입니다.
5를 써넣으면 5줄이, 10을 넣으면 10줄이 보이겠죠.

댓글 4개: