본문 바로가기

Programming Project/티스토리 광고 달기

티스토리 플러그인에 에드핏(Adfit) 광고 달기 (사이드바 , 모바일) / 에드센스 대신


투명한 기부를 하고싶다면 이 링크로 와보세요! 🥰 (클릭!)

바이낸스(₿) 수수료 평생 20% 할인받는 링크로 가입하기! 🔥 (클릭!)

에드핏은 에드센스와 비슷한 광고를 제공하지만 더욱 검토 과정이 쉽고, 친절하다.


특히 한국에서 (다음카카오) 만든 메이저 광고 제공자이기도 하고,


* 수익이 제일 짭짤하다 ㅎ_ㅎ


이제 에드핏에서 광고를 달기 위해서 필요한 절차들을 하나씩 소개하도록 하겠다. ( + 꿀팁 포함 )


1. 가입하기


가입을 해야한다.


https://adfit.biz.daum.net/


으로 가서 가입을 진행하자.





기존 다음 계정이 있다고 하더라도 비즈니스 회원 가입은 따로 또 진행해야 한다.




개인 가입자로 선택 한 후 인증을 하고,


그 후 내용을 적당히 쓰면 가입이 진행된다.




2. 스크립트 받아오기



가입을 한 후에 




상단의 광고관리 라는 곳으로 들어가자.






그 후 새 매체 버튼을 클릭해서








적당한 매체명을 적고 , Web 으로 선택후 매체 고유값은 본인의 티스토리 주소를 적어주면 된다 ( ex wingnim.tistory.com )


그 후 , 만들어진 광고단위로 들어가게 되면



새 광고단위 버튼이 있다.


클릭하자.


이 광고 단위는 원하면 몇개라도 만들 수 있으니 너무 선택에 조급해하지 말자.


적당한 광고단위명을 입력하고


이미지 광고 종류를 사이드바 광고를 달려면 250*250 광고를 선택하고, 모바일 광고를 달기 위해서는 띠배너를 선택해서 만들고, 만든 후의 스크립트를 복사해놓자.



만약 복사해놓지 못했다고 하더라도 



저기 스크립트 부분을 누르면 언제든지 다시 가져올 수 있으니 너무 걱정하지 말자.


3. 티스토리 세팅  



( *사이드바의 경우 )


250*250 광고 크기를 선택한 경우 진행하면 된다.


우선 배너 출력 티스토리 플러그인을 활성화 시켜 놓자.




그러면 티스토리 관리에 사이드바 부분을 들어갔을 때



HTML 배너출력이라는 것이 활성화 되어 있을 것이다.





그렇다면 이 + 버튼을 클릭하고 알맞은 사이드바 위치를 선택한 후에 [ 편집 ] 을 들어가자.




그리고 HTML소스 창 안에 아까 복사했던 스크립트를 붙여 넣으면 된다.



붙여넣고 저장을 한 후 내 홈페이지에 가보면 제대로 광고가 출력되는 것을 볼 수 있다.




( * 모바일 광고의 경우 )



플러그인에서 에드핏을 활성화 시키자.



그리고 적당한 위치를 선택한 후에 


아까 50이나 100짜리 두께의 스크립트를 받아온 것을 그대로 붙여넣으면 된다.


단 참고로





꾸미기 -> 모바일로 간 후에 볼 수 있는 설정을 해줘야 하는데






이렇게 모바일웹 자동 연결을 사용하지 않을 경우에는 모바일 광고가 뜨지 않을 수 있으니 주의 바란다.


2018 06 27 추가 - 


이제 에드핏에서 PC 본문 광고도 지원한다.


250*250광고 단위를 발급받았다면



이 플러그인을 사용하자



마찬가지로 코드를 붙여넣고 적용하면 된다.





4. 디자인 꿀팁 ( 사이드바일 경우 )


나같은 경우에는  그냥 불여넣었을 때에는 디자인적으로 마음에 안드는 부분이 있어 조금 수정을 했다.


 - 가운데 정렬


기본적으로 스크립트를 붙여 넣으면 왼쪽 정렬인 상태로 유지 되는데 가운데 정렬을 하기 위해서는 스크립트를 붙여넣을 때,


<div style="text-align:center;width:100%;font-size:0px;">

<span style="display:inline-block;">

     스크립트 내용

</span>

</div>


 이렇게 세트로 묶어서 전부를 붙여넣으면 된다.


 - 테두리 둥글게


또한 내 블로그 사이드바는 테두리가 둥글기 때문에 가운데 정렬을 하고 광고창 자체에도 테두리 둥글게가 필요해서 모서리 또한 둥글게 바꿔주었다.


다만 이 경우에 모서리만 둥글게 바꿔주면 원래 오리지날 광고에 네모난 테두리가 있을 경우에 모서리 귀퉁이만 사라지는 현상이 발생해서 자체적으로 얇은 테두리를 추가적으로 만들어 주었다.


max-width:250px;max-height:250px;

아래 소스 코드의 이 부분의 픽셀을 본인의 광고 픽셀 크기로 바꾸면 된다.


<div style="text-align:center;width:100%;">

<span style="border:1px solid #ccc;border-radius:10px;overflow:hidden;max-width:250px;display:inline-block;max-height:250px;">

    스크립트 내용

</span>

</div>




그러면 원래 이렇게 테두리가 있던 광고 또한 무리없이 예쁘게 볼 수 있게 된다.



그럼 우리도 짱짱 광고를 달고 있는 블로그를 운영해보도록 하자 ^0^7


언젠가는 치킨을 사먹을 수 있겠지..?




심사는 체감상 이렇게 사이드바랑 모바일 다 해놓으니 2일정도 후 부터 광고가 뜨기 시작했다.



질문은 댓글로 !