본문 바로가기

IT

대문님 애드센스 스킨 Simple 2단 content-sidebar





이 화면이 적용한 직후의 모습입니다.

첫 화면에 광고가 3개가 꽉 차네요

본문 상단에 광고를 2개 배치하는 것은

둘 중 하나는 모바일 접속에서도 노출이 가능하도록 하는 전략으로 사용하기 위해서 보편적으로 많이 쓰이는 광고배치인데요 저는 어차피 스마트폰 유입을 위해서 수동으로 광고를 삽입하려면 처음부터 스킨 자체에 애드센스 코드를 삽입하기보다 글을 발행 할 때에 수동으로 하나씩만 삽입하는 것이 블로그 방문자를 위해서 더 좋다고 생각해서 본문 상단에 애드센스 광고를 하나씩만 넣습니다.

   

그리고 한 페이지당 노출 제한이 애드센스 광고 단위 3개이기 때문에 사이드바를 이용해서 2개를 더 노출시키지요

그럼 제가 선호하는 광고패턴을 적용 해 보도록 하겠습니다.

   

   

수정을 위해서 336-280 이미지에 대한 코드가 어디 있는지 검색을 합니다.

   

블로그 관리 - HTML/CSS편집을 누르시고

   

   

   

단어 검색을 위해 Ctrl + F 키를 누릅니다.

   

   

   

오오!! 대문님께서 친절하게 어떻게 수정하라고 써 두셨네요 ㅜ.ㅜ

대문님 짱!!!

   

   

저는 아까도 말씀드렸듯이 스킨 자체에는 애드센스 코드를 넣지 않습니다.

그러니까 과감히 코드를 삭제하겠습니다.

   

   

이만큼을 그냥 삭제하고 적용하면

   

   

광고가 사라졌습니다.

   

   

이 부분은 블로그 운영자한테만 보이고 방문자들에게는 보이지 않으니까 걱정 마세요

   

   

방문자들에게는 관리자 메뉴가 보이지 않습니다 ^^

   

이제 본문에 광고를 삽입 해 보겠습니다.

   

수정 버튼을 누르고

   

   

   

HTML모드로 들어가서

   

광고를 가운데 배치하기 위해서 <center> </center> 코드를 써 넣고

   

애드센스 코드를 삽입합니다.

   

광고가 앙증맞게 들어갔네요 ^^

   

이런 방식으로 광고를 삽입하면 모바일 화면에서도 광고가 보인다는 장점이 있습니다.

매번 이렇게 붙여넣기 힘드니까 대부분 서식으로 하나 저장해두고 글 발행할 때 서식 삽입하는 방법으로 광고를 삽입하는 사람들이 대부분입니다.

홍익지식 프로젝트 블로그는 팀블로그라서 스킨 테스트 끝나면 광고 빼버릴 거라서 이렇게 삽입 해 봤습니다.

   

   

그럼 이제 사이드바에 광고를 넣어 볼까요?

   

관리 - 사이드바 - 사이드바1 부분에서 ads250을 제거하고 그 자리에 구글 광고를 넣으면 됩니다.

   

   

   

ads250 대신에 HTML 배너출력으로 교체합니다.

   

   

   

편집을 누릅니다.

   

   

광고코드를 삽입합니다.

   

   

   

광고 출력 완료~~

   

   

평가

전체적으로 깔끔한 분위기의 스킨이라 가독성이 좋고 블로그 신뢰도에도 긍정적인 영향을 줄 것 같습니다.

   

 오류 수정되었습니다.

좀 심각한 오류가 있습니다.

굵은 글씨체가 보이지 않습니다.

분명 굵은 글씨체를 적용했는데도 불구하고 저장 하고 컨텐츠를 보면 아래 사진처럼 굵은글씨가 적용되지 않습니다.

   

위의 코드를 CSS에 추가하였더니 아래와 같이 굵은글씨 잘 나옵니다.