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

안녕하세요! 친절한효자손입니다. 오래 기다리셨습니다. 구글 블로그용 친효스킨을 제작 완료했습니다. 허나 저도 구글 블로그는 경험을 하나 하나 해 가면서 운영하고 있다 보니 모든 기능을 다 알지는 못 합니다. 따라서 본 반응형 스킨은 일부 기능이 미구현된 상태일 수 있습니다. 이 점은 양해 바랍니다. 여러분들의 적극적인 버그 및 오류 신고가 스킨 발전에 크게 도움이 될 것입니다.

 

친효스킨 For 구글블로거는 현재 1.0 버전입니다. 또한 완전 무에서 시작한 스킨이 아닙니다. 구글 블로거에는 1세대 HTML 기본 스킨이 있습니다. 해당 스킨을 개조해서 만든 버전입니다. 이 점 참고해 주시기 바랍니다. 가장 기본 반응형 스킨을 개조했기 때문에 아마 스타일이 완전히 적용되지 않는 모듈은 없을 것으로 생각합니다.

 

스킨 미리보기

https://rgy0409.blogspot.com/

친절한효자손 취미생활

저의 구글 블로거에도 완벽하게 적용시켰습니다. 애드센스도 모두 잘 나오고요! 개인적으로는 무척 만족스럽습니다.

 

스킨 신청서

먼저 아래의 신청서를 작성해 주시기 바랍니다. 본 스킨도 마찬가지로 친효스킨처럼 신청서를 작성해 주셔야 합니다.

 

친효스킨 For Google Blogger 신청서 작성하기

친효스킨 For Google Blogger 사용 동의서

신청서 작성 완료 후에는 신청서에 입력하셨던 이메일 주소를 포함한 댓글을 남겨주세요. 그래야 빠른 확인이 가능합니다. 스킨 파일은 신청서에 작성하신 이메일로 보내드립니다. 본 글에 댓글을 남기지 않으면 저는 확인을 하지 않습니다. 댓글을 반드시 남겨주셔야 그때 신청서를 확인합니다.

 

또한 처음에는 한 개의 블로그만 입력했으나, 차츰 적응되고나서 이후에 또 하나의 구글 블로거를 개설해 운영하시는데 친효스킨을 사용하신다면 신청서를 한번 더 작성해 주셔야 합니다. 이점 꼭 기억해 주시기 바래요! 신청서 리스트에 작성되지 않은 Blogger를 발견하는순간 저는 무료 배포를 멈추고 유료로 전환합니다.

 

스킨은 (아직까진) 무료로 배포

친효스킨은 부득이하게 유료로 배포를 하게 되었습니다. 이유는 이미 장문으로 설명을 했으니 아마 아실 분들은 아실겁니다. 친효스킨 For 구글 블로거 스킨도 스타트는 무료로 배포를 할 것입니다. 부디 사용하시는 분들께서 신청서에 작성하신 사항만 잘 지켜주신다면 앞으로도 무료 배포를 꾸준히 유지할 것입니다. 하지만 중간에 배신을 하시는 분들이 계신다면 그 즉시 무료 배포는 중단됩니다. 그러니 스킨의 유료화 유무는 사용자 여러분들에게 달려있습니다. 그러니 저와의 약속을 반드시 지켜주세요. 어려운 약속도 아니잖아요?

 

스킨 적용하기

스킨을 적용하시기 전에 백업부터 해두시는것을 추천합니다. 만일의 사태에 대비하기 위해서 말이지요!

 

구글 블로거 관리자 화면에서 테마 카테고리를 누릅니다. 그리고 오른쪽에 맞춤설정 버튼 바로 오른쪽의 방향 아이콘을 누릅니다.

 

복원 메뉴를 눌러서 방금 다운로드 받은 친효스킨 For GoogleBlogger 스킨 파일을 지정합니다. (백업부터 해두세요!)

 

업로드 버튼을 눌러주면 스킨 적용은 완료됩니다.

 

친효스킨 For 구글블로거의 최종 적용 완료 모습입니다. 왼쪽에는 사이드바가, 오른쪽에는 콘텐츠 목록이 있는 형태입니다. 친효스킨이랑 흡사하죠? 개인적으로 이런 레이아웃을 매우 좋아합니다. 가장 무난하고 가독성이 좋은 구조가 아닌가 싶어요.

 

초기 세팅

현재 구글 블로거에서만 독창적으로 지원하고 있는 여러 태그들의 구조를 완벽하게 파악을 못 한 상태입니다. 따라서 그 전 까지는 수동으로 스킨을 설정하시면 됩니다. 근데 설정할건 거의 없습니다. 헤더의 텍스트만 변경해 주시면 됩니다.

 

아까 스킨 복원 과정에서 이어 설명합니다. 이번에는 HTML 편집으로 들어갑니다.

 

