PostList

2015년 12월 18일 금요일

구글블로그 상단 PostList 글목록 가젯 만드는 방법

구글블로그 상단 PostList 글목록 가젯 만드는 방법

구글 블로그를 사용한지 얼마 안되어서 깔끔하면서 낯선 환경에 적응하느라 아직 애를
먹고 있기는 하지만 최대한 깔끔하게 꾸며보려고 노력 하고 있습니다.

그런데 카테고리 부터 글목록 까지.. 국내 블로그에서는 당연히 있는 기능이 구글 블로그
에서는 기본제공 되지 않아서 좀 어리둥절 했었습니다.

열심히 구글링을 하며 오늘에서야 따끈따끈 하게 상단에 글목록 (PostList)를 만들었습니다.
기본코딩이 필요한 기능만 들어가 있어서 별도로 수정할 내용은 없고, 자신의 블로그 주소
부분만 수정해주면 깔끔하게 적용이 됩니다.

우선, 글목록을 적용하기 전에는 객관적으로 포스팅을 한눈에 파악할 수 없어서 어떠한
포스팅이 있는지 쉽게 파악할 수가 없었습니다. 아래 그림처럼 포스팅 내용을 확인 할 수
있는 것은 Label 기능을 사용한 좌측 카테고리, 우측 검색기능 그리고 구글블로그에서 기본
적으로 제공하는 블로그 제목 표시 기능만 있었기 때문 입니다.
뭔가 답답한 느낌이 들죠


아래는 글목록을 적용한 후의 모습입니다. 기본적인 템플릿은 바뀌지 않았지만 글목록
만으로도 깔끔하게 정리된 것 같고, 카테고리 별 글목록을 보여주기 때문에 해당 카테고리
에 다른글은 어떤게 있는지 확인 하는것도 간편합니다.


이제 글목록을 적용하는 방법을 알아보겠습니다.


PostList 글목록 적용 방법
생각보다 간단하게 적용 할 수 있습니다.
우선 블로그 레이아웃 편집 화면으로 이동 후 '가젯추가' 버튼을 클릭한 다음
'HTML/JavaScript' 가젯을 추가하고, 아래 코드 내용을 복사해서 넣으면 됩니다.
소스코드 복사할때 주의점은 하단에 자신의 블로그 주소를 넣어야 한다는 것입니다.

그리고 반드시 가젯의 위치는 '블로그 게시물' 과 같은 레이아웃에 넣어 주어야 합니다.
우측이나 좌측 Side 레이아웃에 넣어도 상관은 없지만 상단 Cross-Column 에 넣게되면
원하는 내용과 전혀 다르게 적용되니 주의 해야 합니다.

*소스코드는 아래 다운로드 링크를 통해 다운받아주시기 바랍니다.






다운받은 소스코드를 붙여넣고, 맨 아래 표시된 부분을 본인의 블로그 주소로 바꿔 주어야
합니다. 주의할 점은 주소 끝에 '/' 슬러시를 입력하면 안되고, 오른쪽에서 숫자 5는 한 페이
지에 표시할 게시글의 숫자 입니다.
10으로 바꾸면 10개가 표시 되지만 5개가 적당한 것 같습니다.

소스코드 내용을 저장하고 '미리보기' 를 할때는 표시되지 않을 수 있습니다.
블로그 주소만 잘 변경해주면 적용되니 배치저장을 하고 블로그에 다시 들어가 보면 상단
에 글목록을 확인 할 수 있습니다.

앞서 말씀 드렸듯이 가젯의 위치를 Cross-Column 으로 지정하면 아래 그림과 같이 원치
않는 내용으로 적용되며 '블로그 게시물' 상단에 가젯을 적용해야 깔끔한 글목록을 보실 수
있습니다.





이렇게 글목록을 적용하고 나면 Label 을 이용한 카테고리 를 클릭하면, 해당 카테고리에
존재하는 글만 별도로 표시 해주기 때문에 누가 블로그를 구경 하러 와도 편리하게 사용
할 수 있습니다.



구글 블로그가 낯선 부분도 있고, 국내 포털에서 검색에 밀리는 것이나 방문자 유입이 쉽지
않아 초반부터 지치는 느낌이 드는것은 사실이지만 글작성 기능은 뭔가 깔끔하고 좋은것
같고, 뭐든 꾸준히 하는게 중요하다고 생각하고 잘 꾸려보려고 합니다.

구글 블로그 시작하시는 분들 응원 합니다.
적용 시 주의사항 확인하셔서 깔끔한 글목록 만드는데 유용하게 사용 하시면 좋겠습니다.

감사합니다.

댓글 10개:

  1. 목록 생성에는 성공했으나, 글목록의 제목을 눌렀을 때 해당포스트로 이동되지 않는군요.

    답글삭제
    답글
    1. 댓글 감사합니다. 설정을 바꿔야 되는건지.. 검토후 게시 정책으로 확인이 매우 늦었네요
      지금은 잘 사용 하고 계신지 모르겠습니다. ^^;

      삭제
  2. 좋은 정보 감사드립니다. 이렇게해서 Postlist를 잘 만들었는데, 글목록에서 해당 글을 눌러도 이동하지 않는 현상은 어떻게 개선할 수 있을까요?ㅠㅠ

    답글삭제
    답글
    1. 게시글에서 해당 글을 눌러도 이동하지 않는건.. 코드상의 문제는 아닌것 같은데
      블로그 주소 부분 다시 한번 해보시면 어떨까요 ^^

      삭제
  3. 감사합니다. 많은 도움이 되었습니다! 건승하세요.

    답글삭제
  4. 대단히 감사합니다. 덕분에 정말 괜찮게 꾸며지고 있습니다 ^ ^

    답글삭제
    답글
    1. 도움이 되셨다니 다행입니다. :)
      감사합니다.

      삭제
  5. 큰 도움되었습니다. 감사합니다.

    답글삭제