블로그 메뉴에 구글 광고 붙이기 - 티스토리 편.

구글 애드센스 중에, 한줄짜리 텍스트 형태로 나오는 게 있다.

( 엔간하면 다른 그림 찾으려 했는데, 찾다찾다 없어서 이 블로그에 적용한 그림을 썼다. -_-; )

개인적으로 텍스트 기반 광고를 상당히 마음에 들어한다. 왜냐면 내 블로그는 그림보다 글을 보기 좋고, 배경색이 어둡기 때문에 화려한 그림이 들어간 광고보다는 어두운 배경에 텍스트로 표시된 광고가 심미적으로 좋고, 튀지 않는다. 

뭐, 그건 내 개인 생각이고, 사람마다 다르겠지만, 광고를 본문이 아닌, 블로그의 제목 부근(혹은 제목 바로 아랫 줄) 에 넣고 싶은 사람도 있을 거다.

그림에서 보이는 광고 위치와 길이, 정렬은 모두 조정이 가능한데... 분명히 나처럼 생각하는 사람이 또 있을 듯 해서, 삽질했던 정보를 기록한다. 다른 사람에게 도움이 되기를.

일단, 광고를 만든다 ( https://www.google.com/adsense/). 이하는 그림으로 설명

광고를 만들 때에 광고 크기는, 세로 길이가 15px 인 광고를 선택해야 한다. 메뉴 목적이라면,  468 x 15 보다는 728 x 15 가 보기 좋다. 역으로, 메뉴가 아닌 본문에 광고를 넣는다면, 468 x 15 가 더욱 어울릴 수도 있다.

 

그 다움 중요한 게 배경색과 광고 본문의 글자색이다. 이를 조정하기 위해 "맞춤 설정 사용" 을 클릭한다. 

일반적으로 광고를 생성하면, 흰 바탕의 검정색 ( 혹은 파란색 ) 광고가 나온다. 하지만 내 블로그의 디자인은 검정 바탕에 회색 글씨이므로, 기본 설정이 맞지 않는다. 
image가 아닌 Text 광고를 사용하려는 목적은 사이트의 디자인을 무너뜨리지 않는 것이므로 ( 나만 그런가? @_@ ) 배경과 글자 색 또한 사이트에 맞게 조정해 줘야 한다.
문제는 RGB값인데... 만일 자신의 블로그가 흰색 배경이 아니라서 색 정보를 알아야 한다면, 그림판 등을 이용해서 색 정보를 알아낸 후에, 그 값을 위의 내용에 대입하면 된다. 예를 들어 이 블로그의 경우,  테두리 값은 "000000", 제목값은 "9E9E9E", 배경 값은 "4E4E4E" 이다.

이거 알아내는 방법은, 윈도우라면 그림판 프로그램으로 알아낼 수 있다. 예를 들어
 

1. ALT + Print Screen 버튼을 눌러서 화면을 갈무리한다.
2. 그림판을 연다.
3. Ctrl + V 로 붙인다. 
4. 그럼 자신이 작업하던 화면이 그림판에 복사되는데, 이 화면에서
5, 그림판의 "색 선택" - 스포이드 모양 - 을 클릭해서, 색 정보를 알고싶은 값을 클릭한 다음에
6. 그림판의 "색 편집" 을 누른다. 여기의 색 정보값( RGB )을 보면, 원하는 색에 해당하는 RGB값을 볼 수 있다.
7. 단, 이 값은 10진수 값이므로, 16진수 HEX 값을 알고자 한다면, 윈도우의 계산기 프로그램을 실행시킨다. 

8. 계산기에서 "Dec" 버튼을 누르고 위의 10진수값을 입력한 다음 "Hex" 버튼을 누르면, 10진수 값이 16진수 값으로 바뀐다.
예를 들어 위의 값 237 에 대한 16진수 값은 "ED" 이다. 


뭐, 그래서, 원하는 광고를 만든 후에 색을 보정하고, 코드를 얻어냈다면, 어디에 붙여야 하는가가 문제인데 말이지... 예제 그림처럼 제목 부분에 붙이려 한다면, 다음과 같이 한다.

11. "티스토리 > ADMIN > 꾸미기 > HTML/CSS 편집" 으로 들어가서, skin.html 에서 "<div id="body">" 를 검색( Ctrl + F 키 )한다. 

12. 검색한 태그 바로 아래에, 광고 코드를 붙인다.( <div id="body"> ~ <div id="content"> 사이 )

<div id="body">

<div id="content">

<!-- 태그 -->

이걸

<div id="body">

<!-- 상단 구글 메뉴 --> 

<script type="text/javascript"><!--

google_ad_client = "아햏햏햏햏";

/* 468 &#42; 15 한줄 광고 */

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>

<!-- 구글 메뉴 끝 -->

<div id="content">

<!-- 태그 -->

이렇게.


요기까지 하면, 제목 하단에 메뉴처럼 구글 광고가 나올 거이다.  

근데...정작 난 안 어울릴 거 같다. 빼야 되나.... -_-;;