aaaicu

안녕하세요☺️

티스토리를 하다 보면 

모바일 화면과 PC 화면의

콘텐츠 배치가 마음 같지

않을 때가 있어요!

1. 카카오 맵 사이즈 벗어남

저는 맛집 관련 글들을

꾸준히 올리고 있는데

자꾸 다음 맵이

화면을 벗어나더라고요! 😭

오른쪽에 보이시나요?

다음 맵의 사이즈가

너무 커서 그래요😣

그렇다고

다음 맵의 사이즈를

모바일에 맞게 줄이면

PC 화면에서는 지도가

너무 작아서

안 이쁘거든요!

2. 지도 삽입 방법 공유

열심히 고민해서 해결했어요!

저만 겪는 문제는 아닐 것 같아서

해결 방법을 공유할게요😉

1) 카카오 맵 HTML 태그 가져오기

https://map.kakao.com/

카카오 맵에서 추가하고자

하는 위치를 검색해요

다음과 같이

HTML 태그를

복사 버튼을 눌러요

지도의 크기와 

아이콘의 모양을 정해서

소스코드 생성을 해요!

(전 개인적으로

400*400 사이즈를

좋아해요😊)

다음과 같이

이미지 지도를 클릭 후 

나오는 소스코드를

복사해두어요!

2) 가운데 정렬하여 붙여 넣기

이제 티스토리 게시글에

붙여 넣을 건데

다음과 같이

HTML 모드에서 글을 

작성해야 해요

아까 복사해 놓은 코드를 

그대로 붙여 넣으면 

가운데 정렬이 되지 않아요!!

가운데 정렬을 위해서는

아래와 같은 수정 과정을 거쳐야 해요

아래 코드를 참고해서  

코드를 수정해 보아요☺️

<div align="center">

	<!-- 여기에 복사한 코드를 넣으면 돼요!! -->

</div>

3) max-width / max-height  활용

지금까지 잘 따라왔다면

위와 같은 모양일 거예요!

이제 마지막 하이라이트!

모바일 화면에서도

잘리지 않고 PC 화면에서도

이쁘게 나오게 하는 비결은

바로 max- 에 있어요!

위에 노란 네모로

표시해놓은 곳의

width / height를

max-width / max-height로

변경하고 저장하면

끝!! 🎉

이제 깔끔하게 배치된

지도를 보실 수 있을 거예요

흥미로운 추천이었다면

로그인이 필요 없는 공감 버튼 꾹 눌러주세요! 

지난 포스팅에선

애드센스 상단 광고를

추가하기에 앞서 

광고를 생성했지요😎

[티스토리] 애드센스 상단 2개 추가하기 - 1

자, 이제 

광고를 적용해 볼게요

소스코드가 들어가기 때문에 

잘 보시고 복사해서

사용하시면 된답니다!

"적용 : 티스토리 플러그인으로 추가"

1. 소스코드 만들기

<div style="display:table; width:100%">
    <div style="display:table-row;">
        <div class="ad_1" align="center" style="display:table-cell;">
            
            첫 번째 광고 붙여 넣을 곳
            
            
        </div>
        
        <div class="ad_2" align="center" style="display:table-cell;">
            
            
            두 번째 광고 붙여 넣을 곳
            
            
        </div>
    </div>
</div>

광고 두 개를 상단에 놓고 

가운데 정렬로 

깔끔하게 배치하게 만들어놓은

코드랍니다😉

메모장 같은 곳에

위에 소스를 복사해서 

놓아두세요!

다시 애드센스로 접속해서

전 포스팅에서

생성해 놓은 광고의

코드 가져오기

버튼을 눌러보아요😌

생성된 코드를

확인하실 수 있을 거예요

이제 코드 복사하기를

눌러서 제가 드린 코드에

붙여 넣으면 돼요

첫 번째 광고 붙여 놓을 곳과

두 번째 광고 붙여

놓을 곳에 붙여

넣으면 됩니다.

여기까지 했다면

