플로팅 광고(배너) 함 달아보자.

2019/01/25 - [각 종 it] - 티스토리 같은 홈페이지에 플로팅 이미지를 넣고 크기 조절을.

2019/02/07 - [각 종 it] - 티스토리 반응형 스킨 헤더(제목, 메뉴, 검색) 고정을 함 해 보자.

2019/02/14 - [각 종 it] - 블로그든 뭐든 홈페이지에 BGM, 배경음악 넣어보자. 걍 유투브음악 전용 사이트를 팝업 시키는 방법임.

위 이전 글들에서 이미 플로팅 기술을 소개한 적이 있고 이에 관한 기술의 지향점도 언급 한 적이 있다.

이렇게 보니 플로팅 기술 하나로 참 많은 것을 할 수 있었다.

오늘은 수익과 관련한 플로팅 배너에 대해 이야기 하고자 한다.

사실, 구글에드센스나 데이블 같은 곳에서 워낙 반응형 광고 지원을 잘 해 주기 때문에 홈페이지 양 옆에 여유가 없는 분들은 적용 할 필요가 없지만... 티스토리에서 기본으로 제공 해 주는 스킨이 단순하고 재미가 없어 양 옆에 뭔가 주렁 주렁 달고 있다.

최근에는 사메가레이(오른쪽하단에 빨간 배경으로 떠 있는 물고기 4마리를 말한다. 모바일에서는 이 게시글 최하단에서 만날 수 있겠다.), 즉 줄가자미를 올려놓았다. 이 물고기가 비싼 몸값을 자랑해서 수량이 한정 되 있다. 고로 다른 플로팅 아이콘들과 어울리지 않는 것은 알고 있으나 다 팔면 없어지니 너무 신경쓰지는 않아도 된다.

그 사메가레이 위에 보면 사이드바 크기의 플로팅 광고가 떠 있는데,

다음 광고를 집어넣었다.

구글의 에드센스는 반응형이 거의 플로팅보다 본 게시글을 침해함에도 불구하여 플로팅배너를 금하고 있기에 넘어가고 다음은 딱히 플로팅광고에 제재가 없어 적용하였다. 또한 구글에 비해 수익은 정말 반 밖에 안되지만 클릭하지 않아도 띄우기만 하고 있어도 수익이 들어오기에 메이페이지에도 띄울겸 다음 에드핏을 선택하게 되었다.

하지만 역시 모바일에서는 띄울 수 없으니 자바로 현재창 크기를 인식, 양 옆에 여유가 없을 때는 없어지게 만들어 놓았다.

이런 사이드바 크기의 광고의 장점은 게임 캐릭터나 만화 캐릭터 같은 인물형 광고에 적합하다는 것이다. 그러 할 지언데... 다음은 너무 건전해서 게임 이외에 돈 되는 광고는 올려 놓지 않아 많이 아쉽다.

구글은 정말로 적극적인데...

<div>에 해도 되지만, 필자는 <aside>를 사용했다.

html5에서 사이드바 레이아웃에 해당 되는 것이 <aside>라 해서 사용 해 보았더니... <div>와 크게 차이가 없었다.

그도 그럴 것이 기존의 스킨 html 구성이 <wrap>이였기에 구분이 가지 않았던 것이다. 내심 사이드바 태그를 썼으니 왼쪽이나 오른쪽에 위치 해 있겠지? 헤헤라 생각하며 기껏 써 줬더니... 아래에 위치 해 버렸다.

차설, 대충 html에서 마음에 드는 곳에 어사이드를 만들어 주고 스타일에서 포지션을 fixed로 지정 그 안에 다음핏에서 따온 코드를 집어 넣으면 끝난다.

대충 이런 느낌?

<aside style="position:fixed;></aside>

요사이에 코드만 집어 넣으면 된다.

물론 right라든지 top이라든지 기타 설정도 조금 넣어주면 완성 된다.

요렇게. 주의 할 점은 지금 대게그림에 가려 광고가 일부 잘려보이는데, 이때는 z-index를 이용 해도 되지만, 의도한 것이라 딱히 수정하지 않았다. 대게, 회 광고 우선!

다음 광고는 그냥 띄우는데 의의를 둔다.(돈이 들어 온다.)

더 궁금한 점은 댓글 바란다.

아, 그냥 <div>써도 된다. 어찌 되었건 레이아웃만 만들어 위치지정만 해 두면 되니.