친효스킨 For 구글 블로거(Blogger) 반응형 스킨 다운로드 및 사용 설명서
안녕하세요! 친절한효자손입니다. 오래 기다리셨습니다. 구글 블로그용 친효스킨을 제작 완료했습니다. 허나 저도 구글 블로그는 경험을 하나 하나 해 가면서 운영하고 있다 보니 모든 기능을 다 알지는 못 합니다. 따라서 본 반응형 스킨은 일부 기능이 미구현된 상태일 수 있습니다. 이 점은 양해 바랍니다. 여러분들의 적극적인 버그 및 오류 신고가 스킨 발전에 크게 도움이 될 것입니다.
친효스킨 For 구글블로거는 현재 1.0 버전입니다. 또한 완전 무에서 시작한 스킨이 아닙니다. 구글 블로거에는 1세대 HTML 기본 스킨이 있습니다. 해당 스킨을 개조해서 만든 버전입니다. 이 점 참고해 주시기 바랍니다. 가장 기본 반응형 스킨을 개조했기 때문에 아마 스타일이 완전히 적용되지 않는 모듈은 없을 것으로 생각합니다.
목차
스킨 미리보기
친절한효자손 취미생활
IT 제품과 새로운 프로그램 사용을 좋아하는 평범한 사람이 운영하는 공간에 잘 오셨습니다!
rgy0409.blogspot.com
저의 구글 블로거에도 완벽하게 적용시켰습니다. 애드센스도 모두 잘 나오고요! 개인적으로는 무척 만족스럽습니다.
업데이트 기록
지금까지의 업데이트 내용입니다.
v1.1
-본문상단 애드센스 2개로 분할
-애드센스 적용 시 모바일 해상도에서 가로 스크롤 발생하는 문제 수정
-본문 단락(p)태그 상/하 10px margin 적용
v1.2
-TOP버튼 추가
-2024.7.3 : 댓글 시안성 및 가독성 향상을 위한 CSS 코드 추가
-2024.7.23 : 사이드바 sticky 적용
스킨 신청서
먼저 아래의 신청서를 작성해 주시기 바랍니다. 본 스킨도 마찬가지로 친효스킨처럼 신청서를 작성해 주셔야 합니다.
친효스킨 For Google Blogger 신청서 작성하기
친효스킨 For Google Blogger 사용 동의서
"친효스킨 For 구글블로거" 를 사용할 구글 블로그 URL 주소를 입력해 주세요. 이곳에 작성해주신 구글 블로그 URL 주소 외의 사용은 금합니다. 이따금씩 저도 방문해야하기 때문입니다. (여러개
docs.google.com
신청서 작성 완료 후에는 신청서에 입력하셨던 이메일 주소를 포함한 댓글을 남겨주세요. 그래야 빠른 확인이 가능합니다. 스킨 파일은 신청서에 작성하신 이메일로 보내드립니다. 본 글에 댓글을 남기지 않으면 저는 확인을 하지 않습니다. 댓글을 반드시 남겨주셔야 그때 신청서를 확인합니다.
또한 처음에는 한 개의 블로그만 입력했으나, 차츰 적응되고나서 이후에 또 하나의 구글 블로거를 개설해 운영하시는데 친효스킨을 사용하신다면 신청서를 한번 더 작성해 주셔야 합니다. 이점 꼭 기억해 주시기 바래요! 신청서 리스트에 작성되지 않은 Blogger를 발견하는순간 저는 무료 배포를 멈추고 유료로 전환합니다.
스킨은 (아직까진) 무료로 배포 → 2024년 9월 1일부터 후원 적용
친효스킨은 부득이하게 유료로 배포를 하게 되었습니다. 이유는 이미 장문으로 설명을 했으니 아마 아실 분들은 아실겁니다. 친효스킨 For 구글 블로거 스킨도 스타트는 무료로 배포를 할 것입니다. 부디 사용하시는 분들께서 신청서에 작성하신 사항만 잘 지켜주신다면 앞으로도 무료 배포를 꾸준히 유지할 것입니다. 하지만 중간에 배신을 하시는 분들이 계신다면 그 즉시 무료 배포는 중단됩니다. 그러니 스킨의 유료화 유무는 사용자 여러분들에게 달려있습니다. 그러니 저와의 약속을 반드시 지켜주세요. 어려운 약속도 아니잖아요?
개인적인 사정으로 인해 후원을 받아야 할 것 같습니다. 아시다시피 티스토리 자체 애드센스로 인해 저의 생계에 막대한 타격을 입었습니다. 또한 이사까지 가야 하는 상황이어서 큰 돈이 나가게 되었어요. (ㅠㅠ) 이제 블로그만으로는 생계유지가 어렵게 되어 일을 구하는 중입니다. 이런 상황때문에 부득이하게 후원을 받아야만 합니다. 그러니 구글 블로그를 운영하시려고 마음을 잡수신 분들은 9월이 오기 전까지 후딱 신청하시기 바랍니다. 신청서 도착 시각을 기준으로 2024년 8월 31일 23:59 까지 도착한 신청서 메일만 무료로 스킨 파일을 드립니다. 최소 후원 금액은 지금과 동일한 2만원 입니다. 저도 먹고 살아야 하니까요. 양해 부탁드립니다. 참고로 후원을 받는다해도 친효스킨 사용 규칙은 변하지 않습니다.
https://rgy0409.tistory.com/notice/3073
친절한효자손 취미생활을 후원해 주세요!
안녕하세요! 티스토리 공지 카테고리에는 처음 글을 작성해 봅니다. 이 내용을 가지고 작년부터 고민을 했는데 이젠 확고하게 정리가 되어 여러분들께 첫 공지를 띄워볼까 합니다. 아래는 소개
rgy0409.tistory.com
후원에 대한 자세한 내용은 위의 글을 참고해 주시기 바랍니다.
스킨 적용하기
스킨을 적용하시기 전에 백업부터 해두시는것을 추천합니다. 만일의 사태에 대비하기 위해서 말이지요!
구글 블로거 관리자 화면에서 테마 카테고리를 누릅니다. 그리고 오른쪽에 맞춤설정 버튼 바로 오른쪽의 방향 아이콘을 누릅니다.
복원 메뉴를 눌러서 방금 다운로드 받은 친효스킨 For GoogleBlogger 스킨 파일을 지정합니다. (백업부터 해두세요!)
업로드 버튼을 눌러주면 스킨 적용은 완료됩니다.
친효스킨 For 구글블로거의 최종 적용 완료 모습입니다. 왼쪽에는 사이드바가, 오른쪽에는 콘텐츠 목록이 있는 형태입니다. 친효스킨이랑 흡사하죠? 개인적으로 이런 레이아웃을 매우 좋아합니다. 가장 무난하고 가독성이 좋은 구조가 아닌가 싶어요.
테마 복원 오류가 있을 경우
이럴때는 수동으로 진행하시기 바랍니다. 방법을 알려드리겠습니다.
HTML 편집으로 들어갑니다.
코드들이 있을겁니다. 적당히 아무곳에서 클릭 후 커서를 활성화 하시고 Ctrl+A키를 눌러 전체 선택합니다. 그리고 잘라내기를 합니다. 삭제하셔도 상관은 없는데 혹시 몰라서 백업을 하려고 잘라내기를 하는 것입니다. 잘라낸 코드는 메모장을 열어 붙여넣기 하시고 저장하시면 됩니다.
코드를 잘라내기 했으니 현재 스킨 코드는 아무것도 없는 상태가 되었습니다. 잠시 그대로 둡니다.
이메일로 받으신 친효스킨 For 구글블로거 파일을 빈 메모장에 드래그합니다. 그러면 코드들이 보일텐데요, 아까와 마찬가지로 적당히 아무곳에서 클릭 후 Ctrl+A키를 눌러 전체 선택합니다. 그리고 Ctrl+C키를 눌러서 복사합니다.
비어있던 스킨 웹페이지로 돌아옵니다. 방금 복사한 코드를 Ctrl+V를 눌러 그대로 붙여넣기를 합니다. 그리고 오른쪽 상단에 있는 저장 버튼을 눌러 친효스킨 For 구글블로거 코드를 완전히 적용시켜 줍니다. 생각보다 간단합니다.
초기 세팅
현재 구글 블로거에서만 독창적으로 지원하고 있는 여러 태그들의 구조를 완벽하게 파악을 못 한 상태입니다. 따라서 그 전 까지는 수동으로 스킨을 설정하시면 됩니다. 근데 설정할건 거의 없습니다. 헤더의 텍스트만 변경해 주시면 됩니다.
아까 스킨 복원 과정에서 이어 설명합니다. 이번에는 HTML 편집으로 들어갑니다.
아무 곳이나 클릭 후 Ctrl+F를 눌러 검색창을 활성화 합니다. 헤더라고 한글로 검색해보시면 헤더 주석이 검색되고 <header> 안에 있는 텍스트를 원하는 텍스트로 수정합니다.
수정 완료 후 오른쪽 상단에 있는 디스크 모양의 아이콘을 눌러 저장해주면 끝입니다.
다음은 선택 사항입니다. 꼭 해야 하는건 아닙니다. 푸터 영역의 제작자 표시 설정입니다. 레이아웃을 눌러서 바닥글 부분의 펜 모양 아이콘을 누릅니다.
1번 입력란에 푸터에 표시할 자신만의 텍스트를 입력합니다. 입력 완료 후에는 2번의 저장을 눌러주시면 됩니다. 그리고 반드시 레이아웃은 저장해주시는거 잊지 말아주세요.
카테고리(라벨) 만들기
구글 블로거는 카테고리 시스템이 없어요. 대신 비슷하게 사용할 수 있는 라벨 시스템이 있습니다. 라벨은 태그 꾸러미라고 생각하시면 됩니다. 아래의 내용을 참고하시어 카테고리를 만들어 보시기 바랍니다.
구글 블로거 카테고리 생성 방법 (with 라벨 가젯)
구글 블로거 카테고리 생성 방법 (with 라벨 가젯)
구글 블로거 플랫폼에는 카테고리라는 모듈이 따로 없습니다. 이런 부분에 있어서 사용자 사용 편의성 부분은 확실히 티스토리가 한 수 위라는 사실을 피부로 체감하게 됩니다. 허나 이가 없으
rgy0409.tistory.com
애드센스
친효스킨 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 값의 개념 이해)
많은 티스토리 사용자가 있고, 티스토리에는 애드센스 광고를 게시할 수 있습니다. 티스토리를 열심히 가꾸어 구글 애드센스 신청을 하게 되고, 콘텐츠의 품질과 방문자 유입에 따라서 승인 유
rgy0409.tistory.com
사이드바에도 광고 코드를 넣으실 수 있습니다.
구글블로거 관리자에 있는 레이아웃을 클릭 후 사이드바 영역의 가젯 추가 버튼을 눌러줍니다.
HTML/자바스크립트 위젯을 실행합니다.
펜 모양 아이콘을 누르면 이렇게 설정 모드가 되고 제목에는 위젯 이름을, 콘텐츠 영역에는 애드센스 코드를 넣고 저장하시면 됩니다. 간단하지요?
그리고 스킨 자체에 있는 애드센스는 승인 이후에도 사용을 하지 않는것을 추천합니다. 해당 애드센스 위치는 이미 최상단 애드센스가 그 역할을 대신하기 때문입니다. 광고도 썩 매끄럽지도 않고요.
볼펜 모양의 아이콘을 눌러서 위젯을 비활성화 하시면 됩니다.
기타 사용 방법
구글 블로거 글쓰기는 관리자 화면에서 진행해야 합니다. 따로 글쓰기 버튼을 생성할 수 없는 이유는 이미 과거에 한번 설명드린적이 있습니다.
구글블로거(블로그) 글쓰기 버튼을 만들 수 없는 이유
구글 블로거(Blogger) 플랫폼에는 엄청난(?) 비밀이 숨겨져 있습니다. 글 쓰기 버튼을 만들 수 없다는 부분입니다. 새 글을 발행하는 그 즉시 효력이 발동합니다. 티스토리의 경우에는 글을 발행 완
rgy0409.tistory.com
이 글입니다. 혹시 못 보셨다면 한번쯤 봐두시는것을 추천합니다.
친효스킨 For 블로거 맨 오른쪽 상단에는 설정 버튼이 있습니다. 해당 버튼을 누르면 관리자 화면으로 전환됩니다. 편리하게 이용해 보세요!
사이드바를 오른쪽에 배치하기
HTML 편집 모드에서 아래의 코드를 찾습니다.
@media (min-width:1440px) {
#container {
flex-direction: row;
}여기에서 row를 row-reverse로 변경 후 저장합니다. 그러면 사이드바가 오른쪽에 위치하게 됩니다.
마무리
본 페이지는 꾸준히 업데이트를 하겠습니다. 사용하시고 뭔가 문제가 있거나 레이아웃이 이상하게 출력되는 위젯이 있다면 언제든지 댓글로 제보 부탁드립니다. 혹시 정말 감사함을 표현하고 싶으시다면 후원을 굳.이. 말리지는 않습니다. 하하! 후원은 티스토리 응원하기도 있고 자체 송금도 가능하므로 편한 방법으로 해주시면 감사하겠습니다. 그러면 좋은 콘텐츠 생산을 부탁드리겠습니다. 끝.