코드 준비 끝! 👏👏👏

2. 플러그인 붙여 넣기

관리자 페이지의

플러그인을 클릭하면

여러 가지 플러그인 목록이 나와요!

이 중 구글 애드센스(반응형)를

선택해야 해요

반드시 반응형을 선택하세요

이제 상단을 선택하고 

아까 만들었던 코드를 

붙여 넣고 변경 사항을 저장하면

끝!! 🎉

궁금하신 분들만 읽어보기😮

Q : "난 고정으로 사이즈를 만들었는데

왜 반응형으로 넣어야 하지?!"

A : 간단히 설명드리면

위에서 두 개를 한 번에 아우르는

코들 만들었기 때문에 

티스토리 플러그인에서 요구하는

PC/모바일의 광고 규격과 맞지 않아요

나름 열심히 설명한다고 설명했는데 

혹시 부족했다 하시는 분들은

밑에 댓글 달아주시면

성실히 답변드릴게요!

가운데 정렬 관련

포스팅도 있으니

개발에 관심이 있는 분들은 아래 글도 

읽어보시면 도움이 될 거예요

흥미로운 추천이었다면

로그인이 필요 없는 공감 버튼 꾹 눌러주세요! 

안녕하세요😌

애드센스를 승인은 받았는데

막상 티스토리에 적용하기가 

막막하신 분들이 있을 것 같아요

상단에 2개 광고를

노출해야 광고효과가

좋다고 하니 차근차근

따라하면서 많은 수익 올리세요! ㅎㅎㅎ

 친절하게 알려드릴게요!☺️

"준비 : 애드센스 광고 코드 생성"

1. 디스플레이 광고 생성

다음과 같이 디스플레이 광고를

선택해서 새로운 광고 2개를

생성하시면 됩니다😎

2. 광고 사이즈 고정

광고를 반응형으로

만들기보단 광고 크기를

고정하기를 추천해요🤔

반응형은 페이지를

열었을 때 로딩하는 시간이

오래 걸리더라고요!

그럼 광고 노출

시간이 줄고 수익에도

안 좋겠죠?

3. 광고 크기 336 * 280 지정

336*280이라는 숫자는

애드센스 광고계의

상식이랄까요?

가장 많이 생성되는

광고 사이즈라서 

많은 파워블로거들은

336*280을

쓴다고 하네요!

4. 광고 저장

다음과 같이 코드가

생성되었다면

잘 된 거예요! 🎉

위의 과정을 한 번 더 해서

총 2개의 코드를

갖고 있어야 해요!🤓

이제 준비는 끝났으니

적용하러 가볼까요?!!😆

[티스토리] 애드센스 상단 2개 추가하기 - 2

흥미로운 추천이었다면

로그인이 필요 없는 공감 버튼 꾹 눌러주세요! 

업무를 하면서 배너 개발 요청을 받아서 처리한 경험이 있다.
요청 사이트에 배너를 개발하여 추가하고보니,
내가 관리하는 티스토리에도 적용이 가능할 것 같아 보였다.
스킨을 수정해서 배너를 추가하고 배너에 광고를 넣어보았다.

티스토리 블로거들에게 광고 꿀팁이 되었으면 하는 마음으로 광고배너 추가방법을 공유하고자한다.

1. 배너 만드는 방법 익히기

배너 만들기 포스팅한적이 있다. 
[Web 개발/HTML & CSS] - CSS의 position으로 배너 추가하기

포스트를 보고 먼저 익혀두면 스킨에 적용하기 편할 것 같다.

2. 배너 추가하기

1) 기준 태그 찾기

티스토리에서 배너의 기준이 될 태그를 찾아야한다.

크롬의 경우 F12를 눌러서 개발자 도구를 열고 Ctrl+Shift+C 를 눌러서 태그찾기 모드를 활성화 해주면 
기준이되는 요소를 찾기가 편할 것이다.

