[블로그 스킨 교체] FLATINUM 스킨 - 구글 애드센스 본문∙사이드바 추가 / 로고 추가 / 방문자 모듈 사이드바 추가

 안녕하세요, 까만거북이입니다.

 이제 블로그에 소홀했단 말도 안하기로 했..

 또 바람이 불어서 블로그의 스킨을 교체했습니다. (아마 이것도 병일거야)

 이번 스킨은 티스토리 스킨 페이지에서 선택할 수 있는 공모전 수상작인 Flatinum님의 'Flatinum' 입니다. 이 자리를 빌어 Flatinum님께 고맙다는 말씀을 전합니다. (_ _)

스킨에 관한 자세한 설명은 아래 링크를 참고하세요.

Mind Control / Flatinum 티스토리 반응형 테마 공개

저는 이 스킨을 받고, 크게 3가지 작업을 했습니다. 오늘 포스팅은 이를 기록으로 남겨두면서 HTML/CSS가 어려우신 분들에게 혹시 도움이 되지 않을까 싶네요. : )

1. 구글 애드센스 본문∙사이드바 추가
2. 상단 메뉴에 로고 추가
3. 사이드바에 방문자 수 모듈 추가

# 구글 애드센스 본문과 사이드바에 추가

 제 블로그에서 구글 애드센스는 본문 상단 오른쪽과 사이드바에 추가되어 있습니다. 본문 상단에 항상 표시되도록 하기 위해 오른쪽 정렬된 div 코드를 사용해서 배치를 하였고, 마진(여백)값은 10픽셀 정도 주면, 깔끔하게 나오는 것 같더군요.

 아래 소스를 참고하시면, 블로그의 소스 중 어디에 배치해야 하는지 보실 수 있습니다.

 사이드바 광고는 좀 엉뚱(?)할 수 있지만, 의외로 쉽게 가능합니다. 티스토리 관리자 메뉴에서 사이드바 편집에 들어간 뒤, "태그 입력기"를 추가하시면, HTML 코드 작성이 가능합니다. 여기서 애드센스 코드를 넣으시면, 쉽게 코드 입력이 가능합니다. 물론, 사이드바에 맞도록 애드센스 코드를 가져오세요. : )

# 상단 메뉴에 로고 추가

 이 스킨에는 상단의 메뉴 왼쪽에 블로거의 로고를 넣어야 합니다. 기본 로고를 가지고 있다가는 정체 없는 블로그가 되어 버리지요.

 다행히 저는 이전에 고맙게 받았던 거북이 디자인의 로고가 있고, 이를 활용하기로 하였습니다. 적절히 포토샵 작업을 하여, 배달의민족 폰트를 사용해 로고 작업을 마쳤네요.

 포토샵을 활용하다가 배경을 투명하게 만들고 싶어 아래의 링크를 참고하였습니다.

팁앤테크 - [포토샵] 이미지 원하는부분 투명하게 만들기

# 사이드바에 방문자 수 모듈 추가

 이 스킨에는 하단에도 사이드바2가 있어서 적절한 모듈 배치가 가능하지요.

 하지만, 저는 하단에만 배치할 수 있던 방문자 수 모듈을 아래 사진처럼 사이드바에도 넣고 싶어졌습니다. 그래서 HTML을 조금 손 보았습니다.

 아래 소스를 캡처한 것과 같이 사이드바 모듈들이 모여있는 라인의 가장 아래에 카운터 모듈을 복붙하여 또 추가하였습니다.

 이 때, 유의할 점은 블로그 하단의 사이드바2와 블로그의 오른쪽에 있는 사이드바1의 영역이 다르므로, "<div class="col-md-3-col-sm-6">" 코드를 제거해야 한다는 점입니다.

 이 정도만 작업하고, 저장을 하면 바로 반영이 됩니다. : )

 이렇게 해서 스킨을 교체하였습니다.

 어줍잖은 실력으로 포토샵을 만지다보니, 저와 같이 포토샵 쑥맥인 분들께 이런 내용을 알려드리면 좋겠다는 생각이 들더군요. 기회를 만들어 언제 한번 정리해봐야겠습니다.

 그럼, 다음에 만나요~ :D

 포스팅 끝.

 2015년 12월 28일, 새벽 2시 24분