워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

블로그나 웹사이트는 광고를 다는 것이 보통이죠. 구글 애드센스 광고는 이미지도 좋아서 웹페이지나 블로그에 하나의 장식요소로서의 작용도 합니다. 멋진 이미지가 있는 것과 없는 것은 많은 차이가 납니다. 광고달아 수익도 생기고 웹페이지의 모양도 좋아지니 누구나 달고 있습니다. 하다못해 구글 애드센스 광고 달기 적합한 워드프레스 테마 스킨도 나오는 상황입니다. 광고는 돈 벌려고 하는 목적도 있지만 여러가지 부수적인 효과로 인해서 많은 웹사이트에서 사용하고 있습니다.  구글 애널리틱스를 사용하면 웹사이트 방문자에 대한 분석을 무료로 받을 수 있습니다. 아주 상세하고 어떤 포스팅에 몇명의 방문자가 보았는지도 알 수 있고 각종 자료가 많습니다.

이번 글의 목적은 광고를 다는 것에 있는 것이 아니라 컨텐트 영역과 사이드바 영역에 어떤 요소를 추가하는 방법을 알아보는데 있습니다. CSS 기초부분에서 웹페이지에서 아이디 선택자를 사용한 경우 이를 클래스 선택자로 바꾸는 방법을 포스팅 했으니 이곳 의 글을 참고하시면 도움이 됩니다.

1. 컨텐트 영역에 새로운 요소 추가하여 둥근 모서리의 배경 추가하기



위 파일에는 CSS 기초에서 만든 아이디 선택자를 클래스 선택자로 바꾼 html 파일과 CSS 파일이 있습니다. 복사해서 블로그에 적용하고자 합니다.


html 파일을 텍스트 에디터에 열고 Footer라고 나오는 부분을 찾습니다. 1의 footer를 content-top으로 바꾸고 빨간네모를 블럭설정하여 복사합니다.


블로그의 HTML 편집 창에서 id="content로 검색을 하여 1에 클릭한 다음 엔터키를 치고 Ctrl+V키를 눌러 붙여넣습니다. 2부분이 붙여넣은 마지막 부분이고 바로 아래에 3의 wrapTop-content가 있습니다. 이것의 id를 class로 바꿔줍니다. 4의 wrapMid-content도 id를 class로 바꿉니다. id="wrapBtm-content"로 검색하여 id를 class로 바꿔줍니다.


#wrapTop-content 로 검색하여 1부분이 나오면 파운드싸인(#)을 2의 사이드바 전까지 바꿔줍니다. 총 8곳입니다. 저장버튼을 클릭하고 블로그 화면에서 새로고침하면 아래와 같이 나타납니다.


Footer라는 글자는 광고를 삽입할때 지우면 됩니다.

2. 구글 애드센스 광고 삽입하기 



Footer로 검색을 하여 블럭설정하고 구글 애드센스 사이트로 가서 728X90 리더보드 광고 코드를 복사해와서 붙여넣습니다. 구글 애드센스 광고 신청하는 법은 많은 블로그에서 포스팅되어있으니 참고하세요. 구글의 광고는 컨텐트 영역의 상단에 배치하는 것이 제일 좋습니다. 웹페이지의 검색시 헤더 다음으로 나오게 되므로 블로그의 컨텐트보다 앞서 있어서 광고주들이 아주 좋아하는 영역입니다. 광고 입찰에서도 높은 가격을 받는 자리입니다. 


CSS창에서 #content로 검색하여 1부터 2까지 블럭 설정하여 Ctrl+C키를 눌러 복사한 다음 2에서 클릭 엔터치면 커서가 한줄 아래로 내려갑니다. Ctrl+V키를 눌러 붙여넣습니다. #content 다음에 -top를 붙이고 padding 부분을 제거한 다음 margin-left: -3px 0 -3px -4px;을 입력합니다. 광고가 들어가고 나면 자리가 약간 모자라서 좌측으로 이동하고 상단과 하단의 여백이 좌우측보다 넓어서 균형을 맞추는 것입니다. 5의 width 부분은 이미 수정하고 난 상태인데 빨간색의 글씨부분처럼 이퀄싸인을 지우고 :28을 입력해줍니다. 저장한 다음 스킨위자드에 가서 게시글의 넓이를 입력하는 곳의 적용버튼을 클릭하고 하단에서 적용을 클릭하고 나옵니다. 이부분은 이전 글에서 많이 해봐서 잘 아실 겁니다. 블로그 화면에서 새로고침하면 광고가 제대로 나오게 됩니다. 신규로 새로 만들었을 경우 10분 정도 지나야 광고가 나옵니다.


정확하게 맞게 나옵니다.

댓글 (3)

댓글 목록

특수주니 access_time

정말 잘 보고 열공하고 있습니다...

항상 감사 드리며, 하던 중 안되는 부분이 있어 이렇게 글을 남깁니다.

광고 들어 가는 부분에 빈 테두리 네모 원이 안 나오는 이유는 뭐가 잘못되었는지요???

그냥 회색 배경에 공간만 남아 있는데...ㅠㅠ

메리앤 access_time

오늘도 이곳 저곳 유익한 정보 많이 배워갑니다.
오늘도 좋은 하루 되시길 바랍니다~. ^^;

베누시안 access_time

안녕하세요. 메리앤님 덕분에 악성코드 댓글 하나 지웠답니다. ㅎㅎ 감사합니다.