애드센스 광고 승인을 받고 나니 갑자기 할일이 많아졌다 일단 나의 블로그에 이 애드센스를 세팅을 해야하기 때문이다 그래서 하나하나 하는데 이번 시간은 사이드에 배너를 다는 방법을 알아보겠다 지금 내가 사용하는 이 스킨은 상당히 괜찮은 스킨이다 왜냐하면 스크롤을 해도 왼쪽의 배너는 상단에 고정이 되어 있기 때문에 광고 효과가 상당히 좋은 그런 스킨이다 스킨이 궁금하면 아래의 글을 참조하면 될 것 같다

그래서 나는 왼쪽에 한번 애드센스 광고 배너를 만들어 보았다 배너를 만드는 방법은 지난 시간에 한번 자세히 알아보았는데 그 글을 한번 더 참조를 하면 더욱 도움이 될 것 같다 이번 시간에는 예전 그 문서가 있어서 깊이있게 보기 보다는 간략하게 이야기를 해 보도록 하겠다 

지금 사용하는 이 스킨은 사이드바 기능이 아주 강력하다 이 사이드바는 글을 스크롤을 해도 상단에 그대로 고정이 되어 있기 때문에 더욱 주목받는 그런 배너를 만들 수가 있다 그래서 더욱 강력하고 애드센스 등을 설치하기에는 제격인 그런 스킨인 것 같다 아래의 사진 처럼 왼쪽에 배너가 두개가 달려 있는것을 볼 수가 있다 이 부분은 스크롤을 해도 내려가지 않기 때문에 글을 읽는동안 계속해서 노출이 되는 방식이다

그러면 어떻게 만드는지를 한번 알아보도록 하겠다 html 편집에 자신이 없는 분들이라면 이전 글을 참조를 해도 될 것 같다 보고 하면 더욱 도움이 될 것 같다 그러니 배너를 만들고자 하는 분들은 아래의 글을 일단 한번 정독하고 오기를 바란다 

그러면 위의 글을 보고 어느정도 감을 잡았다 생각을 하고 진행을 하도록 하겠다 위에서 본 부분을 티스토리 html 스킨 편집에서 찾아본다 dinositebanner 이 보일 것이다 이와 비슷하게 슬라이드바 element 를 만들어 준다 아래 처럼 껍데기를 먼저 만들고 주석 부분에 애드센스배너 라고 이름을 칭해 준다 

그리고 안에 소스를 넣어 준다 지난번 상 하단 배너를 넣는 부분과 같은 소스로 해도 상관이 없다 단지 빨간박스의 부분을 나의 블로그에 맞게 수정을 해 준다 width 는 가로를 이야기 하고 height 는 세로를 이야기 한다 이 부분을 나의 블로그에 맞게 한번 만들어 본다 나는 두개를 만들었다 

이렇게 소스를 코딩을 했으면 저장을 하고 나간다 그리고 티스토리 메뉴의 사이드바 쪽으로 들어가 본다 그러면 하나가 생겨져 있는 것을 알 수가 있다 사이드바를 아래와 같은 순서로 넣는데 뭐 순서는 상관 없다 원하는 순서대로 넣어주면 된다 그러면 이 순서대로 사이드바가 보여진다

이렇게 html 은 조금만 할 줄 알면 정말 무한응용을 할 수가 있다 개념만 알면 계속된 반복이기 때문에 조금 공부를 해 보는 것도 좋다 이렇게 하니 정말 괜찮은 사이트 같다는 생각이 든다 일단은 마음에 든다 다른 분들도 이 스킨으로 따라하기를 해 보기 바란다 ~~~~

애드센스 승인을 얻은 후로 부턴 한동안 애드센스 관련된 내용을 계속해서 연재를 할 예정이다 내가 이 오빠만세 사이트에 광고를 만들어 나가는 과정을 모두 글로 만들어 볼 예정이다 그럼으로 내가 가지고 있는 Tip 들이 다 이 곳에 들어갈 것이라 생각을 하고 많은 분들에게 이 내용들이 도움이 되었으면 좋겟다 

지난 시간에 애드센스 광고에 대한 부분을 이야기를 해 보았고 다양한 종류의 광고를 직접 만들어 보기도 햇다 그렇게 코드를 만들었다면 이제는 나의 사이트에 적용을 해 볼 차례이다 나의 경우는 자동광고와 광고단위를 함께 사용하는 편이다 다 장단점이 있기 때문이다 광고 단위로 쓰면 내가 원하는 곳에 광고를 넣을 수가 있기 때문이다 

애드센스 촤적화 광고 사이즈는 

내가 알고 있기로는 336*280 이 최적화 된 사이즈라고 볼 수가 있다 모바일에서도 확실하게 보이고 Pc 에서도 괜찮은 사이즈로 보이기 때문에 나는 이 사이즈를 즐겨 사용을 하고 있다 그리고 상단이 가장 수익이 괜찮기 때문에 상단 광고에 힘을 많이 주는 편이다 그래서 pc 에서는 상단에 2개의 광고가 모바일에서는 하나의 광고가 자동으로 보이게 할 예정이다 