나 같은경우 id가 "content-inner"인 div태그를 기준으로 하기로 했다.
(https://kyome.tistory.com/68 게시글에서 id가 "contents"인 div 가 내 티스토리 스킨에서는 content-inner로 쓰인다고 할 수 있다. )

2) 스킨편집하기

티스토리 관리자 페이지에 접속(https://티스토리아이디.tistory.com/manage )
스킨편집 - html편집으로 접속

아까 찾아 놓은 id = "content-inner" 태그를 찾아서  style="position: relative;"를 추가해준다.

<div id = "content-inner" style="position: relative;" >

해당 태그가 닫기 전에, "content-inner"의 앞에 
광고판이 될 div를 추가해준다.

<div id = "content-inner" style="position: relative; >
~~~
~~~
~~~
<!--광고 div-->
<div id="side_banner" style="position: absolute; top: 20px; right: -180px; width: auto; height: auto; ">
		<div align="center">

		광고 코드

          
		</div>
</div>
</div>

3) 광고 코드 붙이기

광고 div를 만들었다면 거의다 끝났다.
이제 <div align="center"> 밑에 광고사가 주는 광고 코드를 복사 붙여넣기하면 된다.

3. 움직이는 배너 만들기

움직이는 배너는 위에 참고한 포스팅을 숙지한 후에 

[Web 개발/HTML & CSS] - jQuery로 움직이는 배너 만들기

포스트의 내용을 따라 적용하면 된다.

4. 응용하기

JQuery와 javascript를 할 줄 안다면 간단한 코드를 추가하여 광고 배너를 더 동적으로 수정할 수 있다.

현재 나의 티스토리를 보면 반응형에 맞게 광고의 위치가 바뀌고 
게시글위에 움직이는 배너는 제거 문구를 클릭하면 배너가 사라지게 해놓았다.


** 궁금한 점 댓글 달아주시면 답변 혹은 추가 포스팅해볼게요! 

티스토리에 개발 관련 포스팅을 꾸준히 하기 시작하면서 '블로그에 광고 붙이기'라는 새로운 도전거리가 생겼다.

실제로 광고 수익이 얼마나 나는지도 궁금했고 

나의 블로그를 통해 소소한 수익이 들어온다면 값진 보상이라고 생각했다.

근데, 결코 쉽지 않았다.

이전 포스팅에서 설명했듯 구글광고는 생각보다 훨씬 깐깐했고 

그나마 대체광고 정도로 생각했던 다음의 애드핏도 간신히 승인을 얻어냈다. 

(티스토리 애드핏 승인 : 보류사유 정리(승인 꿀팁) )

그렇지만.. 애드고시라고 부를정도로 승인을 안 내어주는 구글광고가 탐났다. 👀

가치 있는 인벤토리: 콘텐츠가 스크랩됨

나에게 가장 많이 돌아온 애드센스 측의 보류 사유는 내 콘텐츠가 스크랩됐다는 것이다.

하지만 모든 콘텐츠는 내가 작성했고 혹시 다른 콘텐츠를 가져올 경우에는 출처를 밝혔기때문에 더 억울했다.

** 애드핏 VS 애드센스 (승인 시)

애드핏과 애드센스 승인과정에서 차이점이 있다면, 

애드핏이 조금 더 친절한 피드백을 해준다는 것이다.

애드핏은 사람이 검토결과를 써주는 것 같은 느낌을 받았고 

애드센스는 봇을 돌려서 검토피드백을 주는 걸로 보였다.

‘어디 부분이 스크랩된 것 같으니 어떻게 고쳐라’가 없으니 스스로 검토하고 수정하는 방법 밖에 없다.

주요 수정 사항

스스로 검토한 주요 수정 사항은 다음과 같다.

1. 백준 알고리즘 문제 풀이 수정

백준알고리즘 코딩 테스트 문제를 풀어서 포스팅한 부분이 있다.

문제부분을 복사해서 붙여넣고, 문제를 풀어 해설한 포스팅이었다.

아무래도 스크랩은 여기서 문제 부분을 말하는 것 같았다.

