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

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

사용하기전에

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

신청서 작성하기

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

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

(아직까지는) 무료로 배포 중 2024년 9월 1일부터 후원 전환

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

2024년 9월 1일부터 친효스킨 For 구글블로거도 후원을 받고 배포하기로 결정했습니다. 이번에는 딱히 위반이 있어서 그런건 아닙니다. 티스토리의 자체 애드센스로 인해 수익이 치명적으로 하락했기 때문에 생계유지가 어려워져서 그렇습니다. 또한 이사로 인한 부담금도 엄청 늘었고요. 이제 일을 해야 하는 시점까지 왔어요. 결국 투잡을 하는 셈이죠. 이런 이유로 인해 이제 어떻게든 돈을 마련해야 합니다. 그러니 구글 블로그를 하기로 결심하신 분들은 2024년 9월이 되기 전에 후딱 받아두시기 바랍니다. 9월 이후부터는 1.2 버전으로 배포하겠습니다. 최소 후원 금액은 2만원 입니다. 스킨 신청서 양식은 2024년 9월 1일에 새롭게 업데이트 됩니다. 후원 계좌는 아래에 명시해 놓겠습니다.

후원 계좌 : 3333-01-2949285 카카오뱅크 친절한효자손(유길용)

업데이트 기록

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

Ver 1.1

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

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

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

Ver 1.2

-TOP 버튼 추가

-2024.7.3 : 댓글 시안성 및 가독성 향상을 위한 CSS 코드 추가

스킨 적용하기

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

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

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

테마를 복원할 수 없습니다?!

만약 테마를 복원할 수 없다면서 진행이 되지 않을때는 아래의 방법으로 수동 업데이트를 진행하시기 바랍니다.

HTML 편집으로 들어갑니다.

HTML 관련 여러 코드들이 보일겁니다. 아무 곳에서 클릭 후 커서를 활성화하고 Ctrl+A를 눌러 전체 선택 후 복사 또는 잘라내기를 합니다.

저는 잘라내기를 했습니다. 어차피 싹 지워야 하거든요. 잘라낸 원본 코드는 메모장에 붙여넣기를 해서 따로 백업해 둡니다. 혹시 모르니까요.

다운로드 받으신 친효스킨.xml 파일을 빈 메모장에 드래그해서 열어줍니다. 그러면 아까와 마찬가지로 HTML관련 코드들이 보일겁니다. 전체 선택 후 복사합니다.

방금 비워뒀던 스킨 웹페이지로 돌아가서 그대로 붙여넣기를 하고 오른쪽 상단의 저장 버튼을 눌러주면 됩니다. 수동으로 적용시키는 과정, 어렵지 않지요?

기본 설정

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

가장 먼저 할 일은 스킨 기본 설정입니다. 이번에는 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로 변경해 줍니다. 반드시 마무리는 세미콜론(;)으로 끝내야 하는 것! 잊지 말아 주세요. 그리고 스킨을 저장하시면 사이드바가 오른쪽에 위치하게 됩니다.

마무리

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