블로그 사이드바 및 통계 추가

50 views as of November 14, 2024.

지난 기간동안 또 변경된 블로그 기록.

예전엔 그냥 사이드바 형태가 아닌 위에서 아래로 쭉 떨어지는 구도를 썻었다.

근데 광고를 붙이다 보니 기존 레이아웃의 가로폭 (540)에 맞는 광고 사이즈가 없다보니 상대적으로 작은 광고(300x250) 을 여러개 달수밖에없고, 그러다보니 전체적인 레이아웃이 너무 맘에 안들게 되었다.

그래서 pc에 한해서는 사이드바를 채용하고 태블릿, 모바일에선 아래로 떨어지는 반응형 구도를 생각했다.

그리고 본문에도 광고를 쉽게 넣게하기위해서 본문 크기도 720px로 재조정했다.

실제로 구글 애드센스도 그렇고, 카카오 애드핏도 그렇고 가로형 광고 사이즈는 720x90 사이즈로 제공되고 이 사이즈대의 광고가 제일 범용적이다.

그리고 사이드바 광고는 가로폭 300을 맞추어 300x600의 대형 광고와 300x250의 박스광고를 담을 수 있게 변경했다.

실제로 보면 이런 구도이다.

상단에 헤더가 존재하고 그 아래로 메인 영역(720px)와 사이드바 영역(300px)이 자리를 잡고있다.

그리고 메인 상단에 720x90 사이즈의 광고를 달았다.

모바일 뷰에서는 기존처럼 깔끔하게 헤더-메인-푸터 구도로 보이게 유지했다.

그리고 실질적으로 가장 신경쓴 부분이 저 사이드바 영역이다.

스크롤을 내리다가 페이지 끝에 도달하게 되면 사이드바의 아랫부분이 노출되는데 여기에 방문자 통계라던지 카테고리, 콜렉션 리스트를 나열했다.

저 방문자수는 구글 애널리틱스에 api 요청을 이용해 매일 이전날의 방문자수를 가져와 DB에 저장해두고 그 저장된값을 28일분 뽑아서 랜더링 하도록 구현했다.

실제로 저 방문자 통계에 커서를 가져다대면 이런식으로 상세 정보를 볼 수 있다.

그리고 마지막으로 기존에 간단하게 보였던 카테고리와 콜렉션을 확장해 리스트로 쭉 나열해서 볼 수 있게 구성했다.

일단 나부터가 해당 카테고리에 진입이 쉽게 만드느게 목적이라 현재 상황은 대단히 맘에든다.

아, 그리고 페이지 우하단에 최상단, 최하단으로 가는 퀵 버튼도 추가했다.

기능은 말그대로 누르면 페이지의 맨위와 맨 아래로 스크롤해주는 역할을 한다.

나중에 또 괜찮은 개선 작업이 있으면 지속적으로 업데이트 해볼 예정이다.

#블로그 #eruLabo #사이드바 #통계

0 개의 댓글

Collection. eruLabo 관리 히스토리