그래서 문제부분을 모두 URL로 바꾸고 문제 풀이부분만 올렸다.

2. 참고 코드 수정

개발 공부를 하면서 참고할 만한 코드를 부분적으로 가져온 부분이 있었다.

참고할 코드를 삭제하면 게시물 자체가 의미가 없어지기 때문에 

코드별로 주석을 달았다.

내가 이해하는대로 설명을 기록했다.

3. 꾸준한 포스팅

스크랩한 게시물이 많다는 애드센스의 피드백은

글 전체 중에서 스크랩된 게시물의 비율 따져서 판단할 것으로 생각했다. 

그렇다면 전체 글의 수를 늘리면 스크랩된 글의 비율이 줄어들 것이라고 생각했다.

위의 내용처럼 1번과 2번을 수정하고도 애드센스 측에 여러번 거절 당했지만

3번 내용처럼 꾸준히 포스팅을 하니 어느날 갑자기 애드센스에서 승인을 해주었다!

감동이었다.. 애드고시 드디어 통과

Daum adfit(이하 애드핏)은 google adsense(이하 애드센스)에 비해서 승인이 잘 난다고 알려져있다.

이미 수차례 애드센스에게 거절당했기 때문에 애드핏 광고부터 올리기로 마음먹었다.

근데 생각처럼 쉽지 않았다.

다른 블로거들은 어떻게 그렇게 쉽게 광고를 붙인건지.. 

다른분들의 포스팅을 보니까 

티스토리 자체에서 제공하는 플러그인에 광고 코드를 삽입해서 저장하면 된다길래

그대로 시도했다. 

결과는 보류

수차례 시도했는데 다양한 사유로 보류처리되었다.

다양한 보류사유를 정리하자면 다음과 같다.

보류 사유 정리

1. 스킨이 광고를 가리면 안된다.

애드핏은 제공해주는 샘플광고 이미지가 조금이라도 가려지거나 잘리면 안된다.

원인은 반응형스킨이었다.

사용하고 있기 때문에 사이즈가 줄어들면 그에 맞게 광고도 반응형으로 노출할 수 있어야한다.

2. 모바일 환경에 적합하지 않다.

내 블로그의 방문자는 대부분 PC로 접속하기 때문에 PC플러그인에만 광고를 추가했다. (아래 이미지 참고)

근데도 모바일 환경을 고려하라니... 

이 역시도 반응형 스킨 때문으로 보인다. 

브라우저를 줄여보면 블로그는 모바일 블로그모드로 바뀌지만 

광고는 화면에서 잘린채 자리를 지키고 있기 때문이다.

3. 광고 수가 너무 많다.

한 화면에서 3개까지만 노출되어야하며 4개부터는 가독성을 떨어뜨린다고 판단하여 보류시킨다.

4. 게시물의 수가 부족하다.

찾아보니 최근 한달 간 5개이상의 게시물이 있어야 승인받는데 문제가 없다고한다.

해결

결국 플러그인으로 광고코드를 삽입해서 자동으로 추가하는 방식은 포기하기로했다.

광고가 본문에 자동으로 삽입되지만 반응형으로 광고가 움직이지 않으니.. 별다른 방법이 없었다.

결국 스킨에 직접 광고코드를 삽입해서 광고를 노출하기로 했다.

관리자페이지에서 스킨수정 - html 수정으로 들어가서 원하는 위치에 div를 만들고

광고사이즈에 맞게 div사이즈를 고정해서 content 아래에 삽입했다.

반응형에 맞게 CSS에 @Media 부분을 찾아서 모바일 모드일때는 div에 display:none;을 만들었고

PC모드일 때는 display:inline;이 되도록 해서 광고가 온전히 보여질때만 노출하도록 만들었다. 

결과

많은 시행 착오를 지나고 결국 애드핏 심사에서 승인을 받았다!

남들은 쉽게 하는거 같던데.. 멀리 돌아온 느낌을 지울 수 없다.. ㅋㅋㅋㅋ