티스토리 블로그 스킨 만들기이지만 구글 광고를 두개 삽입하였으니 나머지 하나 마저 삽입하는 방법을 알아봅니다.
이전 글에서 1의 리본 끝부분이 너무 튀어나온 것 같아서 3픽셀 줄였습니다.
구글광고는 디스플레이 광고를 3개까지 달 수 있고 링크단위광고는 3개를 더 추가할 수 있습니다. 다음 뷰 애드박스를 설치할 경우 2처럼 고정되어 수정할 수 없게 되어있습니다. 구글광고를 설치하기 좋은 자리는 컨텐트영역 상단이므로 3의 자리가 적당합니다. 다음뷰 애드박스를 사용하지 않더라도 구글광고를 삽입하자면 2나 3의 위치가 되고 그러자면 글의 일부가 2나 3의 위치로 올라가게 됩니다. 글이 공간을 다 채우게 되면 다행이지만 이미지부터 올린다든가 글이 짧고 그다음에 이미지가 올라온다면 공간이 비게 되죠. 그래서 애드박스와 나란히 배치하는 것이 적당합니다. 혹은 애드박스를 사용하지 않고 구글광고만 중앙에 배치할 수도 있지만 보기 좋지 않습니다. 그래서 한줄짜리 수평형 텍스트 광고를 중앙에 배치해서 사용하는 분들도 있습니다. 구글광고 하나만 중앙에 배치하면 쉬운 일이지만 위처럼 애드박스와 구글광고를 나란히 배치하는 것이 좀 까다롭습니다. 왜냐하면 구글광고가 들어갈 3의 위치에 정확한 사이즈로 div 태그의 폭을 정해야 하기 때문이죠. 사이즈가 맞지 않으면 2와 3의 중간에 본문 글이 들어가기도 하거든요.
class="article"로 검색하여 두번째 항목으로 갑니다.3에 클릭 엔터치고 <div id="adsense"> </div>를 만들어 줍니다. 그사이에 구글광고 300X250 사이즈를 넣습니다. 게시글영역 좌측 끝에서 다음뷰 애드박스까지 길이를 재면 450픽셀이 나오므로 CSS에 450픽셀을 입력합니다.
저장하고 블로그 화면에서 보면 어긋나있습니다. 1의 치수는 450픽셀인데 안맞는 것은 애드박스를 요소검사하면 2처럼 좌측마진이 10픽셀 있기 때문입니다. 이만큼을 줄여야합니다. #adsense의 width를 440px로 줄였는데도 애드박스가 올라가지 않습니다. div 태그는 블럭요소이기 때문에 넓이를 정하더라도 우측 공간을 차지하므로 float:left;를 더 추가해줘야합니다.
애드박스와 상하균형을 맞추기 위해서 애드센스의 상단패딩을 13픽셀 설정했습니다. 그리고 글을 입력해봤는데 3의 애드박스의 하단 마진으로 인해서 글자가 어긋납니다. 애드센스의 하단마진을 설정해야하는 상황인데 이것도 정확해야하며 초과하면 글자가 3에서 시작하고 모자라면 2처럼 계속 어긋납니다.
애드센스의 하단마진을 25픽셀로 설정했습니다. 이수치는 정확해야지 1픽셀이라도 차이가 나면 글자가 어긋납니다. 이수치는 2의 애드센스 상단 패딩과도 관계가 있습니다. 예를들어 2의 패딩이 14픽셀이라면 1의 마진은 24가 되어야합니다. 그러니 두개의 수치를 합해서 38이 되어야 합니다. 이것은 다음뷰 애드박스를 CSS로 통제할 수 없는데서 오는 불편이죠. 그러면 애드센스가 좌측으로 치우쳐있으니 중앙으로 배치되도록 합니다. 애드센스에 좌측패딩을 주게되면 광고가 우측으로 이동은 하겠으나 패딩을 입력하면 width를 줄여야 하죠. 그런데 위 스킨은 스킨위자드를 사용하므로 어떤 게시글의 사이즈라도 중앙에 오도록 하고 싶습니다. 그래서 width:440px; 는 그대로 두고 중앙배치하려고 합니다.
애드센스 광고 스크립트에 div 태그를 삽입합니다. 마감태그도 잊지마세요. 그런다음 인라인방식으로 width를 300픽셀 설정하고 margin을 0 auto로 설정하면 4의 애드센스의 width에 상관없이 항상 중앙에 배치됩니다. 그러면 스킨위자드에서 게시글 폭이 변경됨에 따라서 애드센스의 폭이 같이 변경되도록 설정합니다.
스킨위자드에 들어오면 처음에는 광고가 어긋나있습니다. 하지만 게시글탭을 선택하고 적용버튼 두곳을 클릭하고 나온다음 다시 스킨위자드로 들어가면 정상적으로 나옵니다. 글영역넓이의 슬라이더를 이동하면 변동되는대로 구글광고는 중앙에 배치됩니다.
현재까지 진행한 스킨입니다. 아래처럼 광고 부분이 표시 되어있으니 글자부분을 제거하고 광고를 삽입하거나 광고를 전혀 사용하지 않을 경우는 div 태그 부분을 제거하고 사용하면 됩니다. 다음뷰 애드박스를 사용하지 않고 애드센스만 사용할 경우에는 #adsense의 width를 제거하면 됩니다. 서치박스 클릭안되는 부분 수정했습니다.
이전 글에서 1의 리본 끝부분이 너무 튀어나온 것 같아서 3픽셀 줄였습니다.
구글광고는 디스플레이 광고를 3개까지 달 수 있고 링크단위광고는 3개를 더 추가할 수 있습니다. 다음 뷰 애드박스를 설치할 경우 2처럼 고정되어 수정할 수 없게 되어있습니다. 구글광고를 설치하기 좋은 자리는 컨텐트영역 상단이므로 3의 자리가 적당합니다. 다음뷰 애드박스를 사용하지 않더라도 구글광고를 삽입하자면 2나 3의 위치가 되고 그러자면 글의 일부가 2나 3의 위치로 올라가게 됩니다. 글이 공간을 다 채우게 되면 다행이지만 이미지부터 올린다든가 글이 짧고 그다음에 이미지가 올라온다면 공간이 비게 되죠. 그래서 애드박스와 나란히 배치하는 것이 적당합니다. 혹은 애드박스를 사용하지 않고 구글광고만 중앙에 배치할 수도 있지만 보기 좋지 않습니다. 그래서 한줄짜리 수평형 텍스트 광고를 중앙에 배치해서 사용하는 분들도 있습니다. 구글광고 하나만 중앙에 배치하면 쉬운 일이지만 위처럼 애드박스와 구글광고를 나란히 배치하는 것이 좀 까다롭습니다. 왜냐하면 구글광고가 들어갈 3의 위치에 정확한 사이즈로 div 태그의 폭을 정해야 하기 때문이죠. 사이즈가 맞지 않으면 2와 3의 중간에 본문 글이 들어가기도 하거든요.
class="article"로 검색하여 두번째 항목으로 갑니다.3에 클릭 엔터치고 <div id="adsense"> </div>를 만들어 줍니다. 그사이에 구글광고 300X250 사이즈를 넣습니다. 게시글영역 좌측 끝에서 다음뷰 애드박스까지 길이를 재면 450픽셀이 나오므로 CSS에 450픽셀을 입력합니다.
저장하고 블로그 화면에서 보면 어긋나있습니다. 1의 치수는 450픽셀인데 안맞는 것은 애드박스를 요소검사하면 2처럼 좌측마진이 10픽셀 있기 때문입니다. 이만큼을 줄여야합니다. #adsense의 width를 440px로 줄였는데도 애드박스가 올라가지 않습니다. div 태그는 블럭요소이기 때문에 넓이를 정하더라도 우측 공간을 차지하므로 float:left;를 더 추가해줘야합니다.
애드박스와 상하균형을 맞추기 위해서 애드센스의 상단패딩을 13픽셀 설정했습니다. 그리고 글을 입력해봤는데 3의 애드박스의 하단 마진으로 인해서 글자가 어긋납니다. 애드센스의 하단마진을 설정해야하는 상황인데 이것도 정확해야하며 초과하면 글자가 3에서 시작하고 모자라면 2처럼 계속 어긋납니다.
애드센스의 하단마진을 25픽셀로 설정했습니다. 이수치는 정확해야지 1픽셀이라도 차이가 나면 글자가 어긋납니다. 이수치는 2의 애드센스 상단 패딩과도 관계가 있습니다. 예를들어 2의 패딩이 14픽셀이라면 1의 마진은 24가 되어야합니다. 그러니 두개의 수치를 합해서 38이 되어야 합니다. 이것은 다음뷰 애드박스를 CSS로 통제할 수 없는데서 오는 불편이죠. 그러면 애드센스가 좌측으로 치우쳐있으니 중앙으로 배치되도록 합니다. 애드센스에 좌측패딩을 주게되면 광고가 우측으로 이동은 하겠으나 패딩을 입력하면 width를 줄여야 하죠. 그런데 위 스킨은 스킨위자드를 사용하므로 어떤 게시글의 사이즈라도 중앙에 오도록 하고 싶습니다. 그래서 width:440px; 는 그대로 두고 중앙배치하려고 합니다.
애드센스 광고 스크립트에 div 태그를 삽입합니다. 마감태그도 잊지마세요. 그런다음 인라인방식으로 width를 300픽셀 설정하고 margin을 0 auto로 설정하면 4의 애드센스의 width에 상관없이 항상 중앙에 배치됩니다. 그러면 스킨위자드에서 게시글 폭이 변경됨에 따라서 애드센스의 폭이 같이 변경되도록 설정합니다.
440px을 지우고 1처럼 입력합니다. 440픽셀이 되기 위해서는 700에서 260을 빼줘야하죠. 저장하고 스킨위자드로 갑니다.
스킨위자드에 들어오면 처음에는 광고가 어긋나있습니다. 하지만 게시글탭을 선택하고 적용버튼 두곳을 클릭하고 나온다음 다시 스킨위자드로 들어가면 정상적으로 나옵니다. 글영역넓이의 슬라이더를 이동하면 변동되는대로 구글광고는 중앙에 배치됩니다.
CustomSkin(2012-02-13).zip현재까지 진행한 스킨입니다. 아래처럼 광고 부분이 표시 되어있으니 글자부분을 제거하고 광고를 삽입하거나 광고를 전혀 사용하지 않을 경우는 div 태그 부분을 제거하고 사용하면 됩니다. 다음뷰 애드박스를 사용하지 않고 애드센스만 사용할 경우에는 #adsense의 width를 제거하면 됩니다. 서치박스 클릭안되는 부분 수정했습니다.
더보기
'CMS/티스토리 가이드' 카테고리 관련글
