친효스킨 For 구글블로거(Blogger) 반응형 스킨 다운로드 및 사용 방법

안녕하세요. 친절한효자손입니다. 구글 블로거 전용 친효스킨을 드디어 완성시켰습니다. 완전히 무에서 창조된 스킨은 아닙니다. 공식 1세대 반응형 스킨을 개조하여 제작한 스킨입니다. 따라서 기본 스타일은 어느정도 완성이 된 상태에서 약간의 HTML 편집과 CSS를 조작하여 완성시킨 스킨입니다. 개인적으로는 상당히 깔끔해서 마음에 듭니다. 티스토리의 친효스킨 경우에는 약간 오밀조밀한 느낌이었다면 구글 블로거에서의 친효스킨은 뭔가 큼직큼직한것이 시원 시원한 느낌이 강합니다. 그러면 어떻게 적용시키고 사용하는지 알아보겠습니다. 현재 본 블로거에도 친효스킨 For 구글블로거 스킨이 적용되어 있습니다.

사용하기전에

먼저 스킨을 적용하기 전에 백업을 하시고 진행해주시기 바랍니다. 혹시 모를 문제에 대비해서 말이죠. 백업은 필수입니다. 백업 방법은 스킨 적용하는 과정에서 한번 다시 언급해 드리겠습니다.

신청서 작성하기

먼저 아래의 신청서를 작성해 주시기 바랍니다.

친효스킨 For 구글블로거 신청서 작성하기

(아직까지는) 무료로 배포 중

티스토리 친효스킨은 무료로 배포하다가 불미스러운 사건으로 인해 유료화를 했습니다. 후원으로 변경했지요. 이번 구글 블로거 전용 친효스킨도 무료로 배포를 시작합니다. 따라서 이 스킨의 유료화는 사용자 여러분들에게 달렸습니다. 부디 신청서에 작성하신 내용만 잘 지켜주신다면 앞으로도 유료화로 바뀔일은 없을 것입니다.

업데이트 기록

지금까지의 업데이트 내용입니다.

Ver 1.1

-본문 상단 애드센스 2개로 분할

-애드센스 적용 시 모바일 해상도에서 가로 스크롤 발생하는 문제 수정

-본문 단락(p) 태그 상/하 10px margin 적용

Ver 1.2

-TOP 버튼 추가

스킨 적용하기

이메일로 받으신 스킨 파일을 잘 아는 폴더에 담아둡니다. 이제 관리자 화면으로 들어와서 테마 카테고리로 들어간 후 오른쪽에 보이는 맞춤설정 버튼의 바로 오른쪽 아래 표시 아이콘을 누릅니다.

복원 메뉴를 누릅니다. 하지만! 이 전에 바로 위에 있는 백업을 눌러서 현재 적용중인 스킨 파일을 먼저 저장해줍니다. 꼭 해주세요! 혹시 모르므로 보험을 들어놔야 합니다.

업로드 버튼을 눌러서 이메일로 다운받은 친효스킨 For 구글블로거 스킨 파일을 적용시켜줍니다. 여기까지 하면 적용은 완료됩니다.

기본 설정

스킨의 맨 오른쪽 상단에는 관리자 화면으로 바로 갈 수 있는 아이콘이 있으니 적극 이용해 주시기 바랍니다.

가장 먼저 할 일은 스킨 기본 설정입니다. 이번에는 HTML 편집을 누릅니다.

아무 곳에나 클릭 후 커서를 활성화 합니다. 그리고 Ctrl+F를 눌러서 검색창을 띄우고 "헤더"라고 입력 후 엔터를 누르면 해당 위치가 바로 찾아질겁니다. 친효스킨 관련 텍스트를 모두 지우고 원하는 문구를 입력하시면 됩니다. 블로그 제목을 입력하시면 되겠지요? 닉네임을 입력하는게 아니라, 블로그 이름을 입력하는 것입니다.

입력 완료 후 오른쪽 상단에 있는 저장 버튼을 눌러서 스킨에 적용시켜 줍니다.

이번에는 레이아웃 카테고리로 들어가 바닥글에 있는 저작자 표시를 수정해 줍니다.

여기에 자신의 닉네임을 입력하시면 되시겠습니다. 자유롭게 입력해 주세요. 저장 버튼을 눌러 저장합니다.

애드센스 설정

HTML 편집 모드로 들어옵니다. 이번에는 Ctrl+F를 누르고 한글로 "애드센스"라고 입력 후 엔터를 누릅니다. 아니면 "카펍코드"라고 입력하셔도 됩니다. 그러면 CSS를 제외한 HTML 부분의 애드센스가 세 곳 검색됩니다. 최상단, 본문 상단, 본문 하단 이렇게 세 곳입니다. 이 세 곳의 애드센스 코드에서 1번의 카펍코드, 2번의 슬롯번호만 개인 코드로 입력하시면 됩니다. 매우 간단하죠? 혹시 카펍코드와 슬롯번호에 대해서 개념 이해가 안 되신다면 아래의 글을 정독해 주시기 바랍니다.

애드센스 코드의 클라이언트와 슬롯 값 개념 이해하기

입력 완료 후 반드시 스킨을 저장하는 것을 잊지 마시기 바랍니다.

다음은 사이드바입니다. 관리자 화면에서 레이아웃을 누르고 사이드바 영역의 가젯 추가 버튼을 누릅니다.

HTML/자바스크립트 메뉴를 누릅니다.

구성창이 떴습니다. 제목에는 사이드바의 위젯명이 노출되는 영역이므로 원하는 문구를 입력해 줍니다. 콘텐츠 부분에는 애드센스 코드를 그대로 붙여넣기 해주시면 됩니다. 스크립트 코드는 빼고 나머지만 넣어도 됩니다.

스킨에 기본적으로 세팅되어있는 애드센스 광고 영역은 사용하지 않습니다. 왜냐하면 최상단 애드센스를 이미 수동으로 넣었기 때문입니다. 기본적으로 이 영역은 애드센스를 승인받기 전에는 비활성화 상태입니다.

만약 애드센스 승인 이후라면 해당 위젯의 설정 모드로 들어가시어 위젯 표시를 비활성화 하시면 됩니다.

기타 설정 방법

사이드바의 위치도 변경 가능합니다. 기본형태는 사이드바가 왼쪽에 있습니다. 만약 사이드바를 오른쪽에 위치하도록 바꾸고 싶다면 스킨의 HTML 편집 모드에서 다음의 코드를 찾아줍니다.

1 2 3 4

@media (min-width:1440px) {     #container {         flex-direction: row;     }

cs

이 코드에 들어있는 row를 row-reverse로 변경해 줍니다. 반드시 마무리는 세미콜론(;)으로 끝내야 하는 것! 잊지 말아 주세요. 그리고 스킨을 저장하시면 사이드바가 오른쪽에 위치하게 됩니다.

마무리

본 페이지는 꾸준히 업데이트 됩니다. 스킨 사용 중간에 뭔가 오류가 있거나 개선이 필요한 부분이 있다면 언제든지 댓글로 피드백 가능합니다. 그러면 좋은 콘텐츠 생산을 부탁드리겠습니다. 끝.