이렇게 하기 위해서는 html 편집에서 스크립트를 넣어주는게 좋다 그러면 일단 먼저 스크립트를 애드센스에서 가지고 온다. 

신규 광고단위 에서 지난번에 만들어 놓은 상단광고를 가지고 온다 <> 이 표시를 클릭을 하면 소스를 볼 수가 있다 이 곳에서 소스 보기를 한다. 

가장 중요한 부분은 위의 빨간박스 안에 있는 부분이다 위의 부분은 클라이언트 라고 해서 애드센스 계정의 고유 코드이다 보통 펍코드 라고도 많이들 부른다 나의 애드센스 계정을 뜻하는 내용이다 그리고 아래 부분은 광고단위의 고유 코드이다 이 두가지 코드만 일단 알아 놓는다 그리고 스크립트를 만들어 본다 아래와 같이 

<div align = "center">
<script>
//상단 768 픽셀 이상일 경우 광고 송출
if(window.getWindowCleintWidth()>=768){
	document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle"style="display:inline-block;width:336px;height:280px;"data-ad-client="ca-pub-4706755557397688"data-ad-slot="2615550355"></ins>');
		(adsbygoogle = window.adsbygoogle || []).push({});
	}
</script>
					
<script>
//상단 광고 송출
	document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle"style="display:inline-block;width:336px;height:280px;"data-ad-client="ca-pub-4706755557397688"data-ad-slot="2615550355"></ins>');
		(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>




<div align = "center">
<script>
    //하단 전체광고
		document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:block;width:100%" data-ad-client="ca-pub-4706755557397688" data-ad-slot="2615550355" data-ad-format="auto" data-full-width-responsive="false"></ins>');
		(adsbygoogle = window.adsbygoogle || []).push({});
</script>		
</div>

자바스크립트를 잘 모르는 분들에게는 어려울 수가 있으나 너무 어렵게 생각을 하지 않아도 된다 위의 소스에서 딱 두군데만 고치면 된다 펍코드와 슬롯 부분만 수정을 하면 된다 그리고 적용만 하면 바로 멋진 광고코드가 붙는걸 볼 수가 있다

그러면 어떻게 하는지를 알아보자 일단 위의 소스를 만들었다면 아래와 같이 티스토리의 html 편집으로 간다 이 곳에서 수정을 하면 되기 때문이다 html 편집을 어떻게 해야하는지 모르겠다면 아래의 글을 참조하면 될 것 같다

자 그러면 html 편집에서 위의 소스를 한번 넣어보겠다 먼저 소스에서 아래 부분을 찾는다 이 부분은 본문 내용이 나오는 티스토리 매타 태그라고 보면 된다 그러니 이 부분이 본문의 내용이라고 보면 된다 그래서 이 광고는 본문의 위 아래에 나오게 하는게 오늘의 해야할 임무라고 볼 수가 있다 

본문의 내용을 찾았다면 아래 위로 위의 소스를 넣어준다 이렇게 하면 완성이 되었다 너무 쉽다 html 을 조금 알고 자바스크립트를 조금만 안다면 누구나 쉽게 할 수가 있다 소스가 이해가 가지 않는다 하더라도 이 부분만 그냥 따라하기를 하면 될 것 같다

그러면 위의 소스에서 어떤 부분을 수정을 하면 될까 딱 두군데만 수정을 하면 된다 초록 박스로 한번 부각을 시켜 보겠다 아래의 초록 박스 부분을 애드센스에서 가지고온 소스로 수정만 해 주면 알아서 들어가 진다 처음 하면 어렵겠지만 몇번 해 보면 어렵지 않게 하지 않을까 하는 생각이 든다 소스는 파일로 첨부를 해 놓겠다  

그러면 광고소스를 넣기 전과 후를 한번 비교를 해 보겠다 넣기전은 아래와 같이 일반 텍스트만 보이는 것을 알 수가 있다 

광고를 넣었을때는 이렇게 예쁘게 나오는 것을 알 수가 있다 pc 버전은 이렇게 상단에 두개의 광고가 나오는게 개인적으로는 더 효과가 있는 것 같다 물론 다른 스타일을 좋아하는 분들이라면 알아서 잘 만들어 놓으면 될 것 같다는 생각도 든다

그리고 아랫 부분은 이렇게 큰 광고가 나오는 것을 볼 수가 있다 아래는 이렇게 크게 나오는게 괜찮아 보여서 이런 광고를 넣게 되었다 그 아래 일치하는 광고를 넣으면 더 좋을 것 같다 다음에는 일치하는 광고도 한번 넣어봐야겠다 

그리고 창을 작게 하면 이렇게 상단의 부분이 하나의 광고로 만들어지는 것을 볼 수가 있다 그러니 모바일이나 작은 화면으로 볼 때는 두개로 나와서 불편하지 않고 깔끔하게 광고를 볼 수가 있다는것을 알 수가 있다

이런 방법이 아닌 플러그인을 사용하는 방법을 이용해도 된다 요즘은 수익 이라는 곳이 별도로 있어서 그 곳에 애드센스 코드를 넣고 해도 되나 좀 느린 감이 있어서 나는 옛 스타일로 그냥 사용을 하고 있다

이 방법이 티스토리 글 로딩 속도가 더 빠른 것 같아서 불편해도 사용자를 위해 빠른 속도를 유지하기 위해 이 방법을 선호한다 위의 소스 부분은 파일로 남겨 놓을테니 사용을 하고 싶은 분들은 사용을 해 보기 바란다

오늘 이 방법으로 광고를 띄워 볼 사람들은 한번 따라 해 보는 것도 나쁘지 않다는 생각이 든다 다음에는 본문에 광고를 쉽게 넣는 방법에 대해 한번 이야기를 해 보도록 하겠다 그러면 오늘도 좋은 하루!!!

오늘은 티스토리 신규광고 광고단위 기준으로 세팅하는 부분을 한번 알아보도록 하겠다 예전에는 모두가 다 이런 광고단위 기준으로 세팅을 했었는데 요즘은 사이트 기준으로 세팅을 하는 방법도 있으니 내가 원하는 스타일로 하는 것도 괜찮다는 생각이 든다 사이트 기준은 아래의 글을 참조를 하면 좋을 것 같다 

그러면 광고단위 기준을 보도록 하겠다 3가지의 스타일로 만들어 낼 수가 있다 하나하나 알아보는 것도 괜찮을 것 같아 한번 어떤 기준인지를 알아보겠다. 

권장크기 디스플레이광고 : 이 크기는 내가 원하는 크기로 삽입을 하고 싶다 그럴때 사용을 하면 된다 베너나 상 하단에 광고를 달때 이 광고단위를 많이 사용을 한다.

네이티브 인피드광고: 게시글 리스트 사이에 들어가는 광고를 이야기 한다 그러니 게시글 리스트를 볼때 몇개에 하나씩 들어가는 광고단위를 이야기 한다. 

네이티브 콘텐츠내 자동삽입: 콘텐츠에 광고를 삽입을 하고 싶을때 이 광고단위를 설정을 하면 된다 하나하나 들어가서 확인을 해 보면 좋을 것 같다 자동광고와 다른 부분은 자동광고는 이런 부분들을 복합적으로 애드센스가 자동으로 광고를 넣어준다면 이 광고단위 기준은 내가 원하는 곳에 소스를 넣을 수가 있다는게 가장 큰 특징이라 볼 수가 있다.

그러면 디스플레이광고를 하나하나 알아보도록 하겠다 먼저 사각형을 알아보겠다 이 사각형은 보통 상 하단에 광고로 많이들 들어간다 그러때 이 광고를 사용을 하면 될 것 같다 아래와 같은 스타일의 광고가 들어가 지는걸 알 수가 있다

수평형 : 이 광고는 가로로 긴 화면을 만들어 준다 그러니 상단긴 배너 등으로 사용을 하면 좋을 것 같다 홈페이지 상단이나 하단 푸터 부분에 넣으면 좋을만한 그런 배너이다

수직형 : 이는 사이드바 에 들어가는 광고이다 사이즈바는 길게 새로로 들어가는게 괜찮기 때문에 이 광고를 사용을 하면 된다 

그러면 하나 만들어 보도록 하겠다 나는 상단광고1 로 한번 만들어 보겠다 보통 상 하단에 광고를 넣을때 하나만 만들어도 되지만 광고마다의 수익율을 보기 위해서는 단위를 별도로 만들어 놓는게 좋다 그러면 어느 광고에서 수익이 가장 많이 들어오는지를 알 수가 있기 때문이다

반응형으로 해서 하면 알아서 크기를 괜찮게 만들어 준다 만들기 버튼을 클릭을 하면 위의 이름으로 광고가 만들어지며 소스를 카피할 수가 있다

위의 광고를 카피해서 블로그나 홈페이지 원하는 위치에 넣어주면 그 곳에 광고가 붙어서 나오는 걸 알 수가 있다 이런 식으로 나는 하나하나 단위별로 다 광고를 별도로 만들어서 사용을 한다 그러면 단위별로 어디에서 수익이 많이 나오는 지를 확인을 할 수가 있어서 유용하다

그러면 오늘은 지난 시간에 이어서 광고단위 별로 광고를 만드는 방법을 한번 알아보았다 한번씩 해 보면 어렵지 않게 가능하기 때문에 먼저 승인을 받고 나면 이렇게 광고를 여기저기 달아보고 수익율을 알아보는 것도 정말 재미잇는 경험이 아닐까 하는 생각을 해 본다 ^^