IT

티스토리 본문 상단 Adsense 반응형 광고 플러그인 margin 여백 없애기

기존에는 html 스킨 본문에 애드센스 코드를 삽입해서 광고를 노출했었다. 스크립트를 통해서 반응형 광고를 하다보니 장단점이 분명히 존재했다. 간혹 스크립트를 불러오고 실행하는 과정에서 광고를 불러오지 못하는 경우가 있었다. 그래서 티스토리에서 제공하는 플러그인을 사용해보기로 했다. 삽입 코드가 단순해져서 노출 속도가 조금이나 빨라졌고 스크립트 오류나 충돌로 인한 노출 제한이 조금 줄어든듯하다. 여전히 손봐야 할 부분이 많이 있지만 자기 만족 영역이어서 천천히 할 예정이다.

 


문제점

그러다가 발견한 한 가지 문제점이 있었다. 애드센스 위치와 사이즈를 변경해 보며 이것저것 실험을 해보다가 본문에 삽입되는 광고 형태로 광고를 노출시켜보니 눈에 띄는 공간이 발견되었다. 크게 신경쓰지 말까하다가 깔끔한 스킨을 추구하는 상황에서 계속 눈에 거슬렸다. 이놈의 완벽주의가 다시 발현됐다.


원인

<div class="tt_adsense_top" style="margin-bottom:30px">


이전에는 없었다가 플러그인을 사용하니 생긴 틈이기에 분명히 플러그인과 관련되어 있다고 생각하고 소스를 들여다 보기 시작했다. 아니나다를까 본문 상단 애드센스를 감싸주는 div에 아랫부분 마진이 30px가 걸려 있었다. 추측컨데, 애드센스 광고와 본문이 바로 붙어 있으면 의도치 않은 광고 클릭이 이뤄질 수 있어 예방차원에서 본문과 구분하고자 마진을 강제로 주고 있는 듯하다.

해결책


.tt_adsense_top {margin-bottom: 0 !important} /* 상단 Adsense 플러그인 하단 마진 공백 강제 설정*/

스킨을 살펴보니 스킨과 무관한 코드였다. 플러그인 자체에 들어가 있는 코드여서 CSS를 강제 수정하는 명령어로 해당 문제를 해결했다. 이제 마음 편히 지낼 수 있다. 해당 문제를 해결하기 위해서는 위 CSS 코드를, 스킨 편집 > html 편집 > CSS 에디터에 아무곳이나 붙여넣기를 하면 된다. 나중에 관리하기 편하게 가장 밑에 넣어주면 간단히 해결 된다. 스킨 저장을 해주고 블로그 본문을 다시 불러오면 해당 여백이 사라진 것을 확인할 수 있다.

 


Related Posts

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

선택약정할인제도 선택약정할인제도는 단말 지원금을 받지 않는 고객에게 요금 할인 혜택을 제공하는 제도이다. 이 제도는 지급 단말, 중고 단말, 신규 단말 이용 고객 모두에게 적용되며, 요금 상품 선택과 12/24개월의…

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

취업, 이직 준비나 정부 지원금 신청 할 때, 문서 작업시 대부분 이름과 서명란이 있다. 매번 느끼지만 디지털과 아날로그의 경계에 있는 듯한 느낌이다. 서명란에 싸인이나 도장을 삽입하는 과정은 간단해…

GitHub 콘솔 git add, git commit, git push 명령어 정리

GitHub 콘솔(명령줄 인터페이스)에서 커밋하는 방법은 여러 단계로 구성된다. 여기서는 Git을 사용하여 변경사항을 커밋하고 GitHub 저장소에 푸시하는 기본적인 절차를 안내한다. 이 과정을 시작하기 전에, 로컬 컴퓨터에 Git이 설치되어 있어야…

알리익스프레스 Windows Hello 내돈내산 웹카메라 구매 후기 및 설치 드라이버

알리익스프레스 Windows Hello 카메라 내돈내산 후기 및 드라이버

필자가 가지고 있는 랩탑 레노버 씽크패드 P14S에서는 Windows Hello 기능이 지문과 얼굴인식으로 되어 전원을 켜거나 브라우저에서 로그인할 때, PIN번호를 누르지 않아도 지문 또는 얼굴인식으로 간단히 해결 할 수…

A4용지에 프린트해 사용하는 무료 탁상달력 웹사이트 a4calendar

A4용지에 프린트해 사용하는 무료 탁상달력 웹사이트 a4calendar

요즘은 달력 구하기가 힘들다. 은행에서 항상 나눠주던 달력이 이제는 그 제작부수를 줄여 선착순 또는 이벤트로 지급하는 방식으로 바뀌면서 달력 구하기가 하늘의 별따기가 되버렸다. 벽걸이 형 달력도 그럴진데, 탁상에…

[CSS] 버튼 디자인 및 생성 사이트 Best Button Generator

[CSS] 버튼 디자인 및 생성 사이트 Best Button Generator https://www.bestcssbuttongenerator.com/ Best CSS Button Generator는 웹사이트 버튼의 CSS 스타일을 쉽고 빠르게 생성할 수 있는 무료 온라인 도구이다 초보자부터 경험…

This Post Has 11 Comments

  1. 이런 수정하시는 모습..그리고 그걸 알려주는 센스

    저같은 컴맹에겐 정말 귀한 자료입니다 ㅎㅎㅎ. 진짜 티스토리 4개월전에 시작할때는 그 흔한 캡쳐도 몰랐었는데…

    항상 님처럼 경험담 올려주시는분들 덕분에 하나하나 알아갑니다
    .오늘 정보감솨합니다

    1. 소통 하나는 쭈니형님이 최고인거 같아요~ 늘 앞서서 이렇게 방문해주고 글도 남겨주니 감사할 따름입니다. 본 글이 조금이라도 도움이 되길 하는 마음으로 적었습니다. 혹 나중에 애드센스 이용하시다가 불편하실 때 적용해보세요^^

  2. 달고나님이닷~~ㅎㅎ
    오늘도 잘 보고 갑니당~ 🙂
    벌써 금요일이네요 .. !! T T ..
    (시간 참 빠르네요~)
    오늘 하루도 파잇팅팅 입니당~ㅎㅎㅎ

  3. 안녕하세요 도움을 주셔서 감사합니다

    또하나 도움을 받아도 될지 몰라 여쭈어 봅니다.
    혹시 글 하단에 당신이 좋아할 만한 콘텐츠 광고삽입은 어떻게 하는것인가요?
    암만 찾아봐도 나오질 않네요. 혹시나 시간이 되신다면 간단하게 도움을 주실 수 있나요?

    1. 답변이 늦었습니다. 그간 일이 있어서 깜빡하고 지냈네요. 오래기다리게 해서 죄송합니다. 문의주신 광고 플랫폼은 애드센스가 아니라 데이블이라는 광고 플랫폼입니다. 승인받은지 시간이 흘러 기억이 흐릿하나 일 방문자 3,000 이상 되면 광고 승인 받으실 수 있을거예요. 번창하세뇨.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다