아무 곳이나 클릭 후 Ctrl+F를 눌러 검색창을 활성화 합니다. 헤더라고 한글로 검색해보시면 헤더 주석이 검색되고 <header> 안에 있는 텍스트를 원하는 텍스트로 수정합니다.

 

수정 완료 후 오른쪽 상단에 있는 디스크 모양의 아이콘을 눌러 저장해주면 끝입니다.

 

다음은 선택 사항입니다. 꼭 해야 하는건 아닙니다. 푸터 영역의 제작자 표시 설정입니다. 레이아웃을 눌러서 바닥글 부분의 펜 모양 아이콘을 누릅니다.

 

1번 입력란에 푸터에 표시할 자신만의 텍스트를 입력합니다. 입력 완료 후에는 2번의 저장을 눌러주시면 됩니다. 그리고 반드시 레이아웃은 저장해주시는거 잊지 말아주세요.

 

애드센스

친효스킨 For 구글블로거 스킨에는 수동으로 애드센스를 총 세 곳에 넣을 수 있습니다. 최상단 1개, 본문 상단과 하단 각 1개씩 입니다. 우선 스킨의 HTML 편집 화면으로 들어갑니다.

 

애드센스로 검색하시어 HTML 애드센스 코드를 총 3곳을 찾습니다. 해당 코드는 기본형태로 세팅되어 있습니다. 사용자는 애드센스의 ca-pub 코드와 slot 번호만 수동으로 입력하면 됩니다.

 

<!-- 본문 상단 애드센스 -->
<div class='chAdsensePostBodyTop'>
<ins class='adsbygoogle' data-ad-client='카펍코드' data-ad-format='auto' data-ad-slot='슬롯번호' data-full-width-responsive='true' style='display:block'/>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

이런 형태로 되어 있으므로 data-ad-client에는 카펍코드를, data-ad-slot에는 슬롯번호를 넣고 저장해주시면 됩니다. 카펍코드나 슬롯번호의 개념을 모르신다면 아래의 글을 정독해 주시기 바랍니다.

 

구글 애드센스 HTML 스크립트 코드 구조 (client 및 slot 값의 개념 이해)

구글 애드센스 HTML 스크립트 코드 구조 (client 및 slot 값의 개념 이해)

 

사이드바에도 광고 코드를 넣으실 수 있습니다.

 

구글블로거 관리자에 있는 레이아웃을 클릭 후 사이드바 영역의 가젯 추가 버튼을 눌러줍니다.

 

HTML/자바스크립트 위젯을 실행합니다.

 

펜 모양 아이콘을 누르면 이렇게 설정 모드가 되고 제목에는 위젯 이름을, 콘텐츠 영역에는 애드센스 코드를 넣고 저장하시면 됩니다. 간단하지요?

 

그리고 스킨 자체에 있는 애드센스는 승인 이후에도 사용을 하지 않는것을 추천합니다. 해당 애드센스 위치는 이미 최상단 애드센스가 그 역할을 대신하기 때문입니다. 광고도 썩 매끄럽지도 않고요.

 

볼펜 모양의 아이콘을 눌러서 위젯을 비활성화 하시면 됩니다.

 

기타 사용 방법

구글 블로거 글쓰기는 관리자 화면에서 진행해야 합니다. 따로 글쓰기 버튼을 생성할 수 없는 이유는 이미 과거에 한번 설명드린적이 있습니다.

 

구글블로거(블로그) 글쓰기 버튼을 만들 수 없는 이유

구글블로거(블로그) 글쓰기 버튼을 만들 수 없는 이유

이 글입니다. 혹시 못 보셨다면 한번쯤 봐두시는것을 추천합니다.

 

친효스킨 For 블로거 맨 오른쪽 상단에는 설정 버튼이 있습니다. 해당 버튼을 누르면 관리자 화면으로 전환됩니다. 편리하게 이용해 보세요!

 

사이드바를 오른쪽에 배치하기

HTML 편집 모드에서 아래의 코드를 찾습니다.

 

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

여기에서 row를 row-reverse로 변경 후 저장합니다. 그러면 사이드바가 오른쪽에 위치하게 됩니다.

 

마무리

본 페이지는 꾸준히 업데이트를 하겠습니다. 사용하시고 뭔가 문제가 있거나 레이아웃이 이상하게 출력되는 위젯이 있다면 언제든지 댓글로 제보 부탁드립니다. 혹시 정말 감사함을 표현하고 싶으시다면 후원을 굳.이. 말리지는 않습니다. 하하! 후원은 티스토리 응원하기도 있고 자체 송금도 가능하므로 편한 방법으로 해주시면 감사하겠습니다. 그러면 좋은 콘텐츠 생산을 부탁드리겠습니다. 끝.