본문 바로가기
IT 리뷰/모바일 리뷰

메뉴바에 애드센스 링크형 광고 넣기

by URBAN 2012. 1. 29.
반응형

에드센스의 유효클릭을 올리는 방법 중 하나는 링크형 광고를 이용하는 방법입니다. 메뉴처럼 텍스트로 되어 있기 때문에 잘 배치만 시킨다면 유효클릭을 늘릴 수가 있습니다.

잠깐!!!
구글 애드센스 광고는 한페이지에 3개까지만 기재할 수 있습니다. 하지만, 링크형 광고는 추가로 3개를 더 넣을수 있으니 잘 활용하면 최대 6개의 광고를 기재할 수 있다는 이야기입니다. 혹시 박스형 광고만 하고 계신다면 링크형 광고를 활용해보시는 것도 좋습니다. 실제로 해외 사이틑 둘러보니 링크형 광고를 메뉴형식으로 배치하여 클릭을 유도하는 사이트들이 꽤 있더군요..

추천한번!!!
 

그럼 제 싸이트를 기준으로 설명해 드리겠습니다. 먼저 저의 싸이트 메뉴 바는 아래 사진과 같습니다. 


죄측으로 메뉴 항목이 있으며 좌측에 google 광고가 있지요.. 그런데 구글광고의 텍스트 모양은 수정할 수 없습니다. 단지 색만 맞출 수 있지요.. 그래서 좌측의 메뉴항목을 구글광고와 비슷한 이미지로 세팅하여 어울림을 극대화하였습니다.

먼저 링크형 광고에 대해 설명하겠습니다 .
애드센스에서 광고추가로 들어가면 광고항목을 선택하는 화면이 나옵니다.


아래쪽에 보면 링크 광고들이 있습니다. 그 중 메뉴바에 들어가는 것은 세로 크기가 15인 728X15와 468X15입니다. 그러나 두 광고 모두  4개의 텍스트가 뜨기 때문에 각각의 문자 사이의 자간만 넓어진다고 생각하시면 됩니다. 저는 468X15를 사용했습니다. 이것으 선택하신 후에 자신의 메뉴바에 어울리도록 색깔을 맞춰야 합니다. 아랫쪽에 보시면 색깔을 선택할 수 있는 버튼이 있는데 사용자 설정으로 색깔을 바꿀 수 있는 우측버튼을 누르면 아래처럼 화면 나타납니다. 



그러면 자신의 메뉴바에 있는 것처럼 색깔코드를 넣어서 맞추면 되겠죠???

그럼 이제 블로그에 올려야 겠죠? 저는 티스토리를 사용하기 때문에 티스토리를 중심으로 설명하겠습니다. skin.html 에서 검색을 하셔서  아래를 찾으시길 바랍니다. 

[**_blog_menu_**]  ** 아니라 ##입니다.


바로 이 소스가 메뉴 바를 출력을 담당합니다. 그 옆에 바로 소스를 붙여넣으면 광고가 옆으로 배치가 됩니다 . 아래처럼 말입니다.

[**_blog_menu_**]<script type="text/javascript"><!--

google_ad_client = "ca-pub-1683803985213800";

/* menu1 */

google_ad_slot = "**********";

google_ad_width = 468;

google_ad_height = 15;

//-->

</script>

<script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

  ** 아니라 ##입니다. 


그런데 그냥 이렇게만 배치하면 사이 간격을 맞추기가 힘이 듭니다. 그래서 Style.css도 수정을 해야 합니다. 먼저 style.css에서 아래를 검색합니다.

BlogMenu


그 아래로 내려가면

.blogMenu li {

  float:left;

  background:url() no-repeat 0 5px;

  padding-left:28px;

  margin-right:28px;

}


위와 같은 소스가 있습니다. 아래에 padding-left와 margin-right 옆의 픽셀을 조정하시면 메뉴 텍스트 사이의 간격이 벌어집니다..이것은 구글광고의 간격과 맞추기 위해서 입니다. 

그 다음으로 해야 할 것은 구글광고처럼 메뉴에 밑줄을 넣는 것입니다. 

.blogMenu li a {

font-family:tahoma;

color:#ebedf7;

font-size:12px;

        text-decoration:underline;

}


.blogMenu li a:hover {

color:#ebedf7;

text-decoration:underline;


}



윗쪽 blogMenu li가 평상시 보이는 메뉴 스타일이고 아래 blogMenu lia:hover 이 마우스를 올려 놓았을때의 스타일입니다. 구글광고는 변함이 없이 밑줄만 되어 있죠... 그래서 저는 위의 것에 "text-decoration:underline;"을 아래 추가해 주었고, 아랫것에 "text-decoration:none;"로 되어 있던 것을 "text-decoration:underline;로 바꾸어 주면 구글광고와 텍스트 스타일이 동일해 집니다.


제 경험상으로 스킨을 과도하게 꾸미는 것은 개인적 만족으 주기는 하지만, 광고효과에는 해를 끼치는 경우가 많습니다. 저는 티스토리의 기본스킨인 
Magazine 을 제 취향에 맞추 수정해서 사용합니다. 언뜻 보기에는 크게 달라진 것이 없는 것처럼 보이지만, 은근히 많이 만졌습니다. 여하튼 원하시는 분들이 계시면 스킨도 공유할까 합니다. 그러면 링킄형 광고배치 같은 것이 적용되어 있기 때문에 사용하시기에는 편하실듯합니다. 여하튼 오늘은 여기까지만 하겠습니다.  

반응형