지난시간에 GKSkin 기본 설치 포스팅을 하였습니다.
그런데 너무 휑~하죠? ^^;;
컨텐츠 위주의 스킨이다 보니 그렇습니다...
이제 하나씩 위젯들을 적용을 해보고자 합니다.!!
GKSkin은 일반 스킨이랑 약간 다른점이 화면을 제어하고 표출하는 모든 작업들이 자바스크립트로 이루어 진다는것입니다.
우선은 제일 기본적으로 필요한(?) 애드센스 설치를 해보도록 하겠습니다.
제~~일 먼저 관리자페이지에서 skin.html에 다음 코드의 주석을 풀어주세요
위 코드는 거의 맨 하단에 있으며 주석을 풀어주는 방법은 "<!--"와 "-->" 부분을 지워주시면 되겠습니다.
지우셨다면 저장!!
리스트화면 : 헤더상단1개와 우측사이드에 2개
컨텐츠 내용 : 헤더상단1개와 우측상단1개 우측중앙 1개
배포파일을 압축해제하신 내용 중 "imges" 디렉토리에 들어가보시면 "gkskin.js" 라는 파일이 존재합니다.
이 파일(gkskin.js)을 오픈해주십니다.
저는 메모장으로 해당 파일을 Open 하였습니다.
※ 아무 에디터툴로 열어주셔도 상관은 없습니다. 다만 인코딩 형식이 맞지 않는 에디터도 있기때문에
메모장 기준으로 설명을 진행하며 순서에 따라 코드를 비동기유형 및 사이즈별로 생성해주세요
1. 728px X 90px 사이즈 (헤더 상단)
비동기 유형으로 생성해주신다음에 코드를 복사해주세요
마우스 우클릭으로 복사를 해주시거나 CTRL+C 를 누르셔서 복사하신다음
다른 메모장 같은곳에 붙여넣어놓습니다.
다음은 gkskin.js파일을 메모장으로 띄우신 다음에 CTRL + F를 누를신다음 "<ins" 라고 검색을 해주세요
스크롤을 조금만 내려보시면 주석처리 되어있는 코드들이있습니다
파란색 체크되어있는 "//"을 삭제해주세요
두개의 주석을 지워주시고 html : '<ins></ins>' << 부분에
복사해놓으신 애드센스 코드들중, <ins></ins> 부분만 붙여넣기 해주세요
※ 홑따옴표('')사이에 ins 태그를 넣어주셔야 합니다.
그러지 않으시면 표출이 안될뿐더러 다른 컨텐츠 내용들도 출력이 되지 않습니다.
2. 336px X 280px 사이즈 (본문내용 우측 상단 + 본문 중앙(?))
본문에 광고배치에 관련된 검색어는 "var ads1" 이라고 검색을 해주십니다.
본문에 광고 배치하는 작업은 주석을 여러개 풀어주셔야 합니다.
잘 따라와주세요 ^^ㅋㅋ
ads1변수에 들어갈 광고위치는 본문내용에 우측 상단에 배치되는 <ins></ins>태그입니다.
위 화면에서 파란색 부분으로 그려진 // 부분을 모두 해제해 주십니다.
다음으로는 동일한방법으로 "var ads2" 라고 검색해주세요
이부분은 본문 중앙에 위치하는 애드센스 내용입니다.
위에서 파란색 네모박스친 부분을 지원주세요
"//"와 "/*"와 "*/"를 지워주시면 되겠습니다.
마지막으로 블로그 목록의 우측사이드에 광고2개를 배치하는 부분입니다.
3. 336px X 280px 사이즈 (목록 우측사이드 애드센스 2개 위치)
제 포스팅글의 리스트 우측사이드를 보시면 애드센스 광고 2개가 배치되어있습니다
이부분에 대해서는 "'east'" 라고 검색해주세요
위와같이 보시면 336X280 사이즈의 광고를 2개 넣어주실수 있습니다.
"/*" 와 "*/"를 삭제해주시고 <ins></ins>태그를 2개 생성하셔서 각각 위치에 붙여주시면 되겠습니다.
위와 같이 주석을 해제한후 애드센스태그를 모두 적용한 페이지별 화면입니다.
리스트화면 애드센스 결과
포스팅 상세보기 결과
상단에 예를 따라서 진행하시면 위와같이 화면에 광고들이 출력되시는것을 확인하실 수 있으십니다. ^^
궁금하신점은 댓글로 질문주시고요~
다시한번 말씀드리지만 정확히 따라하지 않으실경우 화면이 아무것도 안 나오실수도 있습니다!!
GKSkin v1.0 beta.zip