구글 블로그 방문수 체크하는 카운터의 숫자 크기 변경하기

직접 HTML과 CSS 코드를 수정하지 않으면 못생긴 부분이 너무 많아서 그냥 쓰기가 어려운 구글 블로그..
이번에는 전체 방문수를 카운트해주는 카운터의 숫자 크기와 위치가 마음에 들지 않아서 수정을 해보려고 합니다.

자신의 블로그에 적용해놓은 테마에 따라서 코드가 다를지 어쩔지는 모르겠으나, 일단 저는 LineMag 템플릿을 설치해뒀습니다.

웹사이트를 독학으로 만들고 싶다면? 공부 방법과 순서

웹사이트를 독학으로 만들고 싶은 사람들에게 처음에 어떤 언어를 어떤 순서로 배우면 좋은지, 어디서 배울지 있는지를 소개합니다.

HTML과 CSS를 공부해둔다면 검색을 해보지 않아도 스스로 여러 가지를 수정할 수 있으니 혹시 배워보고 싶으신 분들은 위의 포스트 안에 있는 링크들을 따라가서 공부해보시길 바랍니다.

구글 블로그는 카운터가 너무 못생겼다

숫자의 위치와 크기가 너무 어중간한 구글의 카운터입니다.
숫자 옆에 위치한 그래프와 너무 안 어울려서 그런 것도 있는 것 같은데.. 어쨌든 일단 숫자가 너무 작은 것 같은 느낌이 듭니다.
또 그래프와 너무 붙어있는 것도 마음에 안 들고, 숫자의 높이도 그래프와 어울리게 정렬이 됐으면 좋겠습니다.
블로그 통계 가젯에서 자체적으로 이런 것을 설정할 수 있다면 참 좋겠지만, 그런 기능은 제공하지 않고 있습니다.

구글 블로그 카운터 숫자 크기와 위치 변경하는 소스 코드

style 속성

style='position:absolute;font-size: 22px;margin: 0px 10px'

위의 코드를 복사해서 아래의 위치에 붙여넣기 하시면 됩니다.

블로그 관리 메뉴에서 테마 > HTML 편집으로 들어가서 [ctrl + F] 키를 누르고 'counter-wrapper'를 검색합니다.
그러면 클래스명이 counter-wrapper인 span 태그가 하나 나오는데, 이 span 태그에 위에서 복사한 style 속성을 추가하고 저장하시면 됩니다.
처음에는 CSS로 counter-wrapper 클래스를 선택자로 해서 값을 넣어주려고 했습니다.
그런데 그렇게는 적용이 안되길래 원래 우리가 수정할 수 없는 영역인 줄 알고 포기할 뻔했는데, span 태그에 바로 style 속성을 추가하니까 되더군요.

소스 코드 적용한 결과

완성된 모습입니다.
position으로 숫자의 위치를 정렬했고, font-size로 숫자의 크기를 변경했고, margin으로 그래프와 숫자 사이에 10px의 간격을 뒀습니다.