블로그 모바일광고, 조금 더 깔끔하게 꾸며보자!!

어제, 블로그토리 블로그를 운영하시는 분의 블로그에 포스팅 된 모바일 웹 블로그에 애드센스 광고달기 글을 따라블로그 상단 영역에 성공적으로 애드센스를 적용했었는데요.. 근데 약간 깔끔하지 않게 붙어있기에 몇 가지의 조정을 통해서 좀 더 깔끔하게 구글 애드센스 광고를 붙여봤습니다. (구글 애드센스 모바일 광고 세팅에 대한 부분은 블로그토리 님의 블로그를 참고하시면 쉽게 설정하실 수 있습니다.)

설정방법은 아주 간단합니다.  설정은 소스에서 한 번... 티스토리 블로그 세팅에서 한 번 해주시면 되는데요,  우선 구글 애드센스 계정 획득 후, [내 광고] 탭을 클릭해 들어가신 후, 좌측의 [모바일 컨텐츠] 메뉴를 클릭하시어 모바일 광고 영역을 활성화하고 간단한 설정과정을 거쳐 받은 모바일광고 스크립트를 메모장에 저장해 놓습니다. 이후, 블로그토리 님이 알려주신 DIV 소스를 작성중인 글 아무 곳에나 붙여 넣고, 아래의 태그에서 모바일 애스센스 코드라 표기된 부분에, 앞서 메모장에 저장해 놓았던 구글 애드센스 광고 소스를 붙여넣고 저장하기를 누르시면 아래의화면과 기본적인 구글 광고가 노출됩니다.


[그림, 1] 소스 설정 전과 후의 바뀐 모습

하지만, 보시는 바와 같이.. 좌측의 경우, 구글 광고가 티스토리 로고 하단 부분을 살짝 덮고 있어서 보기에 그리 깔끔하지 못하기 때문에, 아래의 내용에 따라 소스를 살짝 수정해주면 됩니다.  첫 번째로 아래의 DIV 소스 중 오렌지 색으로 표시된 top:30px를 50px로 수정하시고 저장하시면, 첫번째 수정과정이 끝나구요, (top는 화면 맨 위를 기준으로 XX px 만큼의 높이를 지정하는 태그 입니다.)

[블로그 글 상단노출 용 소스]

<div id="mobile_google_ad"
style="position:absolute; left:0px; top:30px; width:320px; height:50px; z-index:1">
여기에 모바일 애드센스 코드를 삽입해주세요.</div>


그 다음, 티스토리 관리자 페이지로 들어가신 후, 아래의 화면과 같이 높이 부분의 사이즈를 75로 수정해주시면, 첫번째 그림의 우측화면과 같이 스마트 폰으로 블로그를 접속했을 때 구글 모바일 광고가 깔끔한 모양새로 보이게 됩니다.

[그림. 2] 티스토리 모바일웹 스킨 페이지.

 

어떠세요?  아주 깔끔하게 정리 되었죠? 
하지만 아쉬운 점도 하나 있는데요, 세로화면에서는 이쁘게 정리되지만, 가로 화면에서 블로그 화면 사이즈가 늘어났을 때도 광고의 가로 사이즈가 늘어나지 않는다는 점 입니다...  이 점은 앞서 설정했던 div 소스 앞에 다른 div 소스를 적용하여, center 정렬을 하면 되지 싶은데, 몇 번 해봤지만 아직 성과가 없네요.. 좀 더 테스트를 해보고 성공하면 다시 포스팅하도록 하겠습니다.  그래도 세로 화면에서 깔끔하게 나오는 게 어디입니까..ㅎㅎㅎ 

 

 

야메군. Web와 Mobile, Digital 카테고리 SME(Subject Matter Expert). 웹기획 15년차로 네이버 웹기획자 커뮤니티 "웹(WWW)를 만드는 사람들"에서 운영진으로 활동하고 있으며, 딴지일보를 시작으로 아이러브스쿨, 짱공유닷컴, YES24 등의 회사를 거쳐, 현재는 민간 IT 원천기술 연구소 "Valhalla Lab"에서 Machine learning과 Natural Language Processing 기술의 상업적 이용방법에 대해 연구하고 있으며, 기획자의 업무능력 향상으로 위한 Guide Book 출간 준비